Div and Span Tags
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
<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
<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
<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.)
I hope this came in useful!
Ask in the forum
if you have any suggestions or comments.
advertisment
advertisement
Host With Us: HostingHelper.co.uk From Only $5.00p/m
