Table of Contents
Div and Span
As we've seen in previous sections, using
CSS is
straightforward. Provide a selector ("select all <p> tags"),
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.
However, what if we don't want to use the crude instrument of styling an
entire paragraph? How do we mark off arbitrary sections of
HTML for styling? Let's take a look at another component of our
style sheet toolbox: the "generic" tags,
<div> and <span>.
The Span Tag
The <span> tag is our generic inline tag.
Let's see this tag in action:
Empty Span Tag
(source)
<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>
The results are not so impressive.
Empty Span Tag (Results)
Towards thee I roll, thou all-destroying but unconquering whale; 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. 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!
And that's the point: the <span> tag isn't supposed to
be impressive. By default, it does nothing; 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> tag and apply that class to our selection from
Moby-Dick.
Red Span Tag
(source)
<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>
We've created an inline tag that makes any given selection of HTML red:
Red Span Tag (Results)
Towards thee I roll, thou all-destroying but unconquering whale; 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. 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!
The Div Tag
The <div> tag is the generic block tag.
You can use the <div> tag to apply styles to
large sections of HTML, such as multiple paragraphs. Like all block tags,
the <div> tag defines a "box" of HTML.
Red Div Tag
(source)
<html>
<head>
<title>Important Paragraphs</title>
<style type="text/css">
<!--
div.important {color: #ff0000}
-->
</style>
</head>
<body>
<p>
Paragraph 1.
</p>
<div class="important">
<p>
Paragraph 2!
</p>
<p>
Paragraph 3!!
</p>
</div>
<p>
Paragraph 4.
</p>
</body>
</html>
The <div> tag applies the style to the second and third
paragraphs, as expected:
Red Div Tag (Results)
Paragraph 1.
Paragraph 2!
Paragraph 3!!
Paragraph 4.
Note that even though the <div> tag is
a "block" tag, 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> tag inside one of the
paragraphs, we would have created a new text block. (Try it.)
