Introduction to Cascading Style Sheets

Cascading Style Sheets may prove to be greatest innovation in Web page design since the invention of the <A> tag. Before style sheets, the web designer either had to accept whatever typographical style the target browser provided by default, or labouriously pepper the page with a plethora of <FONT> tags and a dog's breakfast of other highly specific and non-standard extensions.

With Cascading Style Sheets all that should change. Cascading Style Sheets give the designer the ability to gather all the formatting information in one place - either in the <HEAD> of the page or in a completely separate file - and there use a staight forward syntax to define style rules to be applied to the whole page or even across an entire Web Site. By using Cascading Style Sheets, the designer can define a specifc font, style, position and borders for an <H1> tag (or any other tag) and know that every element tagged as <H1> will have an individual and consistant "look and feel" right across the site.

My intention in writing this page is to provide an introduction to Cascading Style Sheets (CSS) and some information for the software craftsman on how to use them. It is written with the Web page novice in mind, although you should have some basic knowledge of HTML 4.0 (at least enough to be able to recognise a <P> tag and a <SPAN> tag and know what the difference is). It is not intended to be a complete reference to all CSS properties and their syntax - that information is freely available elsewhere.

What can I do with CSS?

Almost anything that affects the formatting, the style or appearance of HTML elements on your Web page can be controlled by CSS. Here's a list of some of the things that could be achieved with CSS:

You can redefine the appearance of an existing HTML tag. For example, on this page I have used CSS to redefine the <EM> tag to use a 12 point bold-italic cursive font. On your browser, the redefined <EM> tag will display text this way. When I use <EM> anywhere on this page, the browser knows to use my style sheet definition of that tag in preference to the default.
You can redefine the appearance of a single, identifiable HTML element on your page. HTML 4.0 provides the ID= attribute to allow you to identify and label a particular element in a web page. You can then use CSS to define a new style that applies only to that element. For example, you might want to add some extra indent to a <PRE> element so that it is better positioned within a list of bullet points. Rather like this:

<PRE ID="ExtraIndent">Some preformatted text here</PRE>

To do this, you first give this element the ID of "ExtraIndent", and then you use CSS to define an extra wide left margin for this element. When the browser displays this page, the extra margin is displayed just for this paragraph and for none other.
You can extend this principle to apply an specific style to a group of elements on a page. HTML 4.0 provides the CLASS= attribute to give you the ability to group several different elements together under the same class name. With CSS, you can then define a specific style to apply to just the elements that belong to that class.
The style you define can even be applied irrespective of the particular HTML tag that is actually being used for the element - for example, you might want any piece of text that gives the reader a warning message to be displayed in red capitals. This text could be a <P> element, a <LI> element, or just a short piece of in-line text within a <SPAN> element (which is exactly what I have done with the final two words of the previous sentence). To achieve this, you define a CSS rule to display the text as red capitals, assign this rule to a particular class (for example, "Warning") and then allocate every element that you want displayed as red capitals to be part of the "Warning " class.
You can dynamically change the style sheet definitions using Javascript. How this is done is beyond the scope of this brief introduction, but the advanced craftsman can make text appear or disappear, or change appearance, triggered by specific JavaScript event handlers. The mechanisms by which this is achieved is very browser specific, however, and if you attempt it, you may discover youself having to write two very dissimilar sets of functions, one for Internet Explorer, and the other for Netscape Navigator. (This should soon be a thing of the past - read this document on Cross Browser Support.)

These are just a few examples: CSS is definitely something to experiment with. I'm trying to resist the temptation to resort to such a cliché as saying that the potential for CSS is "only limited by your imagination" but actually that is probably true...

So how do I actually define a new style?

Before you do anything else, I suggest that you view the source of this page and look at the section between the <STYLE> and </STYLE> tags in the <HEAD> of the page. You should see something like this:

EM		{font-style: italic;
		 font-size: 12pt;
		 font-weight: bold;
		 font-family: cursive; }

#ExtraIndent	{margin-left: 30; }

.Warning	{color: red; 
		 font-size: 10pt; 
		 text-transform: uppercase; }

That, in a nutshell, is a style sheet. Anyone with experience of any kind of text markup language will probably have a good idea at what most of this means without the need of any further explanation. For example, it should be fairly clear that font-size must refer to the size of the font to use and font-style is the style of font. In fact, you can probably guess what these three style definitions (called "rules" in CSS terminology) are supposed to do already, especially if you remember the first three examples in the previous section. The browser knows to apply these rules by matching the text string at the beginning of each rule (called the selector) with the associated HTML elements.

