Library of Congress Guidelines for HTML 4.01
[ HOME ] [ Introduction ] [ HTML Overview ] [ HTML 4.01 Tags ] [ Style Sheets ] [ Links ]

Cascading Style Sheets (CSS)

Style sheets allow Webmasters to control the presentation or layout (e.g. fonts, colors, margins, fontfaces, and other aspects of style) of a Web document without compromising its structure. CSS is a simple style sheet language allowing Web page designers to attach style to HTML documents. It uses common desktop publishing terminology which should make it easy for professionals as well as untrained designers to make use of its features. With HTML 4.01, the tags and attributes were made available to associate style information with an HTML-encoded document -- finally allowing the separation of layout from logical structure. This is not a new model -- SGML has always used style sheets for layout and reserved the SGML tagging for defining the structure of the document.

CSS Specifications

Cascading Style Sheets, level 1 (CSS1) became a W3C Recommendation in December 1996. It describes the CSS language as well as a simple visual formatting model. CSS2, which became a W3C Recommendation in May 1998, builds on CSS1 and adds support for media-specific style sheets (e.g., printers and aural devices), downloadable fonts, element positioning and tables. Unfortunately, CSS2 is not broadly supported by the major browsers, so the Library of Congress will begin by using CSS1 as its standard for style sheets on the Web site (although CSS1 is not fully supported by browsers at the version 4.0 level and below). CSS3 is currently under development. You can follow its progress as new drafts are published.

Style Sheets, Rules, Selectors, Declarations ... Oh My!

A style sheet is a set of one or more "rules" that apply to an HTML document. A "rule" is a statement about one stylistic aspect of one or more HTML elements (tags). Rules can be separated into two distinct components: selectors and declarations.

Selectors

HTML tags or "elements" are also known as selectors in CSS. The selector becomes the link between the style and its application in the document. All HTML tags are potential selectors and when a style "rule" is created for an HTML tag, it will effect all occurrences of that tag in the document..

Two varieties of selectors may be used:

  1. Type (most commonly used)
  2. Attribute (Class or ID)

Declarations

A CSS declaration consists of two parts:

  1. Property (e.g., 'color')
  2. Value (e.g., 'blue').

CSS1 supports more than 50 different properties which can be applied to selectors (HTML tags) to determine their presentation in an HTML document.

Properties include:

A rule generically looks like this: 
selector { property: value; }
          ================= 
             declaration
For example, to cause the first line of a paragraph to indent: 
p { text-indent: 3em; }

P is the selector, and the rule has just one declaration - that the text-indent property of the paragraph will be 3em. If this style was in your document, it would indent all paragraphs 3ems.

Grouping Rules and Selectors

CSS was designed to be a concise style language, so there are many ways to keep the size of your style sheets down. Also, short style sheets will load more quickly than lengthy ones. One way to keep the style sheet "lean and mean" is to use a single statement to apply several stylistic options to a single element (see example below).

Multiple statements (declarations) for a single element (tag): 
H1 { color: red; }
H1 { font-size: 1.75em; }
H1 { font-family: arial, helvetica, sans-serif; }
H1 { background: white; }
Can be reduced to a single statement with multiple declarations: 
H1 { color: red;  font-size: 1.75em; 
    font-family: arial, helvetica, sans-serif; background: white; }

It is also possible to apply the same style declaration(s) to several elements at the same time (see example below).

Multiple identical style statements for multiple elements: 
H1 { color: red;  font-family: arial, helvetica, sans-serif; 
        background: white; }
H2 { color: red;  font-family: arial, helvetica, sans-serif; 
        background: white; }
H3 { color: red;  font-family: arial, helvetica, sans-serif; 
        background: white; }
H4 { color: red;  font-family: arial, helvetica, sans-serif; 
        background: white; }
Can be reduced to a single statement: 
H1, H2, H3, H4 { color: red;  font-family: arial, helvetica, sans-serif; 
        background: white; }

Linking Styles to Documents

There are four ways to link styles to elements in HTML documents:

The STYLE= Attribute - Inline Styles

