Image of Brain Staff Handbook: Skills : Cascading Style Sheets

The term "Cascading Style Sheets" is used to refer to one of several methods of applying formatting information to elements within a document. These methods are part of a movement to separate presentation (underlined text, font faces) from structure-based markup (<p>, <h1>). When writing HTML 3.2 compliant pages, we could use tags like <u> and <font> to add presentation to text. The new model, used in part in the "HTML 4.0 Transitional" document type, is to apply most formatting using style information, and in fact more and more of the presentation-oriented tags are being deprecated (i.e. they should no longer be used when writing pages that comply with the new standards).

There are three methods of applying styles to a document or section of a document. These are:

  1. <link> tags, used to apply an external style sheet.
  2. <style> tags, used in the header (<head>) of a document.
  3. The style attribute, used with most block-level and in-line elements.

External Style Sheets

An external style sheet contains style information that should be applied to the entire document. Typically, many files on the same site are linked to an external style sheet to create a sense of consistency.

The following is the code used to link to an external style sheet:

Example 1
<link rel="stylesheet" href="example.css" type="text/css">

In order for a link to an external style sheet to be effective, it must be inserted in the <head> of a document.

The external style sheet is simply a list of style commands and the tags to which the style commands should be applied. The syntax of these commands is illustrated in the table below:

Example 2
Style Command What It Should Do
li { margin:10px; } Add a margin of 10 pixels around each list element.
ol li { font-size:36px; } Change to font size of every list element within an ordered list to 36 pixels.
li.blue { color:blue; } Make each list element that has its class attribute set to "blue" appear in blue.
.red { color:red; } Make any element that has its class attribute set to "red" appear in red.
h1, h2, h3, h4, h5, h6 { font-family:"Times New Roman" times serif; } Display each heading tag (1-6) in the font "Times New Roman". If the font isn't available, display it in "times" font, and then use the generic "serif" font. Note than unlike <font> tags, font names are enclosed in quotes if they have a space in their names, and are separated from each other using spaces.

The styles defined above are demonstrated in the sample page at the end of this document.

<style> tags

Style information for an entire document can also be defined within <style> tags in its header (<head>). The same syntax for style commands defined in an external style sheet is used inside <style> tags. For example usage, take a look at the code below:

Example 3 
<style type="text/css">
<!--
body { font-family: Charcoal Arial sans-serif }
-->
</style>

Note that we use an HTML comment tag to enclose the style commands so that browsers that do not support style sheets will ignore the commands entirely (rather than displaying them as text). All of the commands used above are demonstrated in the sample page at the end of this document.

The style attribute

Both of the approaches mentioned above are used to apply style information to an entire document. The final way to apply styles is to use the style attribute of an individual tag to control its appearance on a one-time basis. The syntax for the commands is almost identical, except that we don't need to say what tags the commands will apply to. For example usage, take a look at the code below:

Example 4
Sample Code 
Ready, set, <span style="color:green">GO</span>!
How It Looks Ready, set, GO!

Cascading

The overall appearance of a document that uses all three methods is determined (in order) by:

  1. Styles defined in an external style sheet
  2. Styles defined in style tags in the head of a document
  3. Style commands issued in the style attributes of individual tags

In addition, multiple style commands may apply to a single tag based on its class, the tags that enclose it, etc.. See the example below for some pretty complex combinations of style commands.

Sample Page

Further Reading

For a more thorough reference on style sheets, consult one of the following: