by Wendy Connick

Created on: April 01, 2009

Cascading Style Sheets, or CSS, are the best way to change the appearance of your web pages. CSS was added to HTML 4.0 in order to help web developers keep layout and appearance rules separate from the page content itself.

A CSS rule is made up of three components: the selector, the property and the value.

The selector defines what parts of your web page will be affected by the rule. If you want to make a change to the entire page, you would list 'body' as the selector. But if you wanted your change only to affect text in paragraph format, you would use 'p' as the selector.

The property defines what you are changing about that selector. Want to change your text's color? You'd list the 'color' property in your CSS rule. If you wanted to add margins around every paragraph, you'd use the 'margin' property.

Finally, the value declares what change you are making to the property. In the examples above, if you were changing your text color to red, the value would be 'red' or '#FF0000,' while if you were setting the paragraph margins to 15 pixels then you would list the value '15px' in your rule.

Putting these three components together, a CSS rule looks like this:

selector {
property: value;
}

... or, continuing with the examples above:

body {
color: red;
}

p {
margin: 15px;
}

You should include a semicolon after each property-value pair. For each selector, you can make multiple property changes at once, for example:

body {
font-size: 14px;
color: red;
font-family: arial;
}

You can also group a number of selectors together. If you wanted your margin change to affect images as well as paragraphs, you can create a rule like this:

p, img {
margin: 15px;
}

So what do you do if you want some, but not all, of your text to be red? That's when the class selector comes into play. You can call a class selector anything you want, although you shouldn't start a class name with a number or it will fail in some browsers. A class is defined like this:

.redtext {
color: red;
}

When you want to apply that class to an HTML element, you give it the 'class' attribute like so:

<p class="redtext">This text is red because of its class.</p>

You can also create rules with the ID selector this works exactly like the class selector, except you begin the selector with a '#' instead of a '.':

#bluetext {
color: blue;
}

... and you would apply it to the HTML as follows:

<p id="bluetext">This text is blue because of its ID.</p>

The difference between ID and class is that a given ID attribute can only apply to one HTML element per page, whereas you can use a class attribute as many times as you like. In the above example, you could have only one 'bluetext' element on each page, but you could have multiple 'redtext' elements.

Learn more about this author, Wendy Connick.
Click here to send this author comments or questions.