SPAN What Does It Do
Nothing! Not a darn thing. But that's the beauty of it. Above all, remember this about HTML 4.01 Cascading Style Sheets (CSS) isbig. The use of one command to denote multiple points on a page is the wave of the HTML future.
If you've used CSS, you know that you've always had the ability to attach a style to a command. For instance, you could say that every time the BOLD tag is used, also make the text Arial and blue, right? You also probably know that you could stick style commands into other tags. You could put:
STYLE="font-family: courier"
...into just about any tag and the text modified by the tag would also carry the CSS effect.
But in all cases, you still had to use a tag that itself would affect the text, the image, or whatever. That's where the SPAN tag comes in so handy. It doesn't affect the text at all. It is there only to carry with it other attributes to affect the text, the image, or whatever. In fact, the text in this paragraph is surrounded by the <SPAN> and </SPAN> commands. Really. Look at the source code if you don't believe me. See? No effect.
The primary purpose of the SPAN tag is to act as a vehicle by which attributes can be implemented. Here are a couple of examples of adding CSS commands right in the SPAN tag itself.
- Affecting the Text's Background Color:
- Use This Format:<SPAN STYLE="background-color: #ffffcc">Here's What You Get</SPAN>
- Here's What You Get
- Affecting Text Color and Size:
- Use This Format:<SPAN STYLE="color: green; font-size: 10pt">Here's What You Get</SPAN>
- Here's What You Get
- Adding A Background Image to the Text:
- <SPAN STYLE="background-image: url(/img/background2.gif)">Here's What You Get</SPAN>
This is really where the SPAN tag shines. This is also how I see the command being used most around the Net today. SPAN will allow a TITLE attribute that shows up on the page when the mouse is left to sit on the text. It looks a lot like what the ALT command produces when used with an image. Take a look. Lay your pointer on the text "Here's What You Get" below.
- Adding the Title Tool Tip:
- Follow this Format:<SPAN TITLE="This is the tool tip box">Here's What You Get</SPAN>
Philip Jubb
Philip is the Editor of
philipjubb.com
and has written widely on programming and other subjects.