The rules themselves are fairly straightforward, but their syntax is a bit more complicated, and it must be adhered to exactly otherwise the browser will ignore your CSS rules completely. (Because of the prevalent browser philosophy of "fail safe", the browser will simply revert to the default without even displaying an error.) Every rule begins with a selector, followed by one or more pairs of properties and values. Each property is some sort of attribute that can be applied to the element referenced by the selector - font, margin, line height, color, and so forth - and the value is a piece of text or a number that defines how that attribute is to be set. A colon is used to separate the property from the value, and the property: value pairs themselves are delimited by semi colons. The complete set of property: value pairs are enclosed in braces. White space and newlines are ignored by the browser, so these can be embedded anywhere within the rule to make it more "human readable".

Complete references to all the properties that can be modified using CSS can be found in several places on the Web. One handy quick reference can be found at http://www.cwi.nl/%7Esteven/www/css1-qr.html. The complete specification for CSS, which is the standard to which the Browser developers should espouse, can be found at http://www.w3.org/pub/WWW/TR/REC-CSS1.

More about Selectors

A selector can be any of the following:

any HTML tag
any ID selector
any CLASS selector

If the selector is an HTML tag then the CSS rule is applied to all HTML elements associated with that tag. Thus a CSS rule to set all <P> elements to use a sans serif font of 10 point would be as follows:

P	{font-family: sans-serif; font-size: 10pt; }

You could use a CSS rule to override completely a specific tag's default setting. For instance, you could redefine the <B> tag to display text in italic by declaring the following rule:

B	{font-weight: normal; font-style:italic; }

Note that you must use the font-weight property to to reset the text to normal as well as setting the font-style to italic; otherwise the result will be "bold-italic ".

Any HTML tag can be used as a selector. That means that you could define a rule for the <BODY> and it would be applied to every HTML element with the <BODY> and </BODY> tags.

If you want to define a rule to apply to a single, named element then you should use an ID selector. An ID selector is the value of that element's ID attribute preceded by a # symbol. For example:

#FirstPara

is the selector for the piece of text that has the attribute ID="FirstPara".

CLASS selectors operate in a very similar way, except that this time the selector is the value of the elements' CLASS attribute preceded by the . symbol. For example:

.Warning

is the selector of any piece of text with a CLASS of "Warning ". The CLASS selector may be declared on its own (as above), or in combination with an HTML selector. For example:

LI.Warning

is the selector for HTML elements that are tagged <LI CLASS="Warning">. A rule with such a selector has no effect on unclassified <LI> elements, <LI> elements that belong to any other class, or any other non-<LI> elements that belong to the Warning class.

As an exercise, you may like to take a look at the source of this page and work out for yourself how I have used CSS to supress bullet points on selected items in one of the above bulleted lists.

If the same style rules are to be applied to multiple elements, then selectors can be grouped together. For example, to set the font used by all <H> elements to sans serif, you could declare the following rule:

H1, H2, H3, H4, H5, H6, H7	{font-family: sans-serif; }

Where should my CSS rules be put?

There are actually three places where CSS rules can be put, two of which are rather more useful than the third. The three places are:

in a separate .css file
in the <HEAD> element of an HTML page
"in-line ", or actually inside an HTML tag

Where the CSS rule is put affects the scope of the rule, that is, what part of your site the rule applies to. If the CSS rules are in the <HEAD> section of an HTML page, then they only apply to that page. If you want the rules to apply to two or more pages, you must either copy them into each of the separate pages individually (not recommended, for reasons of difficulty of maintenance); or they should be placed in a separate file and the <LINK> HTML element used to create a link between each individual page and that file.

The latter alternative is the recommended course of action, because when all your style sheet definitions are in one place, they are much more easy to maintain. So that the browser knows which style sheet file to use, each of your Web pages will require a <LINK> element something like the following:

<LINK REL=StyleSheet HREF="Style.css" TYPE="text/css" TITLE="Home Page Style">

REL=StyleSheet tells the browser that this particular link is to a stylesheet. HREF="Style.css" is a hypertext reference to the actual file containing the stylesheet rules. If the file is not in the same directory as the current file, then you will need to enter a relative path, just like the HREF= attribute in an <A> tag. TYPE="text/css" provides the browser with the MIME type of the style sheet file: if the browser cannot support style sheets, it will not recognise this type, and will therefore not bother to waste resources by attempting to load the file. The

TITLE="Home 
Page Style"

attribute gives the style sheet a more user friendly name. This last attribute only becomes useful if you define multiple style sheet files and need an easy way of telling them apart.

