Categories

 

Tools

 

Partners

 

   Thinkhost Hosting

   Web Hosting

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

The generic span element should probably be your last resort. It’s often better to use an em, strong, code, or other logical style, anything that has more intrinsic meaning. I’ll often even use a b or an i before using a span; at least there’s less to type that way.

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.)

See Also