DIV and SPAN

Before we discuss the advanced selectors, we must talk about two HTML elements. DIV (division) and SPAN (a span of words) have been added to HTML partly to support style sheets. We delayed describing them until now because they are mostly used in combination with the CLASS attribute.

The CLASS attribute is a powerful feature of CSS. Using it, you can, in effect, create new elements in HTML. Creating new elements through the CLASS attribute is much easier than convincing browser vendors and maintainers of the HTML specification that a new tag is needed and beneficial for everyone.

By using the DIV and SPAN elements, you can create your own elements. The reason there are two elements for this is that DIV is a block-level element, while SPAN is inline. For example, if you are a poet, you have no way to mark your products as poems in HTML. For this, you would like to have a new POEM tag. It's unlikely that POEM will become an HTML element in the near future, but the DIV element, in combination with the CLASS attribute, offers you an alternative:

 <DIV CLASS=POEM>   Roses are red, <BR>   violets are blue, <BR>   if you're into poetry, <BR>   DIV is for you! </DIV>

In this way, you can preserve semantics (the fact that the previous text is a poem) through the use of the DIV element. In the style sheet, you can set a certain style for the "poem" element:

 DIV.POEM { font-family: cursive }

Using the SPAN element, you can make new inline elements:

 <DIV CLASS=POEM>   <SPAN CLASS=FLOWER>Roses</SPAN> are red, <BR>   <SPAN CLASS=FLOWER>violets</SPAN are blue,<BR>   if you're into poetry, <BR>   DIV is for you! </DIV>

The new "flower" element can be addressed in the style sheet:

 SPAN.FLOWER { font-family: fantasy }

The complete HTML example thus becomes as follows:

 <HTML>   <TITLE>A poem</TITLE>   <STYLE TYPE="text/css">     DIV.POEM { font-family: cursive }     SPAN.FLOWER { font-family: fantasy }   </STYLE>   <BODY>     <DIV CLASS=POEM>       <SPAN CLASS=FLOWER>Roses</SPAN> are red, <BR>       <SPAN CLASS=FLOWER>violets</SPAN are blue, <BR>       if you're into poetry, <BR>       DIV is for you!     </DIV>   </BODY> </HTML>

This code can be displayed as shown in Figure 4.14.

DIV and SPAN

DIV and SPAN

Figure 4.14. The effect of the "poem" and "flower" elements.