Chapter 3. CSS

In the previous chapter, we learned how to create HTML documents using HTML elements and attributes. We can even include images and links to other documents and images. But when you look at the result on a screen, you are probably disappointed. I hope you are, because that was done on purpose (oops, I almost said by design, but the design part is what this chapter is all about). When I wrote my first web pages, I was disappointed too, in particular when discovering how hard it was to do something that should be simple: putting a photograph on a page and some text right next to it. Well now, it's time to turn disappointment into excitement!

In this chapter, we will learn how to add the presentation part—in other words the layout—to our web pages, using Cascading Style Sheets (CSS). Style sheets are a common feature in Desktop Publishing software. They allow you to specify (or modify) the style of a section of a certain kind in your document: for example, every paragraph of text. When I developed my first book in Adobe InDesign, I knew exactly what I wanted every component to look like, so I modified the letter type and size of all of them by hand. I did not want to spend the time learning how to create style sheets. I have, however, since regretted that decision as at that point it had become a time-consuming affair.

Today, I love style sheets and not only do I recommend using them but to let them be the first thing that you create when you start a new project. A style sheet is like a plan for a plan, where you can fill out the details later.

By using style sheets you can separate the design part from the content part. You can even have this done at separate times or by separate people and it will give all of your pages a consistent look and feel. Simply switch two style sheets and your entire site will look completely different. Are we excited now?

Let us start with a sample piece of CSS code:

/* selector – by the way this is how to do comments in CSS */
p.red
/* properties */
{
color:red;
font-family:baskerville, cambria,  serif;
font-size:12px;       
font-style:italic;
}

Comments in CSS can be found in-between the strings /* and */ similar to that used within the C programming language. So, to encourage good behavior, we included some comments in our first example. Let's analyze the rest of this code.

The part before the curly brace is called the selector. It represents one or several elements in our page. In our example, that would include all <p> elements with class red.

In-between the curly braces, we find the CSS rules we want. In this example, we want all text inside paragraphs to be red, size 12 pixels, in italics, and in the Baskerville typeface. On systems where that font is not available, we want Cambria to be used instead.

Note that every rule ends with a semicolon and consists of two parts separated by a colon: a property and a value. Color is a property and in our example the value chosen is red.

In old versions of HTML, the same could have been achieved by placing <font> elements inside your <p> tags. Imagine having 40 <p> sections in your document and someone wants to change the red into maroon! You would have to change your HTML file in 40 different places, and no- a global find and replace would not even help you, as there might be other red "things". By using CSS, you only need to change one line.

It is more common to find CSS code similar to this one:

p {
font-size:12px;
font-family:Baskerville,cambria, serif;
}
p.red {
font-style:italic;
color:red;
}

This will not only have the same effect for red <p> s , but it will also put all other paragraphs in the same typeface and size. This is the C in CSS: the properties of the overall <p> flows into the subset of red ones, like in a real cascade.