Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
The SPAN Tag
Sometimes, you want to apply a style to some text that doesn't otherwise fit into standard HTML categories, such as STRONG or EM. You may even want several different types of emphasis within one paragraph. The SPAN tag applies formatting that you define to small parts of text, without affecting the way the text is rendered in browsers that don't understand style sheets.
Using the SPAN tag with class selectors, you can create effects that are much more complex than using straight HTML. Suppose that you want to be able to highlight certain types of references using a combination of a different font, bold weight, and a different color. Without style sheets, you may decide that it's just too much trouble to put this in each instance:
<FONT FACE="Footlight MT Light" SIZE="+1" COLOR="#6699CC"><STRONG> text </STRONG></FONT>
With a style sheet, you can specify all that stuff just once:
.high {
font-family: Lucida Handwriting;
font-size: 16px;
color: #6699CC;
font-weight: bold;
}
And then, each time you want to use this formatting, you just use the SPAN tag (see Figure 8). The SPAN tag doesn't do anything at all by itself. Its only purpose is to apply a style to a span of text. Here's an example:
){kind=link}
<P CLASS="first"> Because the style of art throughout the catalog is consistent, any of the designs may be used together side by side, or superimposed, making the possibilities for <SPAN CLASS="high"> personal expression</SPAN> boundless. <P> You will find designs in our catalog which cover a vast array of categories, from floral images to humor, holiday <SPAN CLASS="high">stamp</SPAN>s, border designs and decorative imagery, for all around use. You, as the <SPAN CLASS="high">stamp</SPAN>ing artist will be the one to create <SPAN CLASS="high">original art</SPAN> works from these designs, and nothing pleasures us more than to see the beautiful and original ways in which our designs are being used. <P> Throughout the catalog you will find some helpful hints on some of the uses and techniques to enjoy your <SPAN CLASS="high">stamp</SPAN>s, but we're sure that you as the <SPAN CLASS="high">stamp</SPAN>ing <SPAN CLASS="high">artist</SPAN> can teach us a thing or two! One thing for certain, the possibilities are endless!
Figure 8 css7.html: Simple highlighting with SPAN and CLASS.