Style sheets - overview

Style Sheets

NOTE : Presented here is a brief overview of the Style Sheet specification. For a more complete reference, visit the Style Sheet resource page at the W3C (at http://www.w3.org/pub/WWW/Style Sheets/). Also, Microsoft have produced an excellent "Users guide to stylesheets" document available from the Microsoft Web Development Workshop web site at http://www.microsoft.com/workshop/

Style Sheets allow the HTML author to separate presentation definitions from content in HTML documents. HTML was designed primarily as a content based mark up language and the introduction of various text level formatting elements and attributes only served to confuse the issue. Microsoft led the way by implementing style sheet support in Internet Explorer 3.0, support which was greatly improved in Internet Explorer 4.0. Netscape also implemented Style Sheet support with the release of Communicator and Navigator 4.0.

Anyone who does a lot of work using a word processor should be familiar with the concept of style sheets. Basically, styles are defined and then applied to blocks of text (or even single characters) by referring to the definition in the available style range.

The simplest form of style sheet could be:

P {color : #800000}

This would cause any text that is classified as a paragraph (i.e. uses a <P> element) to be rendered using a dark red colour. For a breakdown of the possible properties for use in style sheets, see the Properties and Values topic.

Applying a style sheet to a document
Style definitions can be applied to documents and their elements in on of four ways.

Using the <LINK> attribute to point to an external style sheet. (See <LINK> for details)
Using the <STYLE> element within the <HEAD> of a document. (See <STYLE> for details)
Using the @import mechanism (similar to the <LINK> method above, this allows the importing of external style sheets.)
Using the STYLE attribute in an element. This is allowed for any elements allowed within the <BODY> of a HTML document.

The fourth option above, while allowed, is not recommended as it mixes style definitions with content, which goes against the style sheet concept. An example would be :

<H1 STYLE="color : #FF0000">Heading 1</H1>

Note : If multiple style sheet declaration methods are used (i.e. a stylesheet is <LINK>ed in and a <STYLE> block is also used, then multiple element style settings will be used in the order they are read. For example, if both the <LINK>ed style sheet and the <STYLE> block have settings for the <Hx> element, then that in the <STYLE> block will take precedence. Settings using different properties on the same element will all be applied together for the element. For example, if the <LINK>ed style sheet contains A { color:red } and the <STYLE> block contains A:link { color:blue } then all <A> elements will be red, with links (i.e. <A HREF="...">) being blue. Likewise, style settings set in the STYLE attribute of an element will override any settings in a <STYLE> block, or a linked style sheet.

There are various methods for denoting the style declaration and all use separate methods within the HTML to determine the style to be used :

CLASS as selector
The CLASS attribute was first proposed in the now expired HTML 3 specification. All elements that can reside within the <BODY> of a HTML document can be addressed using a CLASS attribute.

Within the style sheet definition, the style class is set thus:

P.redtext { color : #FF0000}

So, any paragraphs denoted by a <P CLASS="redtext">text</P> HTML sequence would be rendered using a red coloured text. If the style class is defined with no major element, i.e. :

.redtext { color : #FF0000}

then all elements that use CLASS="redtext" would be coloured red.

ID as selector
Like the CLASS attribute above, the ID attribute was first introduced in the HTML 3 specification. The difference between it and the CLASS attribute is that the ID attribute must be guaranteed a unique identifier within the document. It must also be addressed within the style sheet preceded with a # character. I.e.:

#redtext { color : #FF0000}

<P ID="redtext">some text</P> would be coloured red.

Context sensitive selectors
Suppose that you wanted to make all text that was defined as strong within a paragraph be rendered using a lime green colour. You could use :

STRONG { color : #00FF00}

in the style sheet definition. However, this would cause all text that was enclosed in <STRONG> ... </STRONG> elements to be rendered lime green. This is where context sensitive selectors are useful. If you use :

P STRONG { color : #00FF00}

in the style sheet definition, then only text enclosed in <STRONG> ... </STRONG> elements enclosed in <P> ... </P> elements would be lime green. For instance :

<P><STRONG>This will be lime green</STRONG></P> This <STRONG>other bit</STRONG> won’t be.

As with the two methods of style definition above, this can be used for all elements normally contained within the body of a document.

Hopefully, this has provided enough starter information about style sheets. Users interested in employing style sheet presentation to their documents should obtain the Cascading Style Sheet specification from the W3C Style Sheet Resource page for more detailed information.