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.
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 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.