Search
Close this search box.
Search
Close this search box.

CSS Classes and IDs

Classes

The class selector allows you to style items within the same (X)HTML element differently. You can use the same class selector again and again within an (X)HTML file.

A class selector begins with a (.) period.

Pretty simple, but lets say that I wanted to change the word "sentence"
to green bold text, while leaving the rest of the sentence untouched. I
would do the following to my (X)HTML file.

<p>Make this <span class="greenboldtext">word</span> green and bold.</p>

Then in my CSS file I would add this style selector:

.greenboldtext{
    color: #008080;
    font-weight: bold;
}

IDs

IDs are similar to classes, except once a specific id has been declared it cannot be used again within the same (X)HTML file. I generally use IDs to style the layout elements of a page that will only be needed once, whereas I use classes to style text and such that may be declared multiple times.

An ID selector begins with a (#) number sign.