How CSS works...

Type selectors

The CSS code below will make all text that uses the H1 tag red.

The 'H1' part of the code is called a 'selector' (they are used to "select" elements on an HTML page so that they can be styled), the 'color' part of the code is called a 'property', and the 'red' part of the code is the value.

h1 {
color:red;
}

So when HTML code like below is used..

<h1> Some Red text </h1>

The text color is changed.

Some Red text

Class selectors

The H1 example above is probably the simplest type of selector, it's called a 'type' selector.

Type selectors 'select' every instance of an element, class selectors can be used to select any HTML element that has a class attribute of a specific value.

Class selectors start with a period, see the example below.

.mystyle {
color:red;
}

To use the style, the name must be referenced in the 'class' attribute of the element.

<h1 class="mystyle"> Some Red text </h1>

ID selectors

ID selectors can be used to select any HTML element that has a ID attribute of a specific value.

ID selectors start with a hash (#), see the example below.

#mystyle {
color:red;
}

To use the style, the name must be referenced in the 'id' attribute of the element.

<h1 id="mystyle"> Some Red text </h1>

The major difference between Class and ID selectors is that IDs can only be applied once per page, classes can be used as many times as you wish.