The id and class Selectors

 

selectorsIn 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":

<div id="header">

<p>Content goes here</p>

</div>

 

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:

#header {
background-color: blue;
text-align: center;
}

 

Note: Do NOT start an ID name with a number! You cannot start an ID tag with a number like so "#101start"

 

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:

<div class="box"> content goes here </div>

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:

.box  { 
  text-align: center ;
  color: red;
}
 

You can even use both "id" and "class" selectors on the same element within your web page like so:

<div id="header" class="box" >
content goes here.
</div>

 

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.

Leave your comments

Post comment as a guest

0 / 300 Character restriction
Your text should be in between 10-300 characters
terms and condition.
  • No comments found

Get The Latest Browsers

firefoxLogo

google

News Letter

Sign up for news letter