HTML and CSS Reference
In-Depth Information
CHAPTER 2
■ ■ ■
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
11
