Cascading Style Sheets (CSS)

Purpose

Cascading styles sheet provide a mechanism for separating data in web pages from its presentation, similar to the separtion provided by the Model-View-Controller design paradigm. This allows web designers to control the presentation of numerous data items with minimal effort and to present the same data in several different visual forms.

Cascading style sheets consist of a sequence of CSS rules. Depending on the needs of web designers, these rules can either be imbedded directly in web pages or they can be gathered together into separate files that can be linked into several web pages.

CSS Rules

A CSS rule has the following form:

selector {
sequence of declarations
}

The selector part identifies where the rule applies. The simplest form of a selector is just the name of an HTML tag.

Each declaration has the following form:

keyword: value;

Each keyword-value pair specifies a style attribute to be applied at places specified by the selector. They can specify a variety of attributes such as colors, fonts, sizes, and spacing.

Learning CSS

Learning all of the rules for CSS selectors and all of the CSS style attributes and their legal values is a waste of brain cells. It is better to see some examples to get an idea how they work, then use a reference book to look up details when you have a specific styling problem. A good reference book is

Eric A. Meyer, "Cascading Style Sheets: The Definitive Guide", O'Reilly, 2004.

Here are some CSS Examples.

Online References

  1. CSS 2.1 Specification (W3C)
  2. CSS Tutorial (www.w3schools.com)