CSS Tutorial Lesson 5: Types of CSS Selectors

We have learned about the basic structure of a CSS that comprises selectors and their attributes. We have also learned how to use various types of selectors to create styles for webpages. In this lesson, we shall examine the selectors in more details. We shall also introduce some new selectors which we have not learned before.

5.1 Universal Selector

A universal selector matches all elements on a webpage. Usually the asterisk symbol * is used to denote a universal selector.
Example
*{ font-family: verdana;}
The typeface verdana will be applied to the text of the whole document

5.2 Type Selector

A type selector matches every element type that appears in the document.
Examples
a) p  { color:blue; font-family:arial;}
The CSS rules applied to all elements that appear in the document where the text enclosed between and
tags will be displayed in blue color and in arial font.
b) h1,h2,h3{ font-weight: bold;}
Since the elements are sharing the same declarations, they can also be written as
h1{ font-weight: bold;}
h2{ font-weight: bold;}
h3{ font-weight: bold;}
The CSS rule applied to

,

and

elements. All text enclosed between

,

and

tags will be displayed as bold text.
5.3 ID Selector
An ID selector is used to uniquely identify an element in a document. A CSS ID selector contains a “#”  followed by the ID value, which is an identifier. It matches an HTML element whose ID attribute has a value that matches the one specified by CSS ID selector.
Example
CSS
#section1 { font-size:14px}
The text include betwee the follow tag will have font size 14 pixel

5.4 Class Selector

The class selector is similar to the ID attribute because is it also used to specify an element that matches the value of the  class attribute. We create a class attribute using a period or dot like the following example.
Example
CSS
.intro{color:blue; font-family: verdana;font-size: 120%}
HTML

All text enclosed between the above tags will be in blue, having typeface verdana and font size 120% bigger than the default font