HTML and CSS:
An Absolute Beginner's Guide

By Ian Lloyd, SitePoint.com

So, you're ready to take the plunge and begin to learn how to build your own web pages and sites? Fantastic! We've got quite a ride ahead, so I hope you're feeling adventurous.

Chapter 3. Adding Some Style

In Chapter 1, Setting Up Shop and Chapter 2, Your First Web Pages, we stepped through the process of setting up your computer so that we could develop web sites, and pulled together the beginnings of a web site with which you could impress your friends and family! The trouble is, when you came to show off your fledgling site to your nearest and dearest, they weren't impressed!

"That's nice dear," said your better half, then carried on doing the dishes. Even Rover (normally your biggest fan), was singularly unimpressed, and decided it would be better to curl up in a warm corner until you stopped waving the laptop in his face. What have you done wrong?

The answer is: nothing. It's true that the web site may look a little bland at present, but the underlying structure on which it's built is rock-solid. To return to our automotive analogy, you now have a perfect chassis and some decent bodywork, and, while your car's not making people turn their heads just yet, it's only a matter of time. Just let them see what you can do with this rolling shell!

In this chapter, we'll begin the process of adding that lick of paint to your otherwise plain site. The tool for the job is Cascading Style Sheets -- CSS to those in the know (or with limited typing abilities). Let's take a look at what CSS can do for you.

What is CSS?

As this chapter revolves almost exclusively around CSS, it's probably a good idea to begin with a basic discussion of what CSS is, and why you should use it. As we've already mentioned, CSS stands for Cascading Style Sheets, but that's too much of a mouthful for most people -- we'll stick with the abbreviation!

CSS is a language that allows you to change elements such as text size, color, bolding, background colors, border styles, and colors -- even the position of elements on the page. Let's take a look at some CSS in action; we'll start by learning about inline styles.

Inline Styles

If you're familiar with Microsoft Word (or a similar word processing package), you may well have created your fair share of flyers, advertisements, or personal newsletters (as well as the more mundane letters to the local authorities and so on). In doing so, you've probably used text formatting options to color certain parts of your text. It's as simple as highlighting the words you want to change, then clicking on a color in a drop-down palette. The same effect can be achieved in XHTML using a little bit of inline CSS. This is what it looks like:

<p style="color: red">The quick brown fox jumped over the lazy  
    dog.</p>

In the example above, we use a style attribute inside the opening <p> tag. Applying a style to a specific XHTML element in this way is known as using an "inline style."

The style attribute can contain one or more declarations between its quotation marks. A declaration is made up of two parts: a property, and a value for that property. In the example above, the declaration is color: red (color being the property and red being its value).

If you wanted to, you could add another declaration to the example above. For instance, as well as having the text display in red, you might want it to appear in a bold typeface. The property that controls this effect is font-weight; it can have a range of different values, but mostly you'll use normal or bold. As you might expect, you'd use the following markup to make the paragraph red and bold:

<p style="color: red; font-weight: bold">The quick brown fox  
    jumped over the lazy dog.</p>

Notice that a semicolon separates the two declarations. You could carry on adding styles in this way, but beware: this approach can get messy! There are cleverer ways to apply styling, as we'll see very soon.

Adding Inline Styles

Open about.html in your text editor, and add an inline style. We want to make the text in the first paragraph after the 'About Us' heading bold and blue. Refer to the previous example as you create the style.

Does the markup for your paragraph look like this?

<p style="color: blue; font-weight: bold;">Bubble Under is a group  
    of diving enthusiasts based in the south-west UK who meet up  
    for diving trips in the summer months when the weather is good  
    and the bacon rolls are flowing. We arrange weekends away as  
    small groups to cut the costs of accommodation and travel and  
    to ensure that everyone gets a trustworthy dive buddy.</p>

If the markup does look like that shown here, save about.html and take a look at it in your browser. It should appear like the page shown in Figure 3.1.

Figure 3.1. Content displaying with blue and bold styles