Bookmark and Share

Using Style Sheets

Review the W3C CSS standard recommendation.

This article is an overview of Cascading Style Sheets (CSS), providing some explanations of how it works and showing how you can use style sheets more effectively.

It's not a reference or compatibility guide (although links to some good references and compatibility notes are provided throughout) and it's not a tutorial. But if you've used CSS to some extent and want to learn more, you should find the information here useful.

What Style Sheets Are Not

Style sheets are often touted as a means to separate style from content. That's not entirely true depending on your definitions of "style" and "content."

HTML (hypertext markup language) defines the structure of a document, the organization of text and images and other data into individual elements (via tags). CSS does not affect that.

What CSS does is to define how these elements are displayed in terms of typography, color, spacing, etc. It can also affect the visual layout to some extent. But it doesn't alter the structure of a document. In basic terms, styles are applied to elements but elements - the content structure - are defined by the markup language.

The Advantage of Style Sheets

All tags in HTML have a default style. That is, the browser has a certain way of rendering each tag type based on some basic rules. This can be overridden via an inline style using the STYLE attribute on the tag.

<p style="float:right;margin-left:1em;width:50%">Some text.</p>

However, this method only affects that particular instance of a tag. Style sheets provide ways to apply styles to all instances of a given tag, or to specific subsets.

They allow you to group style settings together rather than embedding them throughout the HTML code. That's where the concept of separation comes in. This also allows styles to be shared by multiple documents.

Including Style Sheets

A style sheet is simply a set of style rules. You can define a style sheet within an HTML page using a STYLE tag in the head of the document (between the <HEAD> and </HEAD> tags).

<style type="text/css">

...style rules...

</style>

Or, like JavaScript, style sheets can be defined in a separate file and referenced by a URL. An external style sheet is included in a page using the LINK tag, again in the head of the document.

<link href="url" rel="stylesheet" type="text/css">

This is useful for sharing a common style sheet among several pages in a site.

You can combine any number of STYLE and LINK tags within a single page, but as we'll see when we discuss conflicting styles, the order in which they are placed can be important.

Defining Style Rules

A CSS rule set consists of one or more statements in the following forms:

selector { property : value }

selector {
   property : value;
   property : value;
   property : value;
   ...
}

The selector defines what elements the rule will be applied to. Following it is a declaration block, denoted by the curly braces ('{', '}'). Within this block are zero or more declarations. Multiple declarations are separated by a semicolon (';').

Each declaration consists of a property and a value, separated by a colon (':'). Properties are identifiers, such as font-size, background-color, etc. The values permitted depend on the individual property.

Whitespace may be used around any of these tokens, so you can format them for easy reading. You can also insert comments anywhere whitespace is permitted.

selector {  /* a comment for this rule */
   property : value;
   property : value;
   property : value;
}

Comments are denoted by '/*' and '*/' characters, as in JavaScript, C and other programming languages. (The '//' form of comments is not recognized in CSS however.)

Selectors

In their simplest form, selectors consist of a tag name. Multiple tag names can be specified by separating them with a comma (','). So the following rules:

h1 { background-color: #ffff00 }
h2 { background-color: #ffff00 }
h3 { background-color: #ffff00 }

could also be expressed as:

h1, h2, h3 { background-color: #ffff00 }

This is known as grouping. Also note that a tag name can appear in any number of style rules.

h1, h2, h3 { background-color: #ffff00 }
h1 { color: red }

The styles of all rules that match a given element will be applied.

Tag names are case-insensitive in HTML, so H1 is equivalent to h1. But in the stricter syntax of XHTML (HTML that conforms to XML rules), tag names must be lowercase. So it's good practice to use lowercase tag names in your style sheets.

Pattern Matching

Selectors are not limited to just tag names however. In fact, rules are applied to elements using pattern matching between the selector and various aspects of an element. These can include its attributes and its relation to other elements in the document.

Internet Explorer currently does not support many of these selector patterns. It's recommended that you use a current version of Netscape or even Opera (which supports more than IE but still less than Netscape) to view the following demos.

The following table describes patterns related to tag names and document structure, with links to examples.

Selector Patterns
Pattern Description
E Type selector, matches an element with the tag name E.
E F Descendant selector, matches an F element if it occurs within an E element.
E > F Child selector, matches F if F is a child of E.
E + F Adjacent selector, matches F if E and F have the same parent and F immediately follows E.

It should be noted that the terms "parent," "child," "descendant" and "adjacent" refer the hierarchal structure of tags within a document. For example, in this fragment of HTML code,

<div>
  <h3>What Good is CSS?</h3>
  <p>CSS gives you <i>very precise control</i> over how your web pages
  look. Use it to your advantage!</p>
</div>

you find these relationships:

The universal selector, denoted by an asterisk ('*'), can be used in place of a tag name in all of the above. It matches any tag so,

h2 + * { color: red }

would make any element immediately following an H2 tag red.