Advanced CSS

There are three parts of a style sheet:

* selector
the element or class and id title to which the style will be applied
* property
the information on how to format the selector
* value
the actual style to be applied to the property on the selector

For example, if you want all of your paragraphs to be the same font, you would use the following CSS:

p {
font-family : arial;
}

* p
the selector. All text within the

tags is impacted by this style
* font-family
the property. All text will have the font-family changed
* arial
the value. The font-family will be "Arial"

As you can see above, the format of a style declaration is:

selector {
property : value ;
property2 : value ;
}

Group your styles for each selector together in curly braces

{}

Then separate the property from the value with a colon

:

Finally, end each style statement with a semi-colon

;

(Note: the semi-colon is only required to separate multiple styles, but it's a good idea to include it at all times. Then you can always add more styles.)

Your selector is usually an HTML tag, but you can also create IDs and classes. These types of selectors are used when you aren't sure what you're going to use the style on. For example, you may want a style class of "highlight" that changes the background color to yellow. It wouldn't matter what tag was highlighted. Here's how:

.highlight {
background-color : #ffff00;
}

Then to use that style, set the class in your HTML tags:

This headline is highlighted

Or you can simply use the



tag to define the exact text to be highlighted.

The following page of this article explains some of the more common properties and the values you can use with them.