Article
The CSS Anthology: 101 Essential Tips, Tricks and Hacks, Chapter 1 - Getting Started with CSS
In this first chapter, which takes a different format than the rest of the book, I'll guide you through the basics of CSS and show you how it can be used to simplify the task of managing a consistently formatted Website. If you've used CSS to format text on your sites, you may want to skip this chapter and jump straight to the solutions that begin in Chapter 2, Text Styling and Other Basics. And, if you'd rather read this information offline, you can download the .pdf version of the first 4 chapters here.
The Problem with HTML
CSS is a language that's used to define the formatting applied to a Website, including colors, background images, typefaces (fonts), margins, and indentation. If you've never used CSS before, you could be forgiven for thinking, "Well, I do all that now with HTML tags. Why would I need CSS?" It's a valid question that's best answered with an illustration of the problems that can arise when we define styles using HTML.
At present, a popular design choice is to use a sans-serif font (such as Arial, Verdana, Tahoma, etc.) for the main body text of a site. Since most Web browsers default to a serif font like Times New Roman, creating a complex Web page layout using a sans-serif font will often involve a lot of <font> tags. In a complex layout, you might see ten or twenty <font> tags dedicated to applying the same font to all text on a page. Multiply this by five—the number of pages on a modest site—and we're in the neighborhood of one hundred tags. A beefier site might have fifty pages or more, in which case you're looking at one thousand <font> tags, all of them dedicated to applying that one basic, consistent style to your document's text.
Now here's the kicker: your client calls you late one Friday afternoon to say, "Verdana is nice, but everyone uses it. Let's use Tahoma instead." Fancy search-and-replace tools aside, you're now faced with the task of adjusting one hundred, one thousand, or even more <font> tags to make what, from your client's perspective, seems like a very simple change. You can kiss that ski weekend you had planned goodbye. And, try not to groan aloud—it doesn't go over well with most customers.
If you know your HTML, you may be thinking that the <basefont> tag, which lets you set the default font to be used throughout a page, provides a nice solution to this problem. But even then, you'd have to adjust one tag for each page of your site. Add another font style to the equation (if, say, you wanted to use a different font for that fancy navigation bar of yours), and the problem returns in full.
Another reason why you shouldn't use HTML to format your site is that these presentational elements are deprecated (flagged to be removed in future specifications) and can't be used if you wish to follow a Strict DOCTYPE such as HTML 4.01 Strict or XHTML 1.0 Strict. While your page will still be valid if you use a transitional DOCTYPE, it's good practice to avoid using these deprecated elements where possible. As you'll discover through the examples in this book, CSS allows you to do lots of things that you can't do with HTML alone, so there are many reasons why you should use CSS—but let's stop talking and see some CSS in action!
Defining Styles with CSS
The basic purpose of CSS is to allow the designer to define a style (a list of formatting details such as fonts, sizes, and colors) and then, to apply it to one or more portions of one or more HTML pages using a selector. Let's look at a basic example to see how this is done.
Consider the following HTML document outline:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A Simple Page</title>
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-1" />
</head>
<body>
<h1><font face="sans-serif" color="#3366CC">First
Title</font>
</h1>
<p>…</p>
<h2><font face="sans-serif" color="#3366CC">Second
Title</font>
</h2>
<p>…</p>
<h2><font face="sans-serif" color="#3366CC">Third
Title</font>
</h2>
<p>…</p>
</body>
</html>
This document contains three headings, created using <h1> and <h2> tags. To make these headings stand out more, I used <font> tags to display them in a light blue, sans-serif font (Windows browsers will display them in Arial, for example). Notice the repetition involved, even at this basic level. I had to specify the details of the font I wanted three separate times. Wouldn't it make sense to define the font just once, then apply it to my headings? Here's the CSS version:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A Simple Page</title>
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-1" />
<style type="text/css">
h1, h2 {
font-family: sans-serif;
color: #3366CC;
}
</style>
</head>
<body>
<h1>First Title</h1>
<p>…</p>
<h2>Second Title</h2>
<p>…</p>
<h2>Third Title</h2>
<p>…</p>
</body>
</html>
All the magic lies between the <style> tags in the <head> of the document, where we define our light blue, sans-serif font and apply it to all <h1> and <h2> tags in the document. Don't worry about the syntax; I'll explain it in detail in a moment. Meanwhile, the <font> tags have completely disappeared from the <body>, leaving our document looking a lot less cluttered. Changes to the style definition at the top of the page will affect all three headings, as well as any other headings that are added to the page.
Now that you have an idea of what CSS does, let me explain the different ways of using CSS styles in your HTML documents. The simplest way of putting CSS styles into your Web pages is to use the <style> tag, as I did in the example above. This lets you declare any number of CSS styles by placing them inside the <style> tag, as follows:
<style type="text/css">
CSS Styles here
</style>
The type attribute specifies the language that you're using to define your styles. CSS is the only language in wide use as of this writing, and is indicated with the value text/css.
While it's nice and simple, the <style> tag has one major disadvantage. Specifically, if you want to use a particular set of styles throughout your site, you'll have to repeat those style definitions in a <style> tag at the top of every one of your site's pages.
A more sensible alternative is to put those definitions in a plain text file (usually given a .css filename), then link your documents to that file. Any changes to the style definitions in that one file will affect all the pages that link to it. This achieves the objective of site-wide style definitions mentioned earlier.
To link a document to a CSS text file (say, styles.css), place a <link> tag in the document's header:
<link rel="stylesheet" type="text/css" href="styles.css" />
Let's return to the original example in which three headings shared a single style; that document would now look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A Simple Page</title>
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<h1>First Title</h1>
<p>…</p>
<h2>Second Title</h2>
<p>…</p>
<h2>Third Title</h2>
<p>…</p>
</body>
</html>
The styles.css file would contain the style definition:
h1, h2 {
font-family: sans-serif;
color: #3366CC;
}
As with an image file, you can reuse this styles.css file across as many pages as you need. Not only will it save you typing, it also ensures a consistent look to the headings across your entire site.