8.5 Tagless Styles: The <span> Tag
Up to now, we have used
cascading style sheets to change the appearance of content 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 Delimits an arbitrary amount of text Attributes class, dir, id, lang, onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, style, title End tag </span>; never omitted Contains html_content Used in body_content |
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 is that the default meaning of the
<span> tag is to leave the text alone.
Although it is now deprecated, the <span>
tag became part of HTML so that you could apply style, display, and
event management to an arbitrary section of document content. Define
a style for the <span> tag as you would any
other HTML or XHTML tag:
span {color: purple}
span.bigger {font-size: larger}
and use it like any other HTML or XHTML tag:
Quat harvest projections are <span class=bigger>bigger than ever</span>!
Similarly, apply an inline style to the
<span> tag to modify the appearance of its
contents:
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 also supports the many common
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] [Section 3.6.1.2] [Section 4.1.1.4] [Section 4.1.1.4] [Section 8.1.1] [Section 8.3] [Section 12.3.3]