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:

code

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.

results

Empty Span Tag

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.

code

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:

results

Red Span Tag

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.

code

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