CSS Tutorial Lesson 5: Types of CSS Selectors

[Lesson 4]<< [Contents] >> [Lesson 6]

In previous lessons, you have learned that the basic structure of a CSS  comprises selectors and their attributes. Besides that, you 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 <p> elements that appear in the document where the text enclosed between <p> and </p> 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 <h1>, <h2> and <h3> elements. All text enclosed between <h1></h1>, <h2></h2> and <h3></h3> 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 with an ID attribute that has a value that matches the one specified by CSS ID selector.

Example

CSS

#section1 { font-size:14px}

The text includes the following tag will have font size 14 pixel

<p id=”section1″></p>

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

<p class=”intro”><p>

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

 [Lesson 4]<< [Contents] >> [Lesson 6]