CSS Introduction

A Web page created according to the old HTML 3.2 standard includes all the necessary content, such as text and links to graphics, as well as information about such a page’s presentation. The latter requires prodigious use of font and other clumsy tags. To get around this, the later HTML 4.0 standard recommends the use of a Cascading Style Sheet (CSS), also known as a stylesheet, which deters the use of such tags and encourages the separation of content and presentation.

The need to separate these two parts of a document isn’t obvious at first. Supposing, however, that you’ve created an entire Web site and then decide to change all the fonts at the last moment. How do you fix it? Well, you could use the multi-file ‘search and replace’ feature of an application such as BBEdit, but even this wouldn’t be easy. On the other hand, if all your HTML files are linked to a single CSS document you can change all the fonts at once by simply modifying this one file.

Style information for one or more Web pages is best kept in a separate CSS document, which should have a filename extension of .css. This is called up from within the head tags of an HTML file as follows:-

<head>

  <title>My Web Page</title>

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

</head>

Incorporating a Stylesheet into a Web Page

You can apply a stylesheet to a single page within its head tags, although this is contrary to the principles of CSS and is deprecated in XHTML 1.0 and higher standards. However, if you really insist on this method, here’s an example:-

<head>

  <title>My Web Page</title>

    <style type="text/css">

    <!--

    p{font-family:"verdana","helvetica",sans-serif;font-size:9pt}

    -->

    </style>

</head>

This particular stylesheet indicates the alternative fonts that can be used, shown in order of preference, as well as the font size for all the text inside any of the page’s p tags. Note that the style information is actually entered as a comment, so it doesn’t upset older browsers that don’t support stylesheets. This does mean, however, that you can’t include further comments in the normal HTML form within a style tag, although you can use the C-style of commenting, as described below.

You can also include style information inside the tags within the body of a page, as shown here:-

<p style="margin-left:40px;font-size:9pt;">My paragraph.</p>

Again, this is contrary to underlying principles of CSS, requiring style data to be entered into every tag, although the technique can be easily applied to very simple documents.

Inside a CSS Document

Here’s a small sample of what you might see in a CSS document:-

body

{

  margin-top: 15pt;

  margin-left: 30pt;

  margin-right: 20pt;

  background: #ffffff;

  font-family: "times","times new roman", serif;

  font-size: 9pt

}

p

{

  margin-top: 8pt;

  margin-bottom: 8pt

}

In this instance the margins, background colour, font face and size have been defined for the content of the body tags, while extra margins have been imposed on the content of p tags. One of the main concepts of style sheets is inheritance or cascading, in which certain characteristics are passed down from one element of a document to another. For example, here the Times font has been chosen for the body tags, so this font will also be used in all the other tags in the body of a document. Not only does this make things simpler, it can also speed up the loading of your Web pages.

You’ll notice in the above example that the attributes for a tag are kept inside curly braces, that each attribute and value is separated by a : (colon) and that the entries are separated by a ; (semicolon). In this instance the information is also given in a formatted style, using tab characters and spaces to improve the presentation. In practice, it’s perfectly acceptable to remove some of these so as to create:-

body{margin-top:15pt;margin-left:30pt;margin-right:20pt;background:#ffffff;

  font-family:"times","times new roman",serif;font-size:9pt}

p{margin-top:8pt;margin-bottom:8pt}

Here’s another example:-

/*This is a comment about this stylesheet */

@import"../base.css"

table{background-color:#ffffff;font-family:"verdana","helvetica",sans-serif;

  color:fuchsia;text-transform:capitalize}

The first line is a comment, which uses the same style of notation as employed in the C programming language. This is followed by an @import instruction that forces the stylesheet to inherit information from another stylesheet, in this instance a file called base.css that resides in the enclosing folder of the sheet under consideration. This lets you build variations in styles based on the other document.

Finally, there’s a line that sets the attributes for the content within table tags, indicating the background colour, the font face and its colour (in this case given as a recognised colour name), and a special attribute that forces all of the text to appear in capitals, whatever the case of the original text.

The following shows what you might find in a complete stylesheet:-

body{font-family:"geneva",sans-serif;font-size:10pt}

