Simple And Safe Styles

Synopsis:
Seven simple but useful examples of using style sheets (CSS) to affect document presentation, in a manner which works widely on modern browsers and degrades gracefully when CSS is off. Examples include reducing font size in tables, presenting paragraphs in "literary style", and highlighting important texts.

Techniques:
cascading style sheets, CSS1, external style sheet, graceful degradation cross-browser compatibility

Jukka Korpela

Introduction: the purpose of these examples

There is a wealth of resources on cascading style sheets, such as those listed in the CSS Resource Index at irt.org. But style sheets are difficult to write in practice, partly due to some complexities (such as the cascade concept) in the design but more importantly due to the large number of bugs and deficiencies in implementations. Collections of good examples, such as the CSS Example Pages by CSSPG, are very valuable illustrations and sources of ideas for authors trying to learn CSS. But for getting started, as well as for having some simple jobs done fast by safe, the following examples are hopefully useful.

You are expected to know the basics of HTML. But no previous knowledge about style sheets is assumed, but I still recommend reading first a nice short to style sheets: Dave Raggett's Adding a touch of style. Naturally, you need to study some systematic documentation in order to be able to modify these styles safely, though you might get some simple modifications done easily just by studying the CSS Properties documents by the WDG and proceeding carefully. Especially make sure your HTML and your style sheet are syntactically correct, using the available tools.

Where to put the style sheet?

For simplicity, as well as for other good reasons, all the examples use external style sheets. This means that the HTML document contains no stylistic information directly but just a reference to a separate document with its own address (URL). (There are several other ways to associate CSS with HTML.)

In practice, this means that you first write an HTML document without considering style sheets at all. This way you will see how the document looks without style sheets, which is always something you should prepare for; see the CSS Caveats. To add stylistic suggestions, you

Note: It may happen that your style sheet does not work on Netscape, due to bugs in its CSS support. If you cannot successfully avoid the bugs, consider using the "Netscape exclusion" trick: Replace the link element by the following:

<style type="text/css"><--
@import url(simple.css);
--></style>

This is one of the ways of associating CSS with HTML, and correctly handled e.g. by IE 4 and Opera 3.6. And Netscape 4 simply ignores it, rendering the document without using your style sheet.

Example 1: Highlighting important texts

Let's assume that your document contains some news, with a short heading followed by a headline. Obviously, you'd like to have the headline highlighted somehow. Similar issues arise in various documents when you wish to emphasize an entire paragraph. The headline case is simple in the sense that omitting the emphasis is not as serious as it might be when an important paragraph occurs in the middle of a text. After all, it is natural to assume that the first paragraph of a document is particularly important (though authors too often fail to understand this and make use of it).

Using style sheets, we could do the following:

p.headline { font-size : 110%;
  margin-left : 1em;
  background : #ffd none; color : #000: }

In HTML, the headline would appear as a paragraph with class headline, i.e. <p class="headline">text</p>.

The style sheet suggests a few presentational declarations for those p elements which have class="headline". The properties are:

We assume that the headline contains just some text without HTML markup inside it. This helps in keeping the style sheet simple: we only need to consider that the background and the text color work together. We don't need to consider color issues outside the headline (though we might consider them, suggesting an overall background color and text color which esthetically work together with out headline color). If the headline contained links, you would need to consider link colors too.

When writing a style sheet, be careful with the notations, and don't assume it follows HTML rules! Note the curly braces { and }, the semicolons, and the use of a colon (not an equals sign!) between a property (such as font-size) and its value (such as 110%).

The following illustrates the appearance (if you are using a CSS-enabled browser):

News at 11!

Stay tuned for new information about celebrities, casualties, and sports.

This is a normal paragraph.

When CSS is off, this degrades to a normal paragraph - not that nice, but it does not lose information. You could use HTML hacks to achieve some of the desired effect when CSS is off, e.g. by using a one-cell table with a background color and the big element (or font size="1") for increased font size. But things get more complicated then. It's easy to mess things up by mixing CSS and presentational HTML unless you really know what you're doing, and even if you do. To take an example, if you just use <p class="headline"><big>text</big></p> and the same style sheet, you'll get very large font when CSS is enabled:

News at 11!

Stay tuned for new information about celebrities, casualties, and sports.

This is a normal paragraph.

This problem could be fixed by using p.headline big instead of p.headline in the stylesheet (and using consistently the big markup in headline paragraphs). Another alternative is to use big markup only, without a font size suggestion in a stylesheet