Div and Span
As we’ve seen in previous sections, using CSS is straightforward. Provide a selector (”select all p elements”), provide a rule (”make their text red”), and we’re done. Both the selectors and the rules can be much more complicated, but this is the core of it.
Let’s take a look at another component of our style sheet toolbox: the “generic” elements, div and span. These elements are designed to help you mark off arbitrary chunks of HTML for styling.
The span Element
The span element is the generic inline element. Let’s see this element in action:
Example 3.11. Empty span
<p> Towards thee I roll, thou all-destroying but unconquering whale; <span>to the last I grapple with thee; from hell's heart I stab at thee; for hate's sake I spit my last breath at thee.</span> Sink all coffins and all hearses to one common pool! and since neither can be mine, let me then tow to pieces, while still chasing thee, though tied to thee, thou damned whale! Thus, I give up the spear! </p>
If you view the results, it looks like… the span didn’t do anything. And that’s the point: by default, the span element isn’t supposed to do anything. It serves as a placeholder or marking point for beginning and ending a style.
Let’s make a minor change. We’ll create a class for our span element and apply that class to our selection from Moby-Dick.
Example 3.12. Red span
<html>
<head>
<title>Moby-Dick</title>
<style type="text/css">
span.khan {color: #ff0000}
</style>
</head>
<body>
<p>
Towards thee I roll, thou all-destroying but
unconquering whale;
<span class="khan">to the last I
grapple with thee; from hell's heart I stab at
thee; for hate's sake I spit my last breath at thee.
</span> Sink all coffins and all
hearses to one common pool! and since neither
can be mine, let me then tow to pieces, while
still chasing thee, though tied to thee, thou
damned whale! Thus, I give up the spear!
</p>
</body>
</html>
Now we have an inline element, <span class="khan">, that can make any inline selection of HTML red.
Tip
Before using the generic span element, try using an em, strong, code, or other logical style. If possible, it's better to start with an element that has some intrinsic meaning.
The div Element
The div element is the generic block element. You can use div to apply styles to large sections of HTML, such as multiple paragraphs. Like all block elements, the div element defines a “box” of HTML.
Example 3.13. Red div
<html>
<head>
<title>Product Brochure</title>
<style type="text/css">
div.important {color: #ff0000}
</style>
</head>
<body>
<p>
Congratulations on the purchase of your sword!
Using a sword is fun and easy. Just be
sure to follow these important safety tips.
</p>
<div class="important">
<p>
<em>Never</em> hold your sword by the pointy end.
</p>
<p>
<em>Always</em> be sure to stick the pointy end
into the other guy before he does the same to you.
</p>
</div>
<p>
And remember, if you or your surviving kinsfolk are
not fully satisfied, we have a money-back guarantee!
</body>
</html>
The div element applies the style to the second and third paragraphs. Note that even though the div element is a “block” element, it does not create extra line breaks between paragraphs 1 and 2 or paragraphs 3 and 4. However, if we had tried to insert the div inside one of the paragraphs, we would have created a new text block. (Try it.)