In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class".
The id Selector
The id selector is used to specify a style for a single, unique element.
The id selector uses the id attribute of the HTML element, and is defined with a "#".
The style rule below will be applied to the "<div></div>"element with id="header":
Note: All "id" Selectors have to be unique there can only be one id with that name on the page.
So now in the styling we can use the header id and is defined with a "#" symbol. All id tags (or selectors) use this symbol as you can see bellow:
The class Selector
The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.
We set the class in our HTML like so:
This allows you to set a particular style for many HTML elements with the same class.
The class selector uses the HTML class attribute, and is defined with a "."
In the example below, all HTML elements with class="box" will be centre-aligned and the text will be red:
text-align: center ;
You can even use both "id" and "class" selectors on the same element within your web page like so:
content goes here.
There are a multitude of ways to use these selectors. The best way to see how they are used within a web page is to right click on any web page, on the list that displays select "View Page Source". A pop-up window will appear showing all the code that is rendered for that page.
Just scroll down the page to see how ID and class selectors are used.