Book HomeHTML & XHTML: The Definitive GuideSearch this book

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

<span>

Function:

Delimit arbitrary amount of text

Attributes:

CLASS

ONKEYUP

DIR

ONMOUSEDOWN

ID

ONMOUSEMOVE

LANG

ONMOUSEOUT

ONCLICK

ONMOUSEOVER

ONDBLCLICK

ONMOUSEUP

ONKEYDOWN

STYLE

ONKEYPRESS

TITLE

End tag:

</span>; never omitted

Contains:

html_content

Used in:

body_content

The <span> tag simply delimits a portion of 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 style, display, and event management to an arbitrary section of document content. Display and event management are addressed later; 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.

Although deprecated, the <span> tag also supports the standard tag attributes. The style and class attributes, of course, let you control the display style; the id and title tag attributes let you uniquely label its contents; the dir and lang attributes let you specify its native language; and the many on-event attributes let you react to user-initiated mouse and keyboard actions on the contents. Not all are implemented by the currently popular browsers for this tag or for many others. [ Section 3.6.1.1, "The dir attribute" Section 3.6.1.2, "The lang attribute" Section 4.1.1.4, "The id attribute" Section 4.1.1.5, "The title attribute" Section 8.1.1, "Inline Styles: The style Attribute" Section 8.3, "Style Classes" Section 12.3.3, "JavaScript Event Handlers"]



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.