CSS Selector

There can be three types of selectors. They are:

HTML selectors
Class selectors
ID selectors

HTML Selector

We have already seen HTML selector in the previous section also. An example given below will demonstrate it.

<HTML>
<HEAD>
<style type="text/css">
B {font-family:arial; color:red}
</style>
</HEAD>

<BODY>
<b>This is a bold text with arial font and red color</b>
</BODY>
</HTML>

The output will be:

This is a bold text with arial font and red color

This is the easiest type of selector. The example is self explanatory. HTML selectors are used when you want to redefine the general look for an entire HTML tag.

Class Selector

With the class selector you can define different styles for the same type of HTML element. Suppose you want to group certain attributes under a single heading which can be used with different HTML tags. It can be seen in the following example:

<HTML>
<HEAD>
<style type="text/css">
.text {font-family:arial; color:blue}
</style>
</HEAD>

<BODY>
<b class="text">This is a bold text having arial font and blue color</b>
<br>
<i class="text">This is an italic text having arial font and blue color
</i>
</BODY>
</HTML>

The output of the above code will be:

This is a bold text having arial font and blue color
This is an italic text having arial font and blue color

In the above example, we have created a selector, .text which is used with the tags, b and i separately.

Now, on the contrary, suppose we want to have two types of paragraphs in our document. One paragraph is in bold and the other is in italics. Let's see this in the following example:

<HTML>
<HEAD>
<style type="text/css">
p.bold {font-family:arial; color:blue; font-weight:bold}
p.italic{font-family:arial; color:blue; font-style:italic}
</style>
</HEAD>

<BODY>
<p class="bold">This is a bold paragraph having arial font and blue color
</p>
<p class="italic">This is an italic paragraph having arial font and blue
color</p>
</BODY>
</HTML>

The output will be:

This is a bold paragraph having arial font and blue color

This is an italic paragraph having arial font and blue color

In this example we have created two classes, bold and italic which can be used anywhere in the document. Class selectors are used when you want to define a style that does not redefine an HTML tag entirely.

ID Selector

You can also define styles for HTML elements with the id selector. The syntax is:

# id {property:value}

Let's look at the following example:

<HTML>
<HEAD>
<style type="text/css">
#bold {font-weight:bold}
</style>
</HEAD>

<BODY>
<p ID ="bold">This is a bold paragraph</p>
</BODY>
</HTML>

The output will be:

This is a bold paragraph

ID selectors are used when you want to define a style relating to an object with a unique ID. It is mostly used with layers.

Note: Avoid starting an ID name with a number. It will create problems with Mozilla Firefox.

CSS Tutorial

CSS Selector

HTML Selector

Class Selector

ID Selector

'w3reference : Learn by examples ... Advanced to beginner's tutorials ...'