8.5. Tagless Styles: The <span> TagUp to now, we have used cascading stylesheets 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 contentsusually text. Designate these special segments with the <span> tag.
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 tagthe only difference is that the default meaning of the <span> tag is to leave the text alone. 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. [The dir attribute, 3.6.1.1] [The lang attribute, 3.6.1.2] [The id attribute, 4.1.1.4] [The title attribute, 4.1.1.5] [Inline Styles: The style Attribute, 8.1.1] [Style Classes, 8.3] [JavaScript Event Handlers, 12.3.3] |