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 TagThe <span> tag is our generic inline tag. Let's see this tag in action:
|
<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.
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:
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 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.
| <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:
Paragraph 1.
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!
More HTML and CSS: 
