9.4 Tag-Less Styles: The <span> Tag

Up to now, we have used Cascading Style Sheets to change the appearance of content that is within a designated HTML tag. In some cases, however, you may want to alter the appearance of only a portion of a tag's contents--usually text. Designate these special segments with the <span> tag.

The <span> tag simply delimits a portion of HTML content (constrained by normal tag nesting rules, of course). Browsers treat the <span> tag as another physical- or content-based style tag. The only difference, of course, is that the default meaning of the <span> tag is to leave the text alone.

Although it may serve some other function in a future version of HTML, the <span> tag was introduced so that you can apply a style to an arbitrary section of document content, via a direct style, various style classes, or locally with an inline style. To define a style for the <span> tag, treat it like any other HTML tag:

SPAN {color: purple}
SPAN.bigger {font-size: larger}

and use it like any other style tag:

Quat harvest projections are <span class=bigger>bigger than ever</span>!

In a similar manner, the appearance of a <span> tag can be changed using an inline style:

Quat harvest projections are <span style="font-size: larger">bigger than ever</span>!

Like any other physical or content-based style tag, <span> tags can be nested and may contain other tags. The <span> tag exists only to provide style management down to the phrase level in HTML.