Earlier in our CSS discussions, I mentioned that we can apply a style to just a word or a phrase. The span tag is an inline element, so it should be used to apply a style on a very small scale, no larger than a sentence or so.
Span is an HTML container tag, but it works with the CSS attributes: style, class or id. It opens with <span>, closes with </span>, and has some text in between.
Span form:
<span>modified text</span>
<span style="property:value">text</span>
<span class="name">text</span>
<span id="name">text</span>
Let's see a complete example. One use for span is to replace the font tag, which is denigrated in the strict versions of HTML 4.01 and XHTML.
In the last lesson, I had some large, bold blue light blue text. I made a class for this effect and I applied it to a paragraph. Now we'll use it for just a phrase.
In straight html, I would use the font and bold tags to acheive this effect.
Code:
<p>
This paragraph has some words that are <font size="6" color="6699ff"><b>large, bold and light blue</b></font>.
</p>
This paragraph has some words that are large, bold and light blue.
With CSS I use my class as an attribute in the span tag.
Code
<p>
This paragraph has some words that are <span class="lbblue">large, bold and light blue</span>.
</p>
This paragraph has some words that are large, bold and light blue.
Use the span element on your sampler page. Post your work.
Our next lesson will be on background images.
Happy coding!
Gnubee