Wherever you previously used a formatting attribute (e.g., ALIGN=, TYPE=, BGCOLOR=, etc.) or a separate character formatting tag (e.g., <FONT>, <B>, <I>, etc.), you can now replace it with a "style property." This is done by using STYLE= attribute within individual container tags. However, for the value of the attribute, use only the "declaration" portion of the style syntax (separating each style declaration with a semicolon ; ). See example below:

STYLE="text-align: justify; font-family: arial, 
  helvetica, sans-serif;"

The example below uses two properties: background-color and font-family within the <SPAN></SPAN> container.

This coding: 
<SPAN STYLE="background-color: #ffcccc; 
font-family: arial, helvetica, sans-serif;">
This paragraph is in bold and italics</SPAN>
Produces this effect:

This text is on a pink background and in a different font.

The <SPAN> tag is new in HTML 4.01 and is specifically for adding inline style information to a "span" of text. Use the <SPAN> tag for small areas of text, within a paragraph, that you wish to apply style information to.

When you want to apply inline style information to an entire paragraph, it is better to use the STYLE= attribute with the <P></P> container tag. In addition, the STYLE= attribute can be used with most other HTML tags to apply inline style information. The only tags that cannot use the STYLE= attribute are: BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, and TITLE. See more inline style examples below:

    <H1 style="color: red">Cascading Style Sheets</H1>
    <P style="text-indent: 5em">Styles may be used to:
    <UL style="list-style: square">
      <LI>change the appearance of text
      <LI>set margins and justification
      <LI>indent the first line of a paragraph
    </UL></P>

Finally, for applying inline style information to large amounts of text (containing other markup) it is best to use the <DIV></DIV> container with the STYLE= attribute. See the example coding below:

<DIV STYLE="background: #ffffcc; 
    font-family: arial, helvetica, sans-serif;">

  <A HREF="http://www.loc.gov/poetry/">Poetry 
    in America: A Library of Congress Bicentennial Celebration</A>
<BR> 
    Poet Laureate Robert Pinsky and other renowned poets and 
individuals will read their favorite poems and participate in a 
symposium, <CITE>"Poetry and the American People,"</CITE> 
at the Library on April 3 and 4. The event will be cybercast live.

  </DIV>

Inline styles work well when applying a style, one time, to an individual tag. However, if you want to use the same style many times in the same document (or in a series of documents) it is much better to create a single style sheet, then apply the styles as needed throughout the document.

The <STYLE> Tag - Internal Style Sheets

The simplest way to apply a style sheet (with multiple statements) to a single HTML document is by enclosing it in the <STYLE> tag. The <STYLE> tag is an HTML container (both the opening and closing tags are required). It is also an "invisible" HTML element -- its contents do not display in the Web browser window. The <STYLE> tag goes in the <HEAD> section of an HTML document (see example below).

<HTML>
<HEAD>
  <TITLE>Test page for CSS</TITLE>
  <STYLE TYPE="text/css">
H1, H2, H3, H4, H5, H6 { color: red; background: transparent; }
  </STYLE>
</HEAD>
<BODY>
    <H1>Cascading Style Sheets</H1>
    <P>Styles may be used to:
    <UL>
      <LI>change the appearance of text
      <LI>set margins and jusitification
      <LI>indent the first line of a paragraph
    </UL>
</BODY>
</HTML>

Note - Some early versions of browsers (such as Netscape 1 and Internet Explorer 2) do not recognize the <STYLE></STYLE> container tag. As a result, they not only don't apply the styles to the document, but also will display the actual style statements in the browser window (which is not desirable). Therefore, it is a good idea to enclose the "style sheet" statements in an HTML comment tag in order to prevent this behavior (see example below).

<HTML>
<HEAD>
  <TITLE>Test page for CSS</TITLE>
  <STYLE TYPE="text/css">
  <!--
    H1, H2, H3, H4, H5, H6 { color: red; background: transparent; }
  -->
  </STYLE>
</HEAD>

In both examples, all of the header container tags (<H1></H1>, etc.) have been set to display in red, with a transparent background (always set the background to "transparent" when you want the main background color to bleed through). This means that all items tagged as <H1> in the document will display in red. No further coding is needed.

Linked Style Sheets

