Intermediate HTML

Lesson 1: Cascading Style Sheets

The syntax of a style sheet

A CSS specification is made up of 3 parts:

1. selector
2. property
3. value

Here's an example:

H1 {
color: red;
font-size: 150%;
}

The selector in this example is H1, that is, the major heading specification in HTML. (Quick review: You can create headings in HTML by surrounding text with through

. Headings make text larger and set it off with extra spacing.)

There are two properties for the H1 selector in this example: color and font-size. As you may suspect, color specifies the color of the text for all first level headings (H1) using this CSS, while font-size specifies the text size.

The value of the property is what you want to set it to. In the example above, we're setting the color to red and the font size to one and a half times the regular text. Here's what it will look like:

This is a heading

---

Very important:

1] Notice the colon ( : ) between the property and the value.

2] Notice the semicolon ( ; ) after the value.

Leave either of those out and your specification is toast. Okay, you can leave out the semicolon on the very last property-value pair, but it's just as well to get into good habits and use it all the time.

---

Special types of selectors:

1. Classes:

Classes can be applied to any HTML element. Here's an example:

.bluesmall
{
color: rgb(51, 102, 153);
FONT-SIZE: 80%;
}

You apply that class in your HTML page like so:

Any element of an HTML page that is of this class will have the hexadecimal color value of 336699, which is a nice dusty shade of blue, and a text size that's four-fifths the size of other text on the page. Here's what a "bluesmall" paragraph will look like:

I'm a bluesmall paragraph.

If you're not familiar with RGB color specifications, there's a nifty HTML color table on the back flap of your textbook, HTML for the World Wide Web that gives you a lovely chart of colors and their values. Don't worry what "hexadecimal" is. You just need to know how to look up the value you want and plug it into your CSS. The only glitch is that, although anywhere else in a CSS you can use hexadecimal values, for the "color" value you have to use the decimal value. There's a conversion table on page 460, but remember that what looks like six hexadecimal numbers is really three sets of two numbers, so you have to translate each couplet separately. Annoying, isn't it?

Incidentally, if you can't think of an appropriate element for your class, you can use that old standby, SPAN, like so:

I'm small and blue.

2. Ids:

An Id is only applicable to one HTML element on the page. The first element to which you give that Id is the one that gets the formatting applied to it.

There are two flavors of Ids.

1] You can use a star to specify that any element on the page might have that Id applied to it, like so:

*#special
{
text-align: center;
color: red;
}

which means that the first element to which you give the Id "special" will be centered and red.

2] You can specify which element the id can apply to, like so:

p#special
{
text-align: center;
color: red;
}

which means that the first

element to which you give the id "special", thusly:

This is a very special paragraph.
.

will be centered and red, thusly:

This is a very special paragraph

3. Pseudo-classes: the final wrinkle

Remember how we changed the appearance of the hyperlinks in the last section of this lesson? A link actually has four "states":

• link -- when it's just sitting there on the page
• visited -- been there, done that
• hover -- the user's mouse is hovering over the link
• active -- the user is actually clicking on the link

A pseudo-class refers to the selector's state. I've never seen it applied to anything but hyperlinks, but since it's used a lot, this pseudo-class thing is important. So your spec is going to have the format:

selector:pseudo-link {
property: value;
}

Here's an example:

a: link {
color: red;
font-weight: bold
}

Now this is also annoying. a:hover MUST come after a:link and a:visited, and a:active MUST come after a:hover. Just one of those rules you have to remember.

Piece of cake. Any questions? Come on over to the Forum.

Let's go on now to some of the types of formatting you can do with a CSS.

Print this page

  1  2  3  4  5