CSS Introduction

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:-

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:-

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.

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.

• If you want an element to be transparent you can set its color value to transparent.

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:-

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.

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:-

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:-

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 ¹⁄72 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:-

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.

• Browsers don’t normally allow the size of text to go below 9 points, even if a smaller size is specified. However, some browsers let you set the minimum text size by means of the appropriate pane under Preferences.
• Netscape 4 treats em values as if they were measured in px.
• Internet Explorer 5 takes small to mean medium.
• Some versions of Internet Explorer don’t increase px sizes correctly.
• The Windows version of Explorer behaves oddly with 0.9em or less, making the fonts progressively too small.

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

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:-

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.

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