HTML XHTML The Complete Reference
home » reference » appendix b » style inclusion methods

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">
<!--
p {font-size: 14pt; font-face: Times; color: blue;
background-color: yellow;}
em {font-size: 16pt; color: green;}
-->
</style>
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.

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" />
<link rel="alternate stylesheet" href="bigred.css" title="Red Sheet" />
Chapter 11 has examples and more information on using alternative style sheets.

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" />
<link rel="stylesheet" href="printstyle.css" media="print" type="text/css" />
CSS2 does define a rich set of media values as shown in Table B-1, but practice shows few are supported.

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
print 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.

(X)HTML Elements
CSS Properties
Back: Appendix B Index Next: Measurements
< Home | About | Chapters | Examples | Errata | Reference | Site Map >