Style Inclusion Methods
This section defines the basic methods to associate CSS-based style information with HTML or XHTML documents.
Embedded Styles
Document-wide styles can be embedded in a document's head element using the <style> tag.
Note that styles should be commented out to avoid interpretation by nonstyle-aware browsers. However, be aware that comment masking is frowned upon in XHTML and linked styles should be used or a CDATA section employed.
Example
<style type="text/css">You can apply styles directly to elements in a document using the core attribute style. As the closest style inclusion method to a tag, inline styles will take precedence over document wide or linked styles.
<!--
p {font-size: 14pt; font-face: Times; color: blue;
background-color: yellow;}
em {font-size: 16pt; color: green;}
-->
</style>
Example
<h1 style="font-size: 48pt; font-family: Arial; color: green;">CSS1 Test</h1>
Linked Styles
Styles can be contained in an external style sheet linked to a document or a set of documents (see Chapter 10), as shown in the following example. Linked information should be placed inside the <head> tag.
Example
<link rel="stylesheet" type="text/css" href="newstyle.css" />The rel attribute is generally set to the value stylesheet but may also have a value of alternate stylesheet with an associated title value to provide different looks for the same page.
Examples
<link rel="stylesheet" href="standard.css" title="standard" />Chapter 11 has examples and more information on using alternative style sheets.
<link rel="alternate stylesheet" href="bigred.css" title="Red Sheet" />
The media attribute may also be used to define the media to which a style sheet is applied. The keyword values screen or print are commonly used. The default value of all is applied when media is not specified.
Examples
<link rel="stylesheet" href="screenstyle.css" media="screen" type="text/css" />CSS2 does define a rich set of media values as shown in Table B-1, but practice shows few are supported.
<link rel="stylesheet" href="printstyle.css" media="print" type="text/css" />
| Media Type | Definition |
| all | For use with all devices |
| aural | For use with speech synthesizers |
| Braille | For use with tactile Braille devices |
| embossed | For use with Braille printers |
| handheld | For use with handheld devices |
| For use with printed material and documents viewed onscreen in print preview mode | |
| projection | For use with projected media (direct computer-to-projector presentations), or printing transparencies for projection |
| screen | For use with color computer screens |
| tty | For use with low-resolution teletypes, terminals, or other devices with limited display capabilities |
| tv | For use with television-type devices |
| table b-1 | |
Imported Styles
Styles can be imported from an external file and expanded in place, similar to a macro. Importing can be used to include multiple style sheets. An imported style is defined within a <style> tag using @import followed optionally by a type attribute and a URL for the style sheet.
Example
<style type="text/css">
@import url(newstyle.css)
</style>
The @import directive allows style sheets to be grouped and joined together. While this was the design of the feature, unfortunately most CSS developers use it to perform a weak form of browser selection because many older CSS implementations do not support the directive. The basic idea of the trick is to put sophisticated style rules in an @import style sheet and leave basic styles in the style block. This trick should be avoided, particularly given that some browsers, notably versions of Internet Explorer, will cause a disturbing flash effect when loading imported styles.
