Kaye and Geoff's web page documentation 


Cascading style sheets (CSS) were devised when the world wide web became popular and commercial interest in web pages developed. The basic aim of CSS was to allow the separation of style and content in the specification of web pages, so that HTML would be used to provide the content and CSS would control how the content was displayed.

Any number of style sheet specifications (and separate style sheets) can be used within a single web page. In addition to those provided by the author, any person viewing your page can have their own personal style sheets, and in fact modern browsers have their own implied default style as well. Clearly this could lead to there being multiple styles set for a given HTML element, so there needs to be a process to resolve these clashes. A clue to how this is done is in the word "cascading" in CSS. The process is sufficiently complex that we do not want to explain it in detail here (check out some of the links below if you need to know more). This situation does mean that you should be wary of setting out a page in such a way that viewing and understanding the content is dependent on the page layout.

In practice the introduction of CSS has provided web developers with difficulties as well as solutions and enhancements. The support of different subsets of CSS features by different browsers echoes the history of HTML, and this continues to be a problem. The syntax chosen for CSS is not very adaptable and does not integrate with all HTML elements in a seamless way. Simple design decisions, such as defining attribute names which are illegal in Javascript (which can manipulate CSS properties in a similar way to HTML properties) make integrating CSS and Javascript more difficult that it should be.

The overhead imposed by large amounts of CSS can add significantly to download times, and the resultant HTML can be very dense and difficult to follow. This is especially true for many web pages which use huge generalised CSS files despite the fact that only a small fraction of the CSS is actually applied to any of the elements on the page. Browsers generally display nothing until all the CSS information is available, so there can be a long wait during loading until something appears on the screen. We have seen (or not seen!) more than one web page which was entirely blank because for whatever reason the browser failed to retrieve a CSS file.

Style sheets which cover every aspect of the appearance of a web site seem to us to be more useful for large corporate sites which involve an imposed fixed style throughout, and where a large number of people (or a database) may have to make contributions and changes to the site. Universal use of CSS seems to be much less advantageous for a personal web site which might only comprise a few pages, is probably idiosyncratic and is maintained by one person.

In addition to these practical considerations, we believe that there are conceptual weaknesses in the idea and definition of CSS. When there is a conflict between author's and user's styles, ultimately the author's style takes precedence. We think this is a bad rule; if a user wants the text to be two centimetres high (maybe because they have very poor eyesight) then the web page designer should not be able to stop them from fullfilling this desire. Even more fundamentally, we think that the complete separation of style and content is not a realistic goal, and if it is slavishly pursued it can lead to HTML which is very difficult to read and understand. In fact the rules of CSS allow it to be used to specify content as well as style, but of course this is Not Recomended. Finally, for some pages, the style IS the content (for example our haunted web page) or vice versa, so in these cases to talk about separating them is meaningless.

In defense of CSS, it potentially provides a lot more flexibility for web page designers, and where a site is designed with many pages which conform to a uniform pattern, it can simplify and minimise the code needed to specify the layout and "look" of the pages.

In summary, we use a limited amount of CSS because it gives us the power to do things which cannot be done with HTML alone, and because it simplifies some tasks, but we take a conservative approach so that we can be confident that the resulting web pages will look the same in all browsers. As time moves on and older versions of browsers disappear, we will certainly use more CSS to create our web pages. And whenever it suits us, we still happily mix up content and style, as we have noticed most other web designers do.

Getting started

Enough of the polemic; how do you use CSS? This is just an introduction; to see all the available properties and their allowable values you can consult the official CSS1 and CSS2.1 documents from W3C or check out some of the other links below. The CSS1 specification is easier to follow and is reasonably completely supported by most browsers, so its information is safer to use; the CSS2.1 specification serves as a more eloquent argument for a lot of what is wrong with CSS than anything we could write. Here are some links to other sites with information on CSS:

There is also software that will help in the creation of CSS:

TopStyle - an HTML/CSS editor for Windows

As we have said, CSS allows you to control how your web page will look. In the simplest case, it does this by allowing you to define attributes for any HTML element. So for example if you wanted all your <H1> headers to be green and all your <div>s to be indented in from the left by 32 pixels, you could use:

h2 { color:green } div { padding-left:32px }

These examples illustrate the most basic format of a CSS specification. An HTML element name (in CSS often called a "selector", and not surrounded by angle brackets as they are in a tag) is followed by a pair of curly brackets enclosing an attribute name, a colon and a value. Here the attributes are color and padding-left and their corresponding values are green and 32px. These examples show that CSS can control both the appearance of page elements and also how they are positioned on the page.

Placing CSS in web pages

There are three basic ways to place CSS specifications into your web page - in line, in the header, and in a file. We can look at these in turn. Despite its stated aim of separating style and content, CSS allows you to specify style characteristics within tags with the style attribute, for example:

<img src="train.gif" style="border-color:yellow" border="1">

This puts a yellow border around this picture (but has no effect on any other pictures). You can also put style specifications in the header between <style> </style> tags, for example:

<style type="text/css"> H1 { color: grey } img { padding: 4px } </style>

which causes all level 1 headers to be grey and all images to be padded on all sides by four pixels. Finally, you can create a file containing style specifications (do not include <style> tags) and link it into your web page. The link code goes in the header and so it could look something like this:

.... <head> <title>CSS example</title> <link rel="stylesheet" type="text/css" href="webadvice.css"> </head> .....

This last method is preferred with style specifications which you want to apply generally and over multiple web pages.

More complex CSS

CSS specifications can get more complex than the examples shown above. You can have multiple selectors (separated by commas) and/or multiple properties (separated by semicolons), for example:

h1, H2, h3 { color:yellow; background-color:#000000; text-decoration:underline }

would make all 1, 2 and 3 level headers display with yellow text, underlined and on a black background. Note that selectors are not case sensitive and that colours can be specified with the same options as you have with HTML.

CSS properties generally apply to any element where it is possible to apply them (even if the result is not very pleasing), so we can have, for example:

img, blockquote { border-style:dotted; border-color:red; border-width:5; }
which with some HTML like this:

<blockquote> <img src="train.gif"> This is a train</blockquote>

This is a train

Note the alternate setting out of the CSS using multiple lines. This is the first example of an effect which cannot be done with plain HTML; or at least not without multiple images and a complex table structure - there is no way in HTML to directly specify a dotted border around a picture or a piece of text.

But what if we want some, but not all, examples of a particular HTML element to display in a particular way, or indeed a range of elements to display in the same way, but not always? In the first case we can use a specification such as:

div.indent32 { padding-left:32px }

together with HTML like this:

<div class="indent32">indented text</div>
to indent "indented text" by 32 pixels. Any <div>s without the class="indent32" attribute behave in the default manner - starting against the left hand edge of the page. In a similar way, we can specify a set of CSS properties without initially attaching them to a selector, for example:

.garish { color:pink; background-color:#000000; border-width:medium; border-color:green; border-style:groove }

and then attach them to an element in our HTML:

<p.garish>Text in a paragraph</p>

to produce:

Text in a paragraph

Here are some more examples which illustrate other features of CSS:

H1.urban { color: rbg(127,127,127) } body { font-family: helvetica, "comic sans MS", sans-serif; background-repeat: repeat-x; } span img { padding: 2px; border: solid } span img { padding: 6px; margin: 12px; border: dashed blue thick }
The first line shows yet another way of specifying colours - in this case medium grey. The second includes a comma-separated list of values for the font-family property. The browser uses the first value in the list if it can, but if the helvetica font is not available then it tries to use comic sans MS. If this is not available then it uses its generic sans serif font, and if it cannot do this then the default font is used. Providing options in this way is useful because you cannot be sure that anyone looking at your web page will have any particular font on their computer.

The fourth line has two selectors, but note that they are not separated by a comma. This format applies the specified properties only to images which are inside span tags. This example also illustrates a shorthand way of applying multiple values to a single property - the border will be dashed, blue and thick, as shown below:

<span><img src="images/train.gif" border="1"></span> not <img src="images/train.gif" border="1"> in <img src="images/train.gif" border="0"> span <span><img src="images/train.gif" border="0"></span>

not in span

But wait a moment, how about the third line? If you compare it to the fourth line, you can see that the same properties are set for the same selector in both. Since any web page can have multiple sources of CSS specifications, conflicts like this are expected to occur with CSS and are resolved, by default, by using the values in the last applicable specification. So in this case line four values are used and line three is effectively ignored. Note however that if line three had set a property not (re)set in line four then this property would be applied, for example:

p { word-spacing: 1em; letter-spacing: 0.2em; text-transform: uppercase } p { word-spacing: 2em; letter-spacing: 0.4em; }

will give all text in paragraphs a word spacing of 2em and a letter spacing of 0.4em, but will also make it all uppercase.