13 - CSS Identification & Grouping of elements

In CSS, we can identify specific elements and group them according to our requirements. This feature helps us in applying element-specific styling i.e., applying a style to particular element and other style to other element. This is made possible using the class and id attributes. These are also called CSS Selectors.

Identification of elements is done with class and id properties.

Grouping is done with div and span properties.

Identification and grouping of elements is useful when we want to divide our web page into different sections or sub sections.

Identification

We use class or id to find or select HTML elements to apply the required styles.

The advantage of using selectors is that we can present the same element differently depending on its class or id.

Identification using class

  • We can find elements using a class name.
  • We can use the same class on multiple elements.
  • We can also use multiple classes on single element.
  • In CSS, a class name is preceded by a period (.)

An example would make you understand better,

<html>
  <head>
   <style>
    p.red {
     color: red;
    }
    p.blue {
     color: blue;
    }
    p.green{
    color: green;
    }
   </style>
  </head>
  <body>
    <p class=”red”> The Color is red. Applied class name is also Red.
    </p>
    <p class=”blue”> The Color is blue. Applied class name is also Blue.
    </p>
    <p class=”green”> The Color is Green. Applied class name is also Green.
   </p>
  </body>
</html>

As you can see from the above example, we have applied different styles for different paragraphs using the attribute “class”.

The output of the above program would be,

The ID selector

While specifying an HTML element we can assign a unique id to it. This unique id would be then used to apply styles to that particular element only.

  • An id must be unique within a page.
  • When applying styles you can use this id within style tag, preceding the id name with a hash (#).
  • Remember, an id name must not start with a number.

An example,

<html>
  <head>
   <style>
    #Cyan {
    color: cyan;
    }
   </style>
  </head>
  <body>
    <p id="cyan">An ID with name "cyan" is applied on this paragraph.
    </p>
    <p>This paragraph is not affected by the style </p>
  </body>
</html>

The output of the above program would be,

Grouping

Often, it happens that some or many elements of a HTML follow same style. Instead of writing separate code for each & element you can group the selectors. Each selector should be separated by a comma. By doing this we can also minimize the code.

For Example,

<html>
  <head>
   <style>
    h1{
     font-style: italic;
     color: Green;
    }
    ul{
     font-style: italic;
     color: Green;
    }
    p{
     font-style: italic;
     color: Green;
    }
   </style>
  </head>
  <body>
   <h1> Grouping of CSS Selectors</h1>
   <p>We can identify elements in CSS using two attributes. They are,</p>
   <ul>
    <li>Class</li>
    <li>Id</li>
    </ul>
  </body>
</html>

The code can be minimized as follows by grouping the selectors,

<html>
  <head>
   <style>
    h1,ul,p{
    font-style: italic;
    color: Green;
    }
   </style>
  </head>
  <body>
   <h1> Grouping of CSS Selectors</h1>
   <p>We can identify elements in CSS using two attributes. They are,</p>
   <ul>
    <li>Class</li>
    <li>Id</li>
   </ul>
  </body>
</html>

The output of the above two programs would be same.

Output:

Grouping of Elements using div and span

The attributes class and id are often used together with span and div to organize the structure of a web page.

Using Span

  • A part of text can be finely formatted using <span> tag.
  • Span always works at inline level i.e., we can use span to group inline elements only.
  • Each part of a text can be specifically styled using span.

Let’s see, how we can do it with the help of an example.

<p>A British family was shocked to receive a text from their dead grandmother, who had been buried with her phone three years earlier. Lesley Emerson died aged 59 in 2011, and was buried with her mobile phone. Her grand daughter Sheri, 22, was stunned last week to get a reply reading “I’m watching over you.”</p>

Now, the above text can be changed formatted effectively by adding styles to different parts of text.

<html>
  <head>
   <style>
    span.horror
    {
     color: Green;
     font-style:italic;
    }
    span.horrifying
    {
     color:red;
     font-style: bold;
     font-size: 25pt;
     font-style:italic;
    }
   </style>
  </head>
  <body>
    <p>A British family was shocked to receive a text from their <span class=”horror”>dead grandmother</span>, who had been buried with her phone   three years earlier. Lesley Emerson died aged 59 in 2011, and was buried with her mobile phone. Her grand daughter Sheri, 22, was stunned last week to get a reply reading<span class=”horrifying”>dead grandmother</span> “I’m watching over you.”</p>
   </body>
</html>

The output of the above program would be,

Grouping with div

In HTML, we divide most of the web page into separate sections and what is the point to be noted is that, we keep the formatting of every section different(almost in all cases). This also means that elements of a section of web page follow same style.

We already know that, div is used to divide the web page into sections. So, now what we are interested in is how to apply a style to the divided sections.

An example,

<html>
  <head>
   <style>
    #n1
    {
     background-color: blue;
     font-weight: bold;
     font-size:16pt;
    }
    #n2
    {
     background-color: orange;
     font-size: 11 pt;
    }
   </style>
  </head>
  <body>
    <div id=”n1”>Grouping with DIV</div>
    <div id=”n2”> We are learning the technique of grouping elements using div and how to apply styles to different sections of an HTML page.</div>
  </body>
</html>

The output of the above program would be,

In this chapter of tutorial, you have learnt all the concepts of grouping and Identifying elements in CSS. Do more practice, create your own examples to make your learning experience better.

Like us on Facebook