We now have the basic components of CSS, the Properties and Values. And we know
that they have to go into a declaration block that has a name up front known as the Selector
There are three categories of selectors; Type selectors, Class selectors and ID selectors.
The selector name has a direct relationship to a part of the HTML page that you want to control. Which part
depends on the selector.
Type selectors
Type selectors will select any HTML element on a page that matches the selector,
regardless of their position in the document tree.
The Heading above is coded in this page like this:-
<h3> Type selectors </h3>
And is that size and colour because of the css code below
h3 {
color: teal;
font-size: 1.2em;
}
Class selectors
While type selectors target every instance of an element, class selectors can be
used to select any HTML element that has a class attribute, regardless of their position in the
document tree. In the CSS file the class selector is preceded by a dot ie
.content1
The column of text on the left is coded in HTML
<div class="content1">
........
........
</div>
Here is the CSS
.content1
{
clear: left;
float: left;
width: 300px;
}
ID selectors
ID selectors are similar to class selectors. They can be used to select any HTML element that has an ID attribute,
regardless of their position in the document tree.
The major difference is that IDs can only be applied once per page, while classes can be used as many times on a page as
needed. In the CSS file the class selector is preceded by a the hash character ie #page-no