Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > CSS

  • Print
  • + Share This
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" 

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:

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

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

  • + Share This
  • 🔖 Save To Your Account