Grouping of elements (span and div) IN CSS

The elements <span> and <div> are used to group and structure a document and will often be used together with the attributes class and id.

In this lesson, we will take a closer look at the use of <span> and <div> as exactly these two HTML elements are of central importance with regards to CSS.

• Grouping with <span>
• Grouping with <div>

Grouping with <span>

The element <span> is what you could call a neutral element which does not add anything to the document itself. But with CSS, <span> can be used to add visual features to specific parts of text in your documents.

An example of this could be this Benjamin Franklin quotation:

 
 <p>Early to bed and early to rise
makes a man healthy, wealthy and wise.</p>
 
 

Lets us say we want what Mr. Franklin sees as the benefits of not sleeping your day away emphasized in red. For that purpose, we can mark the benefits with <span>. Each span is then added a class, which we can define in our style sheet:

 
 <p>Early to bed and early to rise
makes a man <span class="benefit">healthy</span>,
<span class="benefit">wealthy</span>
and <span class="benefit">wise</span>.</p>
 
 

The CSS belonging to it:

 
 span.benefit {
  color:red;
 }