Chapter 3. Adding Some Style
Earlier in this article, 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 that impressed. 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 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 the appearance of elements on the page: the size, style, and color of text, 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 jumps 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.”
Note: But Wait a Minute: Inline Styles?
If you have dabbled with CSS before you may be thinking at this stage, “But this isn’t the right way to do it,” to which I say “Just wait a short while — all will be explained soon.” We just need to run through these basics first before approaching the best way of doing this.
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
jumps 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 be messy. There are cleverer ways to apply styling, as we’ll see very soon.
Ian Lloyd
