Contents

  1. Introduction
  2. History
  3. Web Standards
  4. Structure and presentation
  5. (X)HTML
  6. CSS
  7. Accessibility
  8. URLs
  9. References
  10. Glossary

6. CSS

In the early days CSS was used mostly to specify font properties. CSS support in browsers has been mature enough for several years now that it can be used to control the entire layout of a document. However, to do this efficiently requires a somewhat different approach than when tables are used to control layout.

Structured, semantic XHTML is necessary for CSS to be able to control layout in an efficient way.

Browser support

As mentioned earlier, browser support for CSS has improved a lot in the last few years. Unfortunately all browser vendors haven’t been equally interested in implementing CSS fully and properly, so the level of support varies from browser to browser. On top of that there are software bugs that make browsers act in ways they shouldn’t be.

Currently (2008), the web browsers that have the best CSS support are:

Internet Explorer doesn’t yet (as of version 7.0) have the same level of CSS support, but it will let you do most of the basic stuff, though often in a buggy way.

Since currently a majority of people use Internet Explorer for Windows you will often have to let that browser be the lowest common denominator. That does not mean that you cannot or should not use the abilities of browsers with better CSS support to enhance the design for them. Doing so is fine as long as it does not make your site unusable to people using less capable browsers.

It’s important to stress that people using old (obsolete) browsers and browsers that by design do not support CSS must not be locked out. In the nineties, browser sniffing was a popular way of redirecting people using the “wrong” browser (normally anything but Internet Explorer for Windows) to a page that told them to upgrade their browser to gain access to the site.

These days you can handle unsupported browsers in a better way. One big advantage of using logical, semantic HTML is that it makes documents accessible and usable even without CSS. The presentation – the way the document looks – won’t be the same as in a supported browser, but the content will be there. In most cases, for most visitors to a site, the content is actually more important than the way it is presented. That’s why it is better to send an unstyled page to unsupported browsers than to lock them out of the site.

There are different ways of doing that. One of the most common ways is to use @import to link to the associated CSS file. Netscape 4 and older browsers don’t understand @import and will not import the CSS file.

There are plenty of ways to hide certain CSS rules from web browsers. The thing most methods (“CSS hacks”) for hiding CSS have in common is that they are based on bugs in the way browsers interpret CSS code. This means that there will always be a risk that a browser update fixes the bug that is used to hide CSS from it, but not the CSS problem that was the reason for hiding certain CSS from that browser. So the less you rely on CSS hacks, the better.

Obviously you can use server side technology to do a browser check and then send different CSS files (or none at all) to different browsers. If you do that you will have to make sure the detection script is kept current to avoid sending the wrong CSS file when a browser is updated or a completely new browser is released. You should also know that browser sniffing is fragile and error-prone since there is no guarantee that the browser is what it claims to be.

Different ways of applying CSS

There are several ways of applying CSS to elements in an HTML document.

External

There are several advantages to keeping all CSS rules in one ore more separate files. The HTML documents become smaller, CSS files are stored in the browser cache and will only need to be downloaded once, and you only need to edit a single file to change the presentation of an entire website. An external CSS file can look like this:

h1 {
    font-size:2em;
}

Note: there should be no style element in an external CSS file.

You can link a CSS file to an HTML document by using a link element:

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

or by using an @import rule in a style element:

<style type="text/css">
    @import 'styles.css';
</style>

Inline

By using the style attribute, you can apply CSS directly to an HTML element:

<h1 style="font-size:2em;">Heading</h1>

This should be avoided since it mixes structure and presentation.

Internal

Internal CSS is contained in a style element, which in turn belongs in the document’s head element:

<style type="text/css">
h1 {
    font-size:2em;
}
</style>

This should also be avoided, since it is best to keep HTML and CSS in separate files.

CSS Syntax

A CSS rule consists of a selector and one or more declarations. The selector determines which HTML element or elements the rule affects. Each declaration consists of a property and a value. The declaration block is surrounded by { and }, and each declaration ends with a ; (semicolon).

A simple CSS rule looks like this:

p {
    color:#0f0;
    font-weight:bold;
}

In this case, p is the selector, which means that the rule will affect all p elements in the document. The rule has two declarations which together will make the text in all p elements green and bold.

For a more detailed description of CSS rules, see for example CSS Beginner’s Guide, CSS from the Ground Up or a CSS book.

Superfluous elements and classes

When starting out with CSS, it’s common to make the mistake of using unnecessary HTML elements, superfluous classes, and extra div elements. This doesn’t necessarily mean that the code will be invalid, but it counteracts one of the reasons of separating structure from presentation; to get simpler, cleaner markup.

An example of using unnecessary HTML elements:

<h3><em>Headline</em></h3>

If you want to make the headline italic, use CSS to restyle the h3 element:

h3 {
    font-style:italic;
}

Superfluous usage of classes can look like this:

<div id="nav">
    <ul class="navlist">
        <li class="navitem">
            <a class="navitemlink">Lorem ipsum dolor</a>
        </li>
    </ul>
</div>

This will do fine:

<div id="nav">
    <ul>
        <li>
            <a>Lorem ipsum dolor</a>
        </li>
    </ul>
</div>

To control links in the div element with the id nav you can use descendant selectors in the CSS code. In this case it could look like this:

#nav a {
    /* rules */
}

In many cases CSS can be used to style logical HTML the way you want without having to add any extra markup. However, there are cases when adding some extra code is worth it.

CSS tips

Obviously, once you start using CSS seriously, you will eventually run into problems of some kind. Some problems may be caused by misunderstandings, others by unclear specifications or buggy browsers.

The CSS Crib Sheet is a collection of good advice, compiled by Dave Shea. Here are some of the most important tips plus a few more that aren’t in the CSS Crib Sheet.

CSS Layouts

There are many examples and step-by-step tutorials on how to use CSS for layout. A good advice is to start with a simple layout, learn how it works, and then move on to more advanced layouts.

Further reading

Comments, questions or suggestions? Please let me know.

© Copyright 2004–2008 Roger Johansson