O'Reilly logo

CSS Pocket Reference, 4th Edition by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Adding Styles to HTML and XHTML

Styles can be applied to documents in three distinct ways, as discussed in the following sections.

Inline Styles

In HTML and XHTML, style information can be specified for an individual element via the style attribute. The value of a style attribute is a declaration block (see the section Rule Structure) without the curly braces:

<p style="color: red; background: yellow;">Look out!
This text is alarmingly presented!</p>

Note that, as of this writing, a full style sheet cannot be placed into a style attribute. Only the content of a single declaration block can be used as a style attribute value. For example, it is not possible to place hover styles (using :hover) in a style attribute, nor can one use @import in this context.

Although typical XML document languages (e.g., XHTML 1.0, XHTML 1.1, and SVG) support the style attribute, it is unlikely that all XML languages will support a similar capability. Because of this and because it encourages poor authoring practices, authors are generally discouraged from using the style attribute.

Embedded Style Sheets

A style sheet can be embedded at the top of an HTML or XHTML document using the style element, which must appear within the head element:

<html><head><title>Stylin'!</title>
<style type="text/css">
h1 {color: purple;}
p {font-size: smaller; color: gray;}
</style>
</head>
   ...
</html>

XML languages may or may not provide an equivalent capability; always check the language DTD to be certain.

External Style Sheets

Styles can be listed in a separate file. The primary advantage to a separate file is that by collecting commonly used styles in a single file, all pages using that style sheet can be updated by editing a single style sheet. Another key advantage is that external style sheets are cached, which can help reduce bandwidth usage. An external style sheet can be referenced in one of the following three ways:

@import directive

One or more @import directives can be placed at the beginning of any style sheet. For HTML and XHTML documents, this would be done within an embedded style sheet:

<head><title>My Document</title>
<style type="text/css">
@import url(site.css);
@import url(navbar.css);
@import url(footer.css);
body {background: yellow;}
</style>
</head>

Note that @import directives can appear at the top (and, according to the specification, only at the top) of any style sheet. Thus, one style sheet could import another, which in turn would import a third.

link element

In HTML and XHTML documents, the link element can be used to associate a style sheet with a document. Multiple link elements are permitted. The media attribute can be used to restrict a style sheet to one or more media:

<head>
<title>A Document</title>
<link rel="stylesheet" type="text/css" href="basic.css"
  media="all">
<link rel="stylesheet" type="text/css" href="web.css"
  media="screen">
<link rel="stylesheet" type="text/css" href="paper.css"
  media="print">
</head>

It is also possible to link to alternate style sheets. If alternate style sheets are supplied, it is up to the user agent (or the author) to provide a means for the user to select one of the alternates:

<head>
<title>A Document</title>
<link rel="stylesheet" type="text/css" href="basic.css">
<link rel="alternate stylesheet" title="Classic" 
   type="text/css" href="oldschool.css">
<link rel="alternate stylesheet" title="Futuristic" 
   type="text/css" href="3000ad.css">
</head>

As of this writing, most or all known user agents load all linked style sheets, including the alternate style sheets, regardless of whether the user ever implements them. This can have implications for bandwidth use and server load.

xml-stylesheet processing instruction

In XML documents (such as XHTML documents sent with a mime-type of “text/xml,” “application/xml,” or “application/xhtml+xml”), an xml-stylesheet processing instruction can be used to associate a style sheet with a document. Any xml-stylesheet processing instructions must be placed in the prolog of an XML document. Multiple xml-stylesheet processing instructions are permitted. The media pseudo-attribute can be used to restrict a style sheet to one or more forms of media:

<?xml-stylesheet type="text/css" href="basic.css"
  media="all"?>
<?xml-stylesheet type="text/css" href="web.css"
  media="screen"?>
<?xml-stylesheet type="text/css" href="paper.css"
  media="print"?>

It is also possible to link to alternate style sheets with the xml-stylesheet processing instruction:

<?xml-stylesheet type="text/css" href="basic.css"?>
<?xml-stylesheet alternate="yes" title="Classic"
  type="text/css" href="oldschool.css"?>
<?xml-stylesheet alternate="yes" title="Futuristic"
  type="text/css" href="3000ad.css"?>

HTTP Link headers

The last (and least common by far) way of associating an external style sheet with your pages is to use an HTTP Link header. In CSS terms, this is a way of replicating the effects of a link element using HTTP headers.

Adding a line such as this to the .htaccess file at the root level of your server will make this happen for all pages on the site:

Header add Link 
   "</style.css>;rel=stylesheet;type=text/css;media=all"

As an alternative to using .htaccess, which has been known to cause performance hits, you can edit your httpd.conf file to do the same thing:

<Directory /usr/local/username/httpdocs>
Header add Link 
   "</ style.css>;rel=stylesheet;type=text/css;media=all"
</Directory>

...where /usr/local/username/httpdocs is replaced with the UNIX pathname of your website’s actual home directory.

As of this writing, HTTP headers were not supported by all user agents, most notably Internet Explorer and Safari. Thus, this technique is usually limited to production environments based on other user agents and the occasional Easter egg for Firefox and Opera users.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required