Grouping of elements (span and div) - CSS Tutorial 8

Grouping of elements (span and div)

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;
 }
 
 

The Result: 

Benjamin Franklin quotation - emphasized benefits

Early to bed and early to risemakes a man healthy, wealthy and wise.

Of course you may also use id to add style to the <span>-elements. Just as long as you remember, that you'll have to apply a unique id to each of the three <span>-elements, as you learned in the previous lesson.

Grouping with <div>

Whereas <span> is used within a block-level element as seen in the previous example, <div> is used to group one or more block-level elements.

Aside from this difference, the grouping with <div> works in more or less the same way. Let us take a look at an example with two lists of U.S. presidents divided into their political affiliations:

 
 <div id="democrats">
 <ul>
 <li>Franklin D. Roosevelt</li>
 <li>Harry S. Truman</li>
 <li>John F. Kennedy</li>
 <li>Lyndon B. Johnson</li>
 <li>Jimmy Carter</li>
 <li>Bill Clinton</li>
 </ul>
 </div>

 <div id="republicans">
 <ul>
 <li>Dwight D. Eisenhower</li>
 <li>Richard Nixon</li>
 <li>Gerald Ford</li>
 <li>Ronald Reagan</li>
 <li>George Bush</li>
 <li>George W. Bush</li>
 </ul>
 </div>
 
 

And in our style sheet, we can utilize the grouping in the exact same way as above:

 
 #democrats {
  background:blue;
 }

 #republicans {
  background:red;
 }
 
 

The Result:

U.S. presidents

• Franklin D. Roosevelt
• Harry S. Truman
• John F. Kennedy
• Lyndon B. Johnson
• Jimmy Carter
• Bill Clinton

• Dwight D. Eisenhower
• Richard Nixon
• Gerald Ford
• Ronald Reagan
• George Bush
• George W. Bush

In the examples above, we have only used <div> and <span> on very simple things such as text and background colors. Both elements have the potential to do much more advanced things. However this will not be introduced in this lesson. We will look into these later in this tutorial.

Summary

In lesson 7 and 8, you have learned about the selectors id and class and the elements span and div.

You should now be able to group and identify, more or less, all parts of a document, which is a big step in the direction of mastering CSS. In lesson 9 we will introduce you to the box model.

Browse More Articles

Tweet

Written by Unknown

Unknown is one of the Team Member of Programmer vs Hacker. He has written many articles on this website and is a patner of this website.