Lesson 8: Grouping of elements (span and div)
Ak Patel
---
he 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.
An example of this could be this Benjamin Franklin quotation:
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
The CSS belonging to it:
Of course you may also use id to add style to the
Aside from this difference, the grouping with
And in our style sheet, we can utilize the grouping in the exact same way as above:
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>
<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>
span.benefit {
color:red;
}
<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>xyz</li>
<li>xyz</li>
<li>xyz</li>
<li>111</li>
<li>123</li>
<li>123</li>
</ul>
</div>
<div id="republicans">
<ul>
<li>123</li>
<li>123</li>
<li>213</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</div>
#democrats {
background:blue;
}
#republicans {
background:red;
}