The other advantage of using a file for your CSS rules is that it allows you to maintain a number of completely different style sheets in separate files. You can then switch between from one style to another, either by editing the <LINK> element in each Web page file or by renaming the .css file.

If you put the CSS rules in the <HEAD> element of the Web page, then the CSS block must begin with the <STYLE> tag and end with the <STYLE> tag, just like any other HTML block element. It's also a good idea to place your rules inside HTML comments (as you would with JavaScript functions) so that old pre-CSS browsers don't get confused.

You are allowed to split CSS rules and put them in different locations, if you wish, which means that page-specific rules can go in the <HEAD> element in a particular page and generic rules in the .css file. That is what I have done with this particular page, as you will see if you examine the source.

The third (and probably least useful) place to put CSS definitions is "in-line", or actually as part of the HTML tag. This is an example of an in-line CSS definition:

<P STYLE="font-weight: bold;">Some text that you want in bold here</P>

You can see how the property: value pair from a CSS rule is used as the argument to the STYLE attribute. It works, but it is really no different from entering good old fashioned HTML tags like <BOLD>. I only find in-line style sheet definitions useful for making temporary changes to a specific element when designing or trying out a Web page. I may enter an in-line style defination to check if the style has exactly the finished effect that I am looking for. If it has, then I give the element an ID or a CLASS and copy the style rule into the style sheet at the top of the document or into the appropriate .css file.

Why Cascading?

It has probably already ocurred to you, that with all the flexibility provided by CSS, then situations must inevitably arise in which the browser has to make a choice between two competing style definitions. Block level HTML elements can be nested, so, if you define the style of the <BODY> tag one way and the style of a <P> within that BODY in a different way, how does the browser know which style to use? And if the <P> element has been allocated to a specific CLASS that happens to have its own particular CSS rules, too, then total confusion could ensue.

The basic rule is: All inner nested elements automatically inherit the style of the outer element unless it is specifically overruled by a rule applied to that element itself. So if the font-family for the <BODY> tag is defined as "serif", then all the HTML elements within that BODY will be displayed using a serif font. If you want an inner element to use a different font, then that must be declared explicitly in a style rule for that element. In effect, style attributes always "cascade down " from the outer element to the inner element.

When you take into account CLASS and ID selectors, however, then clashes can still occur. In this case, then the rule is that the most specific rule takes precedence. Thus, a rule using an ID selector will be used in preference to a rule using a CLASS selector, and either would take precedence over an HTML tag selector. If a rule uses composite selectors such as P.FirstPara then things do get a little more complicated - basically a rule with a selector of P.FirstPara will take precedence over both a plain P rule and a .FirstPara because it has greater specificity.

You are permitted to override the cascading order by using the ! Important keyword. If the keyword ! Important is added at the end of a rule, then that rule will be applied to the element irrespective of any other rules that might, normally, take precedence. For example, if the following rule is applied:

{color: red ! important; }

then the text will always be displayed in red, irrespective of any other color rules that might be applicable. Remember to use the ! important keyword sparingly - it if is applied to too many rules then it becomes worthless.

Finally, if all else fails, and two rules have exactly the same precedence, then the browser will simply select the rule that was declared last.

A clever trick with anchors

In addition to the standard selectors described above, CSS also provides what are called pseudo-classes. These are special classes that apply specifically to anchors and can be used to define a different style for links, visited links and active links. The three anchor pseudo-class selectors are:

A:link
A:active
A:visited

Each of these different types of link can be given a different set of style rules. For example, I have used these pseudo-classes to make unvisited links stand out on the page, but make links that have already been visited to merge back into the normal text.

What next for CSS?

Cascading Style Sheets are a comparatively new innovation in Web technology, and are consequently still evolving. Already they offer the Web author far more control over the appearance of the Web page than the standard HTML tags could ever provide, but in the near future style sheets could potentially take control of every aspect of Web page design including layout, positioning, and fonts removing completely the Web designer's reliance upon the ideosyncratic behavior of individual browsers and devices. Cascading Style Sheets can also be used in association with XML (eXtendable Markup Language) a kind of "first cousin" to HTML which allows you to define your own markup tags. With XML, instead of being restricted to HTML's relatively limited vocabulary of <P>, <UL>, <H1> and similar tags, you simply invent your own tags as and when you need them. How do you define how these tags should be displayed? You could always define your own DTD (Document Type Declaration) but it's probably easier to use a Cascading Style Sheet.

Knowledge of how to define and use Cascading Style Sheets has already become a required skill for every Web page craftsman.