complete css guide
<< how do they work? | statements >>
Linking and embedding a style sheet
We've had a thorough look at style sheets, what they are, how they work and why you might use them. But we haven't discussed how a browser knows about a style sheet. If a style sheet contains the information to tell a browser how to draw a particular page, how does a browser know whether it should use a style sheet, and where to find it?
There are two ways that a style sheet can be associated with an HTML document.
First, the style sheet can be embedded in the head of an HTML document. We will look at how this is done shortly, but before that, let's look at why this mightn't be the best approach.
We have made much of the site management capabilities of style sheets. We saw how a single style sheet can affect whole sites, and how changes to that style sheet affect every page linked to the style sheet. If we go and embed the style sheet in the head of the web document, we lose all of these advantages. We haven't really separated appearance from content much at all.
The second way, and as you can probably tell, the preferred way of associating web pages with style sheets is to place a link in the head of the HTML file to the style sheet.
With this link, when the browser begins reading the page, it sees the style sheet link, and downloads the style sheet, then uses the style sheet to draw the page.
You can in fact place links to several style sheets in an HTML file. This does not mean that a browser uses each of them, as though they imported one another. Rather, the browser chooses one of these as the style sheet to use (theoretically, the browser should ask the user which style sheet to use).
Embedding style sheets
Browser support
Get browser support information for embedding in the downloadable version of this guide or our browser support tables.
Style sheets can be embedded into the <head> element of HTML documents. Quite simply, the style sheet itself is placed inside a <style> element like this:
<style type="text/css"> </style>
As explained above, embedding is not the best use of style sheets as it means you lose one of the major advantages of CSS - the ability to modify the appearance of a whole site by making changes to a single file. On the other hand, however, embedding is commonly used by applications such as Dreamweaver and GoLive which make use of the page layout aspects of CSS.
Linking to style sheets
Browser support
Get browser support information for linking in the downloadable version of this guide or our browser support tables.
Note that the web page links to the style sheet. The style sheet has no knowledge of the pages which are linked to it.
To link a web page (HTML document) to a style sheet, you place a link to the style sheet in the head of the document, using the following syntax:
<link rel="stylesheet" type="text/css" href="http://www.westciv.com/style/style.css" />
Let's take a look at each attribute briefly.
rel="stylesheet"
This says that it is a forward link, and tells the browser what to expect at the other end, namely a style sheet.
type="text/css"
Theoretically, style sheets might be written using any number of languages. The style sheets we've been talking about in here are Cascading Style Sheets (CSS). Extensible Style Language (XSL) is another that may become important. This attribute tells the browser what format it is going to receive the style sheet in. The content type is necessary.
href="http://www.westciv.com/style/style.css"
This tells the browser where to locate the style sheet. This can be either a relative or absolute url. Remember, the relative url is relative to the HTML document, unlike URLs within style sheets which are relative to the style sheet.
Note that the " />" closing of this element is the correct way of closing an empty element in XHTML 1.0.