Home Karmen For You Tuts Games xoxo updates Res Listed Credits LinkMe Cbox

CSS: Classes and Ids

This tutorial is not necessary to be able to use CSS, but it is something that is worth learning so you can make styling even easier.


To define different styles of the same element, you can use classes. Classes can be used many times in a document, as much as you need to.
Say you want to have two kinds of paragraphs in your document – one aligned to the right, and one aligned in the center.
This is how you would customise a class with CSS:

To display these correctly on your page with HTML you would use:

You can also give more than one class for the paragraph. This one means that the paragraph is styled by the center and bold classes.

You can also use a class for any HTML elements. You must first customise the class like this:

This means that any element of HTML can be centered – header 1, header 2, paragraph, and so on. Simply by making sure you put the class into the HTML:

Do not start a class with a number. It is not compatible with Mozilla/Firefox.


Unlike classes, ids can only be used once in a document, but can be used over different pages. They are often used for divs.
While the class selector is defined using a period, the id selector is defined with a hash (#).
Say you wanted to make the sidebar text on every page of your site have a pink background.

And the HTML code you would use would be:

If you wanted to be specific with the ids, and make them apply for just one element, you would place it in front of the hash:

And the HTML code you would use would be:

Like classes, you cannot start ids with a number.

Combining classes and ids

Combining classes and ids is relatively simple. Just put them into the same command:

If this helped you please link back. Thanks!!