	Welcome
	Overview
	Structure
	Text
	Images & Links
	Lists
	Tables
	Frames
	Style Sheets
	More Help
	Credits

Applying cascading style
sheets to revolutionise control
of presentation in pages

The most significant development in HTML's short history came with the advent of Cascading Style Sheets not so long ago. An integral part of the HTML 4.0 specification, style sheets are an attempt to separate content from presentation once and for all. The philosophy is that an HTML document should include the basic content and logical structure of a page, but that all information regarding style and presentation should be defined elsewhere. Markup languages were never intended to act as desktop publishing tools, which is why HTML ended up in such a mess.

So style sheets are here to stay. Like the similar facilities in all modern word processors, style sheets allow you to define global styles and apply them automatically throughout your web documents. One style sheet, containing any number of definitions, can be called from any number of HTML documents, and they will all be rendered using those definitions. Therefore, to change the look of your entire site, without affecting the content, all you have to do is edit the style sheet.

Currently, style sheet syntax offers control over fonts, text sixes, colours, decoration, borders, page and paragraph backgrounds, image positioning, block alignment and far more. Perhaps the only caveat is that the CSS level 1 specification is only partially implemented in Microsoft IE5 and Netscape 4x. This is despite the fact that CSS level 2 has already been published, with yet more features. However, besides the occasional unpredictable effect, most of the basics work fine, and style sheets are one of the most important things you can learn these days.

We'll start by explaining the two princial ways of using style sheets. Either you can create a separate file containing universal style rules, which can be referenced by any document; or you can add rules directly into any document. Perhaps the best approach is to mix and match: put your site-wide style rules into an external file, and add any extra ones directly into the individual page(s) that need them. Look at the source of this page for an example of the use of both strategies.

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

If you add this line to the header block of your HTML documents, then they will each call the file you specify and use its style instructions to define the look of their own content. The file should have a .css extension, and its contents can be any number of style definitions, according to the syntax described in the example below:

A First Look

p { font-family: sans-serif; }
h4 { color: #3333FF; }
td { bgcolor: #FF0000; }

The lines presented on the left are typical contents of a very basic .css file. The first line defines attributes for the <p> tag, and state that all paragraphs should be rendered using a sans-serif font. The second line ensures that all <h4> heading blocks are rendered in blue text, according to the standard hex colour definition system. The third line makes every table cell's background colour red.

The above method is perfect for when you want to define universal style rules, to be applied to every single instance of a given tag. If you want greater control however, and the ability to define many different style rules for different paragraphs or headings, you need to use classes. This allows you give a class name to a particular style, and then apply it to individual blocks of text, as and when you want. Here's an example of the use of classes, which also illustrates the <style> container, for defining styles within your actual document, rather than calling them from a separate file:

<html>
<head>
<title>Very Classy Document</title>

<style type="text/css">
    p.green { color: #00CC00; }
    h1.slanting { font-style: italic; }
</style>

</head>

<body>
<p class="green">
This will be a green paragraph.</p>
<h1 class="slanting">
This heading will be in italics.</h1>
</body>
</html>

In the header block, we've put two class definitions, which can be applied respectively to a <p> paragraph block, and an <h1> header. Within the body, we've called these styles using the "class" attribute. All paragraphs or headings which call a particular class will, of course, be rendered according its defined style definitions.

You can also use a combination of global definitions (such as in the first example above) and specific class definitions to get even more control, since local class definitions take precedence over global ones. For example, you could globally set all <h2> headings to be rendered in red text, but have an h2.black { color: #000000; } class defined too, so that certain <h2> headers could be displayed in black.

Now let's go on to take a look at assigning multiple style attributes to a class or tag in one go. For example, with just one line of a CSS file, you can specify your chosen font face, color, background, weight, point size and borders, for all <h3> tags say. Just list all the style definitions inside one set of curly braces, separated by semi-colons! Equally, you can assign one set of attributes to many different tags or classes, by listing them in front of the curly braces. Here are some examples:

 h3 { font-family: sans-serif; color: #3333FF; font-size: 14pt; }

Using this line within a .css style file would ensure that all <h3> headings are rendered in a blue, 14 point, sans-serif font.

 p, h1, h4, td { font-family: serif; font-weight: bold; }

Similarly, this line would assign a bold serif font face to all <p>, <h1>, <h4> and <td> tags within the document. Again, this line could appear either in a <style> block or in a separate .css file.

 h3 i { font-color: #990099; }

This syntax, without the comma note, ensures that the style definition - purple text - is only applied to italic <i> text which is nested inside <h3> headings. Normal, unitalicised <h3> text would not be affected. Using nesting in this way refines your control even further.

Table of Properties Available

Now that you've had a quick introduction to the syntax of style sheets, here's table of all the most useful properties available in the CSS specification. All of these can be applied to virtually any block-level elements (such as <div>, <p>, and <h1>) or inline ones (such as <span> ). I've deliberately left out many of those that are currently unsupported by browsers.

Property	Possible Values	Comments
font-family	helvetica, arial, sans-serif times, serif	These are really the only two font families that are universally supported on the web, so the only two that are safe to use. Specifying them in the complete groups shown is recommended, for maximum redundancy.
font-size	10pt, 12pt, 15pt, etc 10em, 14em, 22em, etc 85%, 100%, 300%, etc	There are many ways of specifying font sizes. Using point sizes gives absolute control, but using ems or percentages gives relative sizing, which is often better.
font-weight	normal bold	This is the property you need to get bold text.
font-style	normal italic	This is the property you need to get italic text.
color	#123456, #6699CC, etc	You can apply colours to any text element, using the normal hex colour code scheme.
background	#123456	You can put a background colour behind any type of text element, to offset the foreground colour.
background-image	url(/path/filename.gif)	You can even supply a background image for your element, using this slightly special syntax. Specify the path and filename of the image, just as you would in a hypertext HTML link.
background-repeat	repeat-x repeat-y no-repeat	If you don't want the background to be tiled, you can specify it to tile horizontally only, vertically only, or not at all. This property was applied to the `<body>` of this page, to tile the blue-waves background down the left side.
text-decoration	none underline line-through	Control underlining with this property. A neat trick is to apply this to `<a>` link anchors, to prevent the unattractive link underlining which browsers render by default.
text-align	left right center	Use this to control positioning of blocks to the left or right of the window, or as the only technically correct way to centre your text.
margin-top	1px, 5px, 85px, etc 2%, 8%, 30%, etc	You can position blocks of text using the margin controls. Text should be positioned relative to the parent container element, but browers are very buggy in this area, so effects can be unpredictable.
margin-bottom	1px, 5px, 85px, etc 2%, 8%, 30%, etc	Same comments as above. This property controls the space beneath a block of text.
margin-left	1px, 5px, 85px, etc 2%, 8%, 30%, etc	Same comments as above. This property controls the indenting space to the left of a block of text.
margin-right	1px, 5px, 85px, etc 2%, 8%, 30%, etc	Same comments as above. This property controls the space to the right of a block of text.
border-width	thin medium thick	Use this to define to thickness of a border around the text block.
border-style	solid dotted dashed	You can have several different border styles. These options are currently the only ones which work properly..
border-color	#123456, #6699CC, etc	Borders can be any colour you like, according to the usual hex colour code definition scheme.
border	thin black solid thick dashed #FF0000	This is the shorthand way of defining borders. You can specify all the properties together in one go, in any order. You can use colour names or hex codes, though the latter are recommended.
position	relative absolute	This property is intended to state whether an item's positioning (eg its margins) are defined relatively, which means relative to the parent container, or absolutely, which means relative to the entire page. But like most things, browsers don't usually interpret it properly, so use with care.
visibility	visible hidden	This is actually a CSS2 property, but is partially supported by the 5th generation browsers. Hidden blocks will not be visible, but will still affect the layout of the page.
width	5%, 30%, 100%, etc	You can modify the window width occupied by a CSS box entity (such as a border) using this property. In fact, you sometimes need it as a fix, because buggy browsers get very confused with borders, and make a box which stretches way off the page.

The above are just a selection of the full CSS properties available, but they cover most of what actually works at the moment. There are plenty of guides on the web offering more detail on CSS, and we've provided some links in the "More Help" section of this guide. But for the moment, the sporadic support in Microsoft IE5 and Netscape 4x makes life rather difficult and unpredictable, when designing for CSS.

A Full Example

Now that you've seen some of the possibilities available, here is a slightly more complex example, which shows the use of several of the new properties detailed above. Here are the four style sheet class definitions used:

h1.welc1 { font-size: 56pt; font-weight: normal; font-style: normal;
   color: #CC0000; margin-top: -10px; margin-left: 48px;
   font-family: Helvetica, Arial, sans-serif; }
span.welc2 { font-size: 30pt; font-weight: normal; font-style: italic;
   color: #FFCC33; margin-top: -30px; margin-left: 135px;
   font-family: Times, serif; }
span.welc3 { font-size: 35pt; font-weight: normal; font-style: normal;
   color: #66CCCC; margin-top: -15px; margin-left: 65px;
   font-family: Helvetica, Arial, sans-serif; }
span.welc4 { font-size: 35pt; font-weight: bold; font-style: normal;
   color: #3366CC; margin-top: -29px; margin-left: 110px;
   border: thin solid #000000; font-family: Helvetica, Arial, sans-serif;
   text-align: center; width: 35%; }

These definitions are called by the piece of HTML code below, in the usual body of the document. I've used an <h1> container, inside which are several <span> inline containers, one for each style. Remember that the <span> element does not imply any line or paragraph break, so the apparent line breaking you'll see in the output (below) is actually due solely to the margin definitions in each style:

<h1 class="welc1">Welcome<br>
<span class="welc2">to the</span>
<span class="welc3">Millennium</span>
<span class="welc4">2000</span></h1>

Admittedly, this structure is NOT at all intuitive, but is purely the result of trial and error. Because the browsers don't render CSS properties as they're supposed to (particularly with regard to margins, borders, and relative vs absolute positioning), you will have to use trial and error to get the effect you want. You might have to try mixing and nesting <div>, <span>, or other block-level tags in different orders:

Anyway, the resulting output from the above code, combined with our style definitions, looks like this:

Welcome
to the Millennium 2000

As you can see, we've achieved the effect of overlapping text and borders, in a range of colours and sizes, using two different font faces. Hopefully this gives you some idea of what you can do, though clearly the only limit is your imagination - well, and the browser's cooperation!

Useful Tips

/* this is a style sheet comment */

If you have a really huge style sheets file with a large number of class definitions, you might want to add some comments to it. Comments in ".css" files do NOT use the same syntax as HTML comments; rather they use the C++ format, as shown above.

When using style sheets, bear in mind how the page will look when viewed by browsers that don't support them. This can be an important consideration, if you don't want to end up with poor-looking output. One simple thing to bear in mind is that you should make full use of the different HTML block-level elements, such as headers. Avoid the common pitfall of attaching all your style classes to <p> tags alone. If you want a big, eye-catching headline font, define it with an <h1> tag, so that when a viewer without style sheets looks at your page, they'll still see some sort of headline, rather than just another snippet of plain paragraph text.

body {
   background-color : white;
   background-image: url(/images/arc.gif);
   background-repeat: no-repeat;
}

This sliver of code highlights some of the features described above, defining style properties for the entire <body> block of the page. Firstly, note the layout: CSS definitions can span as many lines as you want, and like HTML itself, spaces and layout of the code are irrelevant. Secondly, we've specified a background image by URL, and chosen that the background should not repeat, ie not be tiled. Finally, note that we've also specified a background colour for the rest of the page background; without this, the page would default to the standard grey background, apart from the single untiled image in the top left corner.

You need to may more attention to end tags when using style sheets, otherwise you can get into a mess when changing from one class to the next. Though you can normally get away without using closing </p> tags, for example, it's a good idea to include them, especially for paragraphs utilising style definitions.

It is perfectly possible to define style classes with no particular tag attachment, by simply giving them a name such as ".groovy" rather than "h1.groovy". You can then apply the properties of the "groovy" class to any element, such as headers, paragraphs, lists etc. However, this is generally discouraged, since it is not formally part of the CSS specification, and may confuse some browsers.

	Welcome
	Overview
	Structure
	Text
	Images & Links
	Lists
	Tables
	Frames
	Style Sheets
	More Help
	Credits