HTML and CSS Reference
In-Depth Information
■ ■ ■
The Language of Style Sheets
O K, now we've had a look at modern web design, and how CSS fits into that, let's turn our
attention to recapping the basics of CSS to make sure we are all on the same page before we
start immersing ourselves in all the exciting techniques and productivity-improving tips that
make up the rest of the topic. Even if you think you have a good handle on the basics of CSS,
at least skim through the chapter anyway. Specifically we cover the following:
Adding style to your document
Creating a style sheet and declarations
Choosing selectors to apply styles to your markup
Understanding XHTML and how it can be represented as an element node tree
Daisy-chaining and grouping selectors
Adding Style to Your (X)HTML Document
In this section we'll explore the various ways in which you can add CSS styles to your (X)HTML
document. We'll cover several approaches, and offer some best practices for making your markup
and presentation information work well together.
The <link> Tag
There are a few ways to add CSS style information to an (X)HTML document, but it's almost
always a best practice to use the <link> tag. The tag's purpose is simple: to associate one docu-
ment with another. For our purposes, let's use it to associate a CSS document with an XHTML
document, like so:
<link rel="stylesheet" type="text/css" href="styles.css" media="all" />
This simply tells the XHTML document to use the file styles.css as a source of CSS information.
We call CSS documents referenced in this way external style sheets . Link tags that reference
external style sheets must be placed inside the head element of your (X)HTML document (but
not inside any other element).
The attributes of the <link> tag are fairly straightforward. The rel , or relation, attribute,
describes the sort of relationship the linked file has to the (X)HTML file calling it. For CSS style
sheets, its value will always be stylesheet . The type attribute defines the file type of the linked
Search WWH ::

Custom Search