Prev
Home
Next
Menu

CSS Selectors – class and id

In this tutorial, the basic concepts of CSS selectors are described.

In CSS, the selectors are of two types — class and id. The description about each of them is given below.

 

1) class selector

With the class selector we can define different styles for the same type of HTML element. This means that we would like to have three types of paragraphs in our web page: the first paragraph is having red color, the second paragraph is having green color, and the third one is having blue color. It is defined as a ‘ • ‘ (i.e. a dot). Here is how we can do it with styles:

<html>
<head>
<style>
   p.first { color: red }
   p.second { color: green }
   p.third { color: blue }
</style>
</head>
<body>
<h2>CSS Classes</h2>
<p class="first">This is the first paragraph</p>
<p class="second">This is the second paragraph</p>
<p class="third">This is the third paragraph</p>
</body>
</html>

Output:

 

We can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class. In the example below, all HTML elements with class=”center” will be center-aligned:

.center { text-align: center }

 

In the code snippet below both the h1 element and the p element is having class=”center“. This means that both elements will follow the rules in the “.center” selector:  

<h1 class=”center“>This heading will be center-aligned</h1>

<p class=”center“>This paragraph will also be center-aligned.</p>

 

2) id selector

We can also define styles for HTML elements with the id selector. It is defined as a ‘ # ‘.  See the example below.

<html>
<head>
<style>
  p#exId1 { 
    color: red; 
    font-family: times;
    font-size: 150%;
  } 
  p#exId2 { 
    color: blue; 
    margin: 20px;
    border: 2px solid green;
    text-transform: uppercase; 
  } 
</style>
</head>
<body>
<p id="exId1">This is the 1st paragraph.</p>
<p id="exId2">This is the 2nd paragraph.</p>
</body>
</html>

Output:

 

We can also omit the tag name in the id selector to define a style that will be used by all HTML elements. This concept is quite similar to that of class selector. The style rule below will match the element that has an id attribute with a value of “green“:

#green {  color: green;  text-align: center;  }

 

The style rule below will match with the h2 and p elements those are having the id value of “green“:

<h2 id=”green“>This is a heading</h2>

<p id=”green“>This is a paragraph.</p>

 

class vs. id

The difference between “id” and “class” is that an id selector can be called only once in a web page, while a class selector can be called multiple times in a web page.

The second difference is that id can be called by JavaScript’s getElementByID() method. This method is related to HTML DOM.

There is no hard rule on when to use id and when to use class. Therefore my suggestion is to use class as much as possible for maximum flexibility, with the only exception being when we want to use JavaScript’s getElementByID() method, in which case we need to use id.

 

N.B. The names of “class” and “id” selectors are both case sensitive. For example, .classone and .ClassOne are two different classes.

 

Prev
Home
Next