Lesson 5

Advanced Web Design Course

Week 5: Cascading Style Sheets (Part 1)

Let's pretend that you have just created a Web site that contains 20 pages. On each page, you would like your headings to be size H2, navy blue, arial font face, and italicized. No problem! You know exactly what to do. Your code would look like this:

<H2><FONT FACE="arial" COLOR="#000099"><I>Sample Heading</I></FONT></H2>

Well, that worked just fine, although it did take quite a bit of code to make it happen. Now, let's say that on your site, you would like a total of 50 of these headings. Well, you can create them, but now this is becoming a bigger project.

Now let's pretend that 6 months later, you change the look of your Web site, and you want all of those headings to now be purple and not italicized. It won't be very much fun to change all of those tags, will it? It definitely will take a while. Now, wouldn't it be nice if you could create one master command that tells all browsers that enter your page: "I want all H2 commands in arial font and purple" or "I want all text in paragraph tags to be modern font, size -1". Wouldn't that be great? Guess what? You can do it, using Cascading Style Sheets.

What are Cascading Style Sheets?

First of all, as with many technology terms, the term Cascading Style Sheets has been shortened to Style Sheets or CSS. They all mean the same thing.

Cascading Style Sheets consist of one or more commands that tell your browser how to format objects within specific tags. You can implement the style sheet in 2 ways:

You can put a separate style sheet on each page.
You can create one style sheet and link all your pages to it.

The first method, putting a separate style sheet on each page, is a big time saver. We will learn how to create this kind of style sheet during this lesson. The second method, which we will explore during the next lesson, is absolutely amazing. You can actually create one style sheet that controls an entire Web site. Changing the format of 50 H2 tags on 20 different pages, like we described above, would take you less than 1 minute to do!

But let's not get ahead of ourselves. Let's start by learning how to create a style sheet on one page.

One Style Sheet on One Page

This method of using style sheets is very common. And once you get the basics down, it's quick. You will simply place one new block of code on your page. Here are some basic rules:

The style sheet must be within the <HEAD> and </HEAD> commands.
The text must be surrounded by these tags: <STYLE TYPE="text/css"> and </STYLE>. (Remember that CSS stands for Cascading Style Sheets)
The style sheet is text, so if you just type it on the page, it will show up. And that would look very ugly on your page. To make the text of the CSS "invisible", surround the text with

When we put all of these pieces together, the format of your style sheet will look like this:

So What Goes Inside the Style Sheet?

OK, let's get to the actual style sheet commands. Here is the basic format:

TAG {definition; definition; definition}

TAG stands for the name of the tag that you would like to modify (like H2). Definition stands for the attribute that you would like to change. For example, let's look back at the example that I started this lesson with. We wanted to create H2 text that was navy blue, arial font face and italicized. This CSS command might look like this:

H2 {color: #000099; font-family: arial; font-style: italic}

Here are a few things to notice about the format:

The character before the definition is a "{" not a "(" or a "[".
The definitions are separated by semi-colons, but each definition contains a colon.
In my example above, there is a space between the definitions. You do not have to include the spaces, but it does make your CSS code easier to read and edit later.
My example happens to include 3 definitions,but you are not limited on the number of definitions to include for a tag. You can include just one. You can also include 10 or more.

Page 2