While it is very efficient to include style sheet information inside the <HEAD> section of the HTML file, if you find that you want to use the same styles for multiple documents, it becomes much more efficient to create the style sheet in a separate file, and link to it using the <LINK> tag (it is also a good idea to include the special <META> tag indicating the CSS level, see example below). Style sheets can be stored in the same directory as the Web files, or can be linked to from any location on the Web site (local or remote) as long as you know the URL. Style sheets are saved using the .CSS extension. See example <LINK> tag below:

<HTML>
<HEAD>
  <TITLE>Test page for CSS</TITLE>
<META http-equiv="Content-Style-Type" content="text/css">
<LINK REL="StyleSheet" HREF="stylesheet.css" TYPE="text/css" 
MEDIA="screen">
 </HEAD>

Linked (or external) style sheets should not contain any HTML tags. The style sheet should consist only of style rule statements. A file consisting solely of

P { margin: 2em }

could be used as an external style sheet.

Note: Netscape 4.0 ignores any link tags that use MEDIA= with any value except SCREEN. However, the MEDIA= attribute is clearly going to be an important qualifier for providing different style sheets for different audiences/purposes. For instance, one could express the fonts in point sizes for printing and in percentages or EMs for screen viewing. This will work for Microsoft Explorer.

Contextual Selectors

What happens when you want an HTML selector (tag) to use a particular style, but only when it occurs in the "context" or another selector (tag). A contextual selector simply places a tag within the context of another in the style definition. For instance, if you wanted the text of list items (the <LI> tag) to display in blue for unordered lists (within the <UL> tag), but you wanted the list items to display in green when used in ordered lists (within the <OL> tag). This is possible when using contextual selectors:

OL LI { color: green; }
UL LI { color: blue; }

It is also possible to take this a step further. For instance, if you wanted the bullets for the first level of list items in unordered lists to be a "square," the second level a "circle," and the third level a "disc." Here is how the contextual selectors would look:

UL { list-style-type: square; }
UL UL { list-style-type: circle; }
UL UL UL { list-style-type: disc; }

Please note that there is no punctuation separating each selector.

HTML Hierarchy and Inheritance

The HTML document structure employs a hierarchy using the parent-child model. For the purposes of CSS the hierarchy serves to determine what stylistic properties the "child element" will inherit from the "parent element." A fairly typical inheritance model is shown below.

           HTML
         /      \
      HEAD      BODY
      /       /  |   \
   TITLE    H1   P    OL
                 |   / | \
            STRONG  LI LI LI

Following this model, any properties set for the <BODY> element would inherit down to all children (in the above model, to H1, STRONG, P, UL, and LI). If text COLOR were set to "red" and FONT-FACE were set to "Arial," those settings would affect all elements hierarchically under <BODY>. Likewise, all styles set for the <P> element would inherit to all elements hierarchically within the "paragraph" (with the exception of the <A> "anchor" element which does not inherit, but instead has its own special style settings). You may have actually been aware of this behavior within your document "before styles," but you will need to be more actively aware of inheritance when trying to debug your styles.

Overriding Parent-Child Inheritance

It is possible to override the natural hierarchical inheritance of HTML by applying specific styles to "child" elements that differ from what is inherited from the "parent." For instance, if you set the text COLOR to "black" for the <BODY> element, naturally all text would be black within the body of the document. However, if you wanted <H1> to be "blue" and <H2> to be "green" and "italics" you could write separate style statements for H1 and H2 which would override the natural inheritance from <BODY>. If I inherited "red hair" from my mother, I could override it by dying my hair "black," but all of my siblings might still have red hair, or they might choose to dye their hair another color.

Why Cascading?

The "cascading" of CSS is what makes this type of style sheets so powerful. Much like "inheritance" multiple style sheets may be applied to a single document. The "cascade" determines which one take precedence. Three types of style sheets might be available for a single document:

In the current "cascade model," the Browser Style Sheet is overridden by the User Style Sheet which is, in turn, overridden by the Designer's Style Sheet. However, the important concept to remember is that elements from all three levels are combined to determine the final style sheet. Settings that are not specified by User or Designer may still be coming from the default Browser style sheet.

In this case the Browser style sheet sets H1 to 150% size, bold and normal: 
h1 { font-size: 150%; font-weight: bold; 
     font-style: normal; font-face: "Times New Roman", serif; }
And the User style sheet sets H1 to 125%: 
h1 { font-size: 125%;  }
Finally, the Designer style sheet sets H1 to 135% and italics: 
h1 { font-size: 135%; font-style: italic; }
The only property that carries over from the Browser style sheet is the "bold" font-weight value. The size was overridden, using the cascade order, first by the User and then by the Designer. Finally, the font-style of Italics was added, also by the designer. The final combined style would be: 
h1 { font-size: 135%; font-style: italic; font-weight: bold; }

The cascade also applies to multiple styles sheets applied to the same document. For instance, a document may have a Linked Style Sheet, an Embedded Style Sheet, as well as a few Inline Styles. If there were conflicting styles:

The CLASS Attribute - Selector Classes

Now you know how to make all paragraphs green or all level 1 headings bold. But suppose you only want some paragraphs to be green, or some level 1 headings to be bold? This is done by creating and using "classes" of styles and using the CLASS= attribute to apply that style to an HTML element. All elements in the BODY of the HTML document can use the CLASS= attribute. Classes establish grouping schemes for identifying HTML tags within a Style Sheet. Different HTML tag types can share the same Class Name value - this allows an entire class to be identified by a common label.

When applying a class to a specific element, a period (".") is used to separate the HTML element name from the class name (e.g., body.blackback in the example below). To create a class which could apply to any appropriate tag, use only the class name with a leading period as a selector (e.g., .center in the example below) .

  

body    {font-family:   arial, helvetica, sans-serif;
        color:          #000000;
        background:     #ffffcc;
        }
body.blackback
        {font-family:   arial, helvetica, sans-serif;
        color:          #ffcc33;
        background:     #000000;
        }
.center
        {text-align:    center;}
In this example, documents will be rendered with black text on an off-white background unless CLASS=blackback is specified inside the <BODY> tag (e.g. <BODY CLASS=blackback>). The .center class can be used with most tags to center align (e.g. <P CLASS=center>...</P> or <DIV CLASS=center>...</DIV>).

Pseudo Classes

CSS1 defines five pseudo-classes that you can use to define styles for specific types of elements in your pages.

A:link - unvisited links
A:active -  active links
A:visited - visited links
P:first-line - first line of a paragraph
P:first-letter - first letter of a paragraph

A pseudo-class can be recognized by the colon separating the selector (HTML tag) and the "special" quality of that selector (for instance, A:link is used to define a style for the anchor tag for "unvisited links"). So, to make unvisited links red, visited links blue, and active links green, you would write the following styles:

A:link { color: red; }
A:visited { color: blue; }
A:active { color: green; }

A commonly asked question is "How can I turn link underlining off?" Before you do, be sure that there are other cues to let the reader know that there are clickable links there, e.g., they are in an area that is clearly a navigation menu. To make changes, selectively to the anchor tag, a special class called the pseudo-class is used. A style sheet that turns off the text underlining for the anchor tag is displayed in the box below:

This style rule turns off link underlining for ALL anchor tags: 
A { text-decoration: none; }
These style rules set up classes for turning off link underlining selectively: 
A.nound { text-decoration: none; }
The HTML encoding using the special class would look like this: 
<A CLASS="nound" HREF="index.html">
This is a clickable link</A>.

Here is a sample of how that link would look -- This is a clickable link. If you wanted to set special classes for individual pseudo-classes (say you wanted the "unvisited link" to be blue with no underlining) you would use the following syntax:

A.myclass:visited {color: red}

CSS1 Properties and Values

The following list shows all of the CSS1 properties and their values. These are all linked to more descriptive information from the CSS Reference document on the Web Design Group site. Most styles should be used with care and tested heavily on multiple browsers for cross-compatibility. Please see addition resources on CSS by visiting the Links page.

Font Properties

Color and Background Properties

Text Properties

Box Properties

Classification Properties

Units

[ HOME ] [ Introduction ] [ HTML Overview ] [ HTML 4.01 Tags ] [ Style Sheets ] [ Links ]
[ Library of Congress Standards ] [ Library of Congress Home Page ]
Library of Congress
Library of Congress Help Desk (January 25, 2001)

Maintained by the Network Development and MARC Standards Office
Links to detailed documentation on Web Design Group site are provided.