JavaScript EditorBest javascript editor debugger     Ajax website 
↑


Main Page

Previous Page
Next Page

Linking External Style Sheets

The easiest, best supported, and most common way to apply the rules in a style sheet to a Web page is to link to the style sheet.

Figure 8.3. Here's the external style sheet that we created on page 128 (called base.css). Don't worry about the properties and values just yet. (It just means create a solid red border around all the img elements.)


To link an external style sheet:

1.
In the head section of each (X)HTML page in which you wish to use the style sheet, type <link rel="stylesheet" type="text/css", where text/css indicates that the style sheet is written in CSS.

2.
Type href="url.css", where url.css is the name of your CSS style sheet (see step 3 on page 128).

3.
Type the final />.

Figure 8.4. The link tag goes inside the head section of your (X)HTML document.


Tips

  • When you make a change to an external style sheet, all the pages that reference it are automatically updated as well.

  • URLs in an external style sheet are relative to the location of the style sheet file on the server, not to the (X)HTML page's location.

    Figure 8.5. The style rule (a red, solid border) is applied to each img element.

  • Styles that are imported are overridden by styles within an (X)HTML document. The relative influence of styles applied in different ways is summarized on page 135.

  • You can link to several style sheets at a time. The later ones take precedence over the earlier ones.

  • You can offer alternate versions of linked style sheets and let your visitors choose among them (see page 130).

    Figure 8.6. Other documents can link to the very same external style sheet.

  • You can limit style sheets to a particular kind of output by setting the media attribute. For more details, see Using Media-Specific Style Sheets on page 133.



Previous Page
Next Page


JavaScript EditorBest javascript editor debugger     Ajax website 
→