h{font-family:"helvetica",sans-serif;font-size:18pt;color:#000000}

h1{color:#000099;font-size:36pt}

h2{color:#000099}

p{font-size:10pt;font-family:"geneva",serif}

em{font-weight:bold;color:#990000}

a:link{color:#000099}

a:active{color:#333333}

a:visited{color:#333333}

Two points are especially worth noting: firstly the h line, used to set the basic values for all headings, which are inherited by h1, h2, h3, h4, h5 and h6, and the a:link, a:active and a:visited lines, which determine the colours used for links in various conditions. Some browsers, notably Netscape, also surround graphical links with such colours. If you want use white instead, for all conditions of the link, you should use the following entry in a stylesheet:-

a img{color:#ffffff}

Colours

As a rule, you should define the colours of fonts and other elements throughout a document or not at all. For example, if you use a stylesheet to set the colours of fonts in a particular element, the recipient’s browser responds accordingly, but elements that you don’t specify will have their colours set by the browser, which can result in unreadable text.

As already mentioned, a long hex code of #ffffff produces pure white. This and any other colour that has ‘paired’ digits can also be specified using short hex colour notation, which only needs three digits. For example, white can be written as #fff, whilst the colour #663300 can be given as #630.

Older computers and Web browsers can only display 216 colours, known as Web-safe colours, which are specified using pairs of values that only contain 3, 6, 9, C or F, as in, for example, #663300. Other tones, such as #698853, aren’t Web safe, which causes earlier systems to dither the image, often making text difficult to read. Fortunately, most modern computers and browsers support thousands of colours or more, which means that this is becoming less of a problem.

Colours can also be specified in RGB form, as in rgb(0,204,0) or rgb(0%,80%,0%), both of which give a medium shade of green. In addition, there are set of 16 special colours, as specified in the Windows VGA standard, that can be specified by name, including white, black, silver, gray, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal and aqua, although some of these shades are rather drastic and should be avoided wherever possible.

Backgrounds

Any element within a Web page can be set to a specific background colour or be filled with a repeating background image. As with font colours, you should define the background colours for all elements or none at all. Here’s a simple example:-

body{background-image:url(back.gif);background-position:10px 20px;}

p{background-color:rgb(0%,80%,0%);}

In this instance, the body of the page is covered by replicas of the image in back.gif, although the background-position attributes causes them to start 10 pixels from the top of the area and shifts them 20 pixels to the right. In addition, the background of the paragraphs is set to a shade of green.

In the next example, the images begin at top center, although top left, bottom left, top, top right or center right can also be used. In this instance the images are limited to the vertical by setting background-repeat to repeat-y, although you can use repeat-x to restrict them to the horizontal, repeat to have them in both directions or no-repeat to give a single image.

body{background-image:url(back.gif);background-position:top center;

  background-repeat:repeat-y;background-attachment:fixed;}

You should also note the use of the fixed attribute for background-attachment, which keeps the pattern of images stationary, even when you’re scrolling around the page. If you want the images to move you can either leave this term off altogether or set background-attachment to scroll.

The properties in the above example can be combined into a single line as follows:-

body{background:url(back.gif) top center repeat-y fixed;}

Where the image has transparency or, as in this case, where the repeated image isn’t spread across the entire page, it’s useful to add a background colour, as in:-

body{background:url(back.gif) #333333 top center repeat-y fixed;}

Sizes

Specifying sizes can be tricky, as not all browsers respond in the same way. However, as with colours and backgrounds, it’s best to define the sizes of all elements or none at all. And in the case of font sizes, you should try to specify them all.

The size of any element can be given in absolute units, such as cm (centimetres), in (inches), mm (millimetres) or pc (picas), although these are best avoided, unless the material is only going to be printed. You can also used pt (points, one point being equal to 172 of an inch), although the measurement of these is dependent on the recipient’s operating system. For example, a Windows machine calculates points on the basis of 96 to 120 pixels per inch (ppi), whilst a Mac OS computer works at 72 dpi. Similarly, px (pixels) are dependent on the resolution of the receiving computer’s screen.

Instead of absolute units, you should try to use relative values, especially when defining font sizes. Many use % (percentage) values, although you can also use em (the width of a letter M or more often slightly larger), or ex (the x-height of a letter, around half the height of the browser’s default font). These methods have the advantage of producing a font size based on the default size set by the recipient’s browser, which is usually chosen to accommodate eyesight. Entering the following line:-

body{font-size:0.8em;}

normally produces a font of between 12 and 13 points, since most browsers have a default font size of 16 points.

You can also set font-size to xx-small, x-small, medium, large, x-large or xx-large. In theory, moving up or down these values should multiply or divide the size by a factor of 1.5, although this varies according to the browser. However, unlike other relative values, these aren’t inherited by lesser elements. Finally, you can use the more general smaller and bigger values.

Either of the following lines should produce a reasonable font size in most browsers:-

body{font-size:small;}

body{font-size:76%;}

Using Classes

The stylesheets described above contain attributes that are automatically applied to all tags of a specific kind. However, you may want to use different attributes for various groups of elements in a document. You can do this by employing different classes, each of which are specified by a class name. For example, to create a special table, you could enter this in your HTML file:-

<table class="special"><tr>

and add the following, which has the same class name, to the matching stylesheet:-

table.special{background-color:lime;font-family:"times","times new roman",serif;

  font-size:smaller;font-style:normal;font-weight:normal;color:red}

Classes can also be used to create sophisticated lists with levels, as shown here:-

ol{font-family:"verdana","georgia","geneva",sans-serif;

  font-size:smaller;font-weight:normal;color:black}

ol.level_1{font-weight:bold;list-style-type:upper-roman}

ol.level_2{list-style-type:upper-alpha}

where ol.level_1 and ol.level_2 inherit their basic values from the ol line, although all of the information could be entered separately for the two levels, if preferred. The content of the corresponding HTML document can be of the form:-

<ol class="level_1">

  <li>Topic One

    <ol class="level_2">

      <li>Sub-topic One</li>

      <li>Sub-topic Two</li>

    </ol>

  </li>

  <li>Topic Two…

which is rendered as:-

This idea can, of course be extended to as many levels as required.

Stylesheets and Older Browsers

When designing a Web page you have to decide wether or not to accommodate older browsers. Since the majority of modern browsers work on all but the very oldest computers and are available for free, the author considers it unnecessary to compromise recently generated Web pages.

Fortunately, although an older browser designed for HTML 3.2, usually known as a Level 3 browser, can’t understand stylesheets, the effects aren’t too painful. For example, several different classes of em tag will be interpreted as emphasised text, which is normally rendered in italic. So, although your Web page may look rather bland on an older browser it’s usually readable. In fact, other considerations, such as unsupported character entities, are more likely to cause problems.

Variations in CSS Support

A Level 4 browser, such as Internet Explorer 4.x or Netscape 4.x, usually supports HTML 4.0 as well as stylesheets conforming to the CSS 1.0 standard, while a Level 5 browser, such as Internet Explorer 5.x or Netscape 5.x, supports the improved features in CSS 2.0. This means that a modern stylesheet may not work correctly on one of the older browsers.

There are three ways of dealing with the problem: you can ignore it altogether and hope people will update their browsers, you can make all your pages confirm with CSS 1.0, or you can begin your Web pages with something like this:-

<head>

  <title>My Web Page</title>

  <link rel="stylesheet"href="../old_style.css"type="text/css"media="screen" />

  <style type="text/css"media="all">

  <!--@import"../new_style.css"-->

  </style>

</head>

Any Level 4 browser acts on the link tag data but doesn’t understand the @import information, which means that it keeps to the old_style.css stylesheet. On the other hand, a Level 5 browser does accept the @import instruction and therefore employs the new_style.css file instead.

Compatibility with Netscape 4

In Netscape 4, any CSS values entered for the body tag don’t influence other parts of a document, such as those enclosed by p or h1 tags. Unlike modern browsers, this older version of Netscape doesn’t fully observe the rules that ‘child’ tags should inherit value from their parents. This means that the following style declaration won’t affect the other tags for Netscape 4.

body{color:#000000;foreground-color:#ffffff;font-family:"verdana","arial",sans-serif}

Instead, separate declarations for each tag must be made, as follows:-

body{color:#000000;foreground-color:#ffffff;font-family:"verdana","arial",sans-serif}

p{color:#000000;foreground-color:#ffffff;font-family:"verdana","arial",sans-serif}

h1{color:#000000;foreground-color:#ffffff;font-family:"verdana","arial",sans-serif}

Further Examples

The following stylesheet allows a body section containing graphics to be overlapped by text.

body{margin:0;padding:0;

  font: 1lpx/1.5 "verdana","lucida","arial","helvetica",san-serif;

  color:#ff7;background-color:#369;

  background-image:url(images/bgbiggun.gif);background-attachment:fixed;

  background-position: top left;background-repeat:no-repeat}

div{margin: 10px 10px 10px 40%;padding:10px;

  border: lpx dotted #036;background-image:url(images/fill.gif)}

The fill.gif graphics file consists of a 40 × 40 pixel image of alternate coloured and transparent pixels. This allows the contents of the div ‘pane’ to overlap a logo in the body of the document while ensuring that text inside the div remains legible.

This example also introduces some interesting concepts, such as the ‘shorthand’ font attribute that effectively replaces both the font-size attribute (as well as specifying line spacing) and font-family attribute. Similarly, the margin attribute is given using a list of values separated by spaces: these correspond to margin-top, margin-right, margin-bottom and margin-left values respectively. You can remember this order by thinking of the hands of a clock face, beginning at 12 o’clock and moving clockwise. In this instance the last value is given as 40 per cent of the browser’s window width.

You may also have noticed that the background-image values are given using the alternative url notation. In addition, the single border attribute is used with a list of values that correspond to those used in the border-width, border-style and border-color attributes respectively.

Finally, here’s a fictitious stylesheet that shows the sort of values that can be used. Comments have been included where the purpose isn’t obvious.

/*Sets up background for body*/

body{background-color:#66cc99;background-image:home_lime.gif;

  background-position:bottom right;background-repeat:repeat-x}

body{margin:10%}

/*Sets up special class of div*/

div.toc{background-color:#f3b;foreground-color:#3ea;

  border-style:groove;border-width:thick;

  padding-top:4pt;padding-bottom:4pt}

/*Gives preformatted text with set width for class of div */

div.pre{white-space:pre;width:auto}

h{font-family:"minion web","palatino","times new roman",serif}

h1{font-size:x-large;vertical-align: text-bottom;text-align:center}

/*Pushes first line of each heading to left*/

h1{text-indent:-10%}

h2{text-indent:-6%;font-size:large}

h3{text-indent:-4%;font-size:130%}

/*Makes h4 act as inline element*/

h4{text-indent:-2%;display:inline;font-size:medium}

/*Pushes paragraphs to right, justifies and pads both left and right*/

p{text-indent:5%;text-align:justify;padding:1%}

/*Sets up table and table elements*/

table{margin:0pt;border:1pt}

td{border:1pt;#630 dotted;padding:1pt;margin:0pt;vertical-align:top;}

/*Sets link colours*/

a:link{color:#ff33cc}

a:visited{color:#ff99cc}

a:active{color:#ff66cc}

a:hover{color:#ffcccc}

/*Sets background colour for links*/

a:link{background-color:#ccffcc}

a:visited{background-color:#99ffcc}

a:active{background-color:#99cccc}

a:hover{background-color:#66cccc}

/*Sets background colour for link images*/

a:link img{background-color:#ff33cc}

a:visited img{background-color:#ff99cc}

/*Sets background colour for special link classes*/

a.onsite:link{background-color:#ccffcc}

a.onsite:visited{background-color:#99ffcc}

a.onsite:active{background-color:#66ffcc}

a.onsite:hover{background-color:#33ffcc}

/**/

a.offsite:link{background-color:#ffccff}

a.offsite:visited{background-color:#ff99ff}

a.offsite:active{background-color:#ff99ff}

a.offsite:hover{background-color:#ff66ff}

/**/

a.ftp:link{background-color:#ffffcc}

a.ftp:visited{background-color:#ffff99}

a.ftp:active{background-color:#ffff66}

a.ftp:hover{background-color:#ffff33}

/**/

a.email:link{background-color:#00ffff}

a.email:visited{background-color:#66ffff}

a.email:active{background-color:#99ffff}

a.email:hover{background-color:#ccffff}

References

Jeff Frey (jeff@applewizards.net)

MacWorld magazine (UK), IDG Communications, 2002

The Personal Computing Paradigm, Michael Tsai, 1999

Web Accessibility, Raena Armitage, ATPM-1004, 2004

©Ray White 2004.