|
CSS Tip:
Create Your Own HTML Tags
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
Do HTML rules cramp your style? Ever wish you could create your own tag what would behave just like you want? Well you can. Combine the SPAN element with CSS rules to create your own custom tags.
SPAN's Role In HTML
What does SPAN do? Nothing. That's the beauty of it. Since it has no defined display, you're free to write your own rules and apply them as you wish.
SPAN is an inline tag, which means that it's used to format small chunks of text inside another element. In contrast, a paragraph tag is a block-level element that can contain a number of inline elements like bold, italics, strong, and SPAN tags.
Refer to our August 2003 CSS Tip: Building Blocks With CSS for more information about block-level and inline elements.
Inline formatting elements have their display characteristics defined by HTML and individual browsers. That makes them relatively predictable, but you may prefer to have something a little different on your page.
Here's an example where we enclose a particular section of a paragraph, list, or header inside SPAN tags to give that section a different display style than the rest of the element:
<p>This is the beginning of the paragraph. <span>An this is the emphasized part!</span> And this is the end!</p>
Note the required opening and closing SPAN tags. But something else is needed as well: instructions on how to style the content. That's where CSS rules come in.
Add Style To Your SPANs
The most common way to apply CSS rules to SPANs is to use either a CLASS or ID selector. As we noted in our "Identify Your Page Elements" article, a CLASS can be applied to multiple page elements, while an ID should be unique to one particular element.
SPAN doesn't care which you use: they both work!
Here's the sample code from above without any style applied to the SPAN:
This is the beginning of the paragraph. And this is the emphasized part! And this is the end!
But when we apply this CSS class, it looks a lot different! Here's the CSS rule:
<style type="text/css">
.example1 {color:white; background-color:navy;
font-weight:bold; text-align:center;}
</style>
|
And here's how we apply it inside the BODY of the document.
<p>This is the beginning of the paragraph.
<span class="example1">And this is the
emphasized part!</span> And this is the
end!</p> |
It displays like this:
This is the beginning of the paragraph. And this is the emphasized part! And this is the end!
Other Cool Uses For SPAN
So now we've seen the simplest use for the SPAN element: to emphasize text inside a page element using techniques that basic HTML doesn't support. But you can have a lot of fun with it in other ways too.
- Emphasize the opening section of text: You see this in children's books all the time. The first few words of a story are emphasized with a different font, color, or size. It's different from the CSS first-line property because SPAN lets you emphasize just a few words instead of the entire line.
- Emphasize an individual's or company name. Suppose you want certain words or phrases to stand out wherever they appear in your document. For instance, you'd want to make sure everyone noticed a celebrity's endorsement of your product. Or perhaps you'd like to stress your company's name.
Just create a CSS class and apply it using a SPAN tag everywhere the name or phrase appears.
- Add the TITLE attribute to the opening SPAN tag to create a pop-up tooltip for that section. It isn't necessary to add CSS to it: you can just add information (and keywords!) to your page wherever necessary.
- b>Use JavaScript events: The SPAN tag accepts JavaScript event handlers like onMouseOver and onMouseOut. Use it to add color and emphasis to certain parts of the text. This works like the HOVER attribute, but it can be used with any page element, while HOVER is limited to links.
You can also use it to add/change background images on the selected section - but keep page file size in mind. Always check your page load time with HTML Toolbox and optimize your images using GIFBot, our free image optimization tool.
|
We've created a SPAN example page that uses these techniques. You can see the HTML and CSS code required to create these effects by viewing the source code of the example page.
Now go have some fun with your own pages, but be careful not to overuse SPAN. If you can get the same effect adding a CLASS or ID attribute to your existing code, then don't clutter it up with extra SPAN tags. But when you need to include a SPAN, it's a great tool that gives you more control over your page display.
|
