Translations of this article are available.
Having been used mostly to specify font properties, CSS can now 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.
As mentioned earlier, browser support for CSS has been improved a lot in the last few years. Unfortunately all browser vendors don’t seem to be interested in implementing open standards, 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 (2004), the web browsers that have the best CSS support are Mozilla (and other browsers based on Gecko: Firefox, Camino, Netscape 6+), Opera and Safari (and other browsers based on WebCore: OmniWeb 4.5 and later). Internet Explorer 6/Win doesn’t have the same level of CSS support, but it will let you do most basic stuff. Internet Explorer 5/Mac has very good support for CSS 1, but it doesn’t support a lot of CSS 2. IE 5.* for Windows supports quite a bit, but has some problems that you need to be aware of. Earlier versions of Internet Explorer have no support worth mentioning. The same goes for Netscape versions earlier than 6.
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 is not to say that you cannot or should not use the abilities of browsers with better CSS support to enhance the design for them.
Not all browsers currently in use have the level of CSS support required to render a website which makes full use of CSS for layout in a graphically attractive way. Luckily, on most websites, only a few percent of the visitors are using a browser too old to render a CSS-based layout properly.
It’s important to note that these people will not be locked out. In the nineties, browser check scripts were a popular way of redirecting anybody 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 XHTML 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 CSS from web browsers. The thing most methods for hiding CSS have in common is that they are based on bugs in the way browsers interpret CSS code. That means 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.
Eric Meyer describes four ways of hiding CSS from certain browsers.
A large collection of techniques that can be used to hide CSS from browsers.
A document on different ways of enhancing the experience for people using a modern browser.
There are several ways of applying CSS to elements in an HTML document.
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-weight:bold;
}
Note: there is 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 url("styles.css");
</style>
By using the attribute style, you can apply CSS directly to an HTML element:
<h1 style="font-weight:bold;">Rubrik</h1>
This should be avoided since it mixes structure and presentation.
Internal CSS is contained in a <style> element, which in turn belongs in the document’s <head> element:
<style type="text/css">
h1 {
font-weight:bold;
}
</style>
This should also be avoided, since it is best to keep HTML and CSS in separate files.
An explanation of, among other things, CSS import and media types.
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 each declaration ends in ; (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 all text contained in a <p> element 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.
With the help of his readers, Dave Shea has made a list of practical CSS tips.
John Gallant and Holly Bergevin explain how to write compact CSS.
A very good explanation of different CSS selectors and how they work.
When starting out with CSS, it’s common to make the mistake of using unnecessary XHTML 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 XHTML 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="main">
<div class="maincontent">
<p class="maincontenttext">
Lorem ipsum dolor
</p>
</div>
</div>
This will do fine:
<div id="main">
<div>
<p>
Lorem ipsum dolor
</p>
</div>
</div>
To control elements contained in div#main you can use contextual selectors in the CSS code. In this case it could look like this:
div#main p {
/* rules */
}
In most cases CSS can be used to style logical XHTML the way you want without having to add any extra markup. However, there are cases when adding some extra code is worth it.
Obviously, once you start using CSS seriously, you will eventually run into problems of some kind. Some problems may be caused by misunderstandings, others on 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.
Validate first: When debugging, start by validating both HTML and CSS. Many problems can be caused by invalid code.
Test in the most advanced browser first, then make it work in the others: If you’re using an old browser with a bad and/or erroneous implementation of CSS while you’re testing, your CSS will be adapted to that browser’s implementation. When you test in a more advanced browser, chances are things will not look the way you intended. It’s better to first make it work in the most standards compliant browser, and then adapt the code to less able browsers.
Understand the CSS box model: To get an element’s actual width or height, you add its padding
and its border to its width or height. In Internet Explorer 5.*/Win, padding and border are included in the supplied width or height.
Suppose you have the following CSS:
div.box {
width:300px;
padding:20px;
border:10px solid;
}
The total width of this div is 360px.
10px + 20px + 300px + 20px + 10px = 360px
In Internet Explorer 5.*/Win, the total width is 300px, and the width of the content is 240px.
300px - 10px - 20px - 20px - 10px = 240px
To work around this problem, you can either use a CSS hack to feed different values to the browsers that get this right and those who get it wrong, or you can avoid specifying both width and padding or border for an element.
For a thorough explanation of the CSS box model, see the document Box model.
Specify units for numerical, non-zero values: CSS requires that units are specified for properties like width, height, and font-size. An exception from this is when the value is 0 (zero). In that case, no unit is necessary, since zero is zero, no matter what the unit is.
Understand floats: The concept of floats can be hard to understand, but is very important since it is frequently used to in CSS based layouts. Some very good articles on floats are Containing Floats, Floatutorial, and Float: The Theory.
“LoVe/HAte”: Define pseudo classes for links in the order Link, Visited, Hover, Active.
“TRouBLed”: When using shorthand to specify an element’s margin, padding or border, do it clockwise from the top: Top, Right, Bottom, Left.
Name classes and IDs by their function, not by their presentation: If you call a class .smallblue, and later decide to make the text big and red, the class name will be confusing. It’s better to use names that describe function or structure, like .copyright or .important.
Case sensitivity: Values of the HTML attributes class and id are case sensitive when used with CSS (see CSS2 syntax and basic data types).
Element names are case sensitive when used with XHTML served as XML, but not when used with HTML or with XHTML served as text/html.
Check your IDs: Only one element in a document can have a certain value for the id attribute, while any number of elements can share the same class name.
Use only allowed characters for class and id: Class and id names can only consist of the characters [A-Za-z0-9] and hyphen (-), and they cannot start with a hyphen or a digit (see CSS2 syntax and basic data types).
Comment correctly: CSS comments start with /* and end with */:
/* This is a comment */
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.
An example of how to create a simple layout with a header, two columns, and a footer.
A collection of links to different CSS layouts.
Comments, questions or suggestions? Please let me know.
© Copyright 2004–2006 Roger Johansson