Cool Stuff

The fastest way to master the basics of Adobe Photoshop

Click here to find out how

Photoshop Templates

Featured Photoshop templates - professional ready to use designs for your next project.

View all templates

CSS grouping - <span> and <div> - CSS tutorial

Learn how to compose similar elements into groups and style them all at once using the same class or id

Category: CSS tutorials - Difficulty:

Grouping elements can be done using two elements. Elements and

are what we use to group and structure an HTML document and are often used with the attributes class and id.

The Element <span>

This element is what is referred to as a neutral element as it does not add any changes to the document. However, when applied in CSS, this element can be used to affix visual appearance to certain parts of your document text.

Take this as an example:

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

The above example is a quotation by Benjamin Franklin. Say, we want to give an emphasis to the benefits of the sleeping and waking up early, which is “healthy, wealthy and wise.” To emphasize it, you want it to be in another font color, say blue. What you do is mark the benefits with the element “span” and each span is associated with a certain class. Look at the example below:

<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 will be:

span.benefit {
color:blue;
}

You can also use the selector id to add style to your span element just as long as you bear in mind that each id should be have no other similar equivalent. Remember the rule: No two id should be the same in one HTML document.

The Element <div>

While the element span is used within a block-level element, the element <div> is used to group one or more block-level elements. However, these two elements work in comparatively the same way.

I will give you an example. Let us use two lists that include information about US, the States and Capitals.

<div id="states">
<ul>
<li>Alabama</li>
<li>Alaska</li>
<li>Arizona</li>
<li>Colorado</li>
<li>Connecticut</li>
<li>Delaware</li>
</ul>
</div>

<div id="capitals">
<ul>
<li>Montgomery</li>
<li>Juneau</li>
<li>Phoeniz</li>
<li>Denver</li>
<li>Hartford</li>
<li>Dover</li>
</ul>
</div>

In CSS, we can apply the grouping without changing anything. This is done by coding:

#states {
background:blue;
}

#capitals {
background:red;
}

The examples provided using the two elements <div> and <span> are just simple. Nevertheless, you have to know that these elements can do so much; more advanced and more exciting.

You are still about to learn more so, just go to the next lesson and prepare yourself for more.