Cascading Style Sheets

Cascading Style Sheets (CSS) are a formalism to describe how HTML and XML are to be formatted. Quite often, cascading style sheets are expressed as plural form (Google has nine times more hits for the plural form).

The idea behind the development of CSS is to separate the structure of a document from the presentation.

For example, the HTML element <H1> indicates that a block of text is a heading, and that it is more important than a block tagged with <H2>. HTML allows extra attributes within the opening tag to specify formatting such as colour and font size. However, every <H1> tag must hold this information if one wants a consistent graphical look to a page, and furthermore a person reading the page with a web browser loses control over the display of the text.

When using CSS, the <H1> tag should give no information about how the block of text is to be displayed; instead it only marks document structure. Separate style information then specifies how the <H1> must be displayed: colour, font, text alignment, size, and also non-visual formatting such as the speed with which a page is read out loud in text readers.

The style information can be either attached as a separate document or embedded in the HTML document.

The advantages of using CSS (or another style language) are:

• presentation information for an entire website or collection of pages resides in one place, and can be updated quickly and easily
• different users can have different stylesheets: large print and text readers for example. Web browsers allow users to specify their own, local stylesheet to apply to a remote site.
• the HTML document itself is clearer to understand

There are several versions: CSS1 and CSS2, with CSS3 in development by the World Wide Web Consortium (W3C). Recent web browsers implement CSS1 fairly well. CSS2 however is only partially implemented in the most recent browsers.

Recommendations

Cascading Style Sheets, level 1 (CSS1), December 1996

• Font properties
• Color and background properties
• Text properties
  • word-spacing
  • alignment
• Box properties
  • Margin
  • Border
  • Padding
• Classification properties
  • 'display'
  • lists

Illustration of box properties

Margin Border Padding Content Padding Border Margin

If you define a box with the 'width attribute it is interpreted in the W3C box model as the width of the content. The width of padding and border are added for the overall width of the element.

In the Microsoft box model the width attribute is the total width, the width of the content, the padding and the border width.

This severely restricts the use of this model in a cross browser setting. If one wants to avoid this one can set padding and border width to zero. In many cases there are still enough design options left. Another possibility is to use a hack (see link section).

However Internet Explorer 6.0 can switch to standards-compliant mode if a proper !DOCTYPE declaration is used.

Cascading Style Sheets, level 2 (CSS2), May 1998

Positioning elements relatively and absolutely. ...

Reference

• www.w3.org definition of the standard

External Links

Conformance Testing:

• Link to CSS1-Tests to be added
• W3C CSS Validation Service
• CSS2 tests by Peter-Paul Koch
• Box model hack
• Another box model workaround
• CSS Panic Guide - a fast resource
• CSS-discus wiki - A wiki dedicated to CSS