css: style an element with the span tag
The span tag is a great, and often underutilized way to easily change the look and feel of virtually any aspect of your web site. Here’s a simple scenario: Let’s say you have a div that looks like this:
We named our div “awesomediv” for this example (code below).
Here’s the HTML:
<div class="awesomediv">Synergistically enhance sticky data through excellent vortals. Seamlessly maximize resource maximizing convergence whereas low-risk high-yield testing procedures. Seamlessly evolve impactful total linkage before enterprise methodologies.</div>And the CSS:
.awesomediv{background-color:#36c;border:3px solid #039;padding:10px;width:460px;font-size:14px;text-align:left;color:#9cf;}
It’s okay, but it’s boring. What if you want to make part of that content stand out, but you don’t want to insert a bunch of inline css? You also don’t want to create a new Class or ID for the style. What do you do?
The Answer.
First, wrap the sentence in a span tag:
<div class="awesomediv">Synergistically enhance sticky data through excellent vortals. <span>Seamlessly maximize resource maximizing convergence whereas low-risk high-yield testing procedures.</span> Seamlessly evolve impactful total linkage before enterprise methodologies.</div>
Next, simply define that span tag within your stylesheet. Like this:
.awesomediv span{font-style:italic;font-weight:bold;color:white;}
Here’s our end result:
Now that was easy, wasn’t it? If you want to get even more creative, you could also style other elements such as the “strong” tag to behave differently than intended – though I warn you, unbolding the strong tag may anger the CSS gods.
Here’s how it would have looked without the span tag:
<font style=”color:white”><em><strong>Seamlessly maximize resource maximizing convergence whereas low-risk high-yield testing procedures.</strong></em></font>
Compatibility:
This method has been tested in and is compatible with Internet Explorer 5.5, 6, 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).
That’s all folks!
Thank you for taking the time to read one of our articles. If you still find yourself stuck, we’d be happy to lend a hand. Simply leave us a comment below, and we’ll do our best to help you out. Found something that we’ve missed? We’d love to hear it.
Tags: bold, css, enhance content with span, html, span tag
January 7th, 2010 at 8:53 pm
I disagree with this method. Semantic tags are always preferable, and since the effect in question is to emphasize text, the appropriate tag – em – should be styled inside the DIV, not a meaningless tag like span.
It's bad to think of "em" and "strong" as simply the new "i" and "b". There is an important difference: i means italic, em means emphasized. Italic is the *default styling* for emphasis, but you can override it should you wish to emphasize differently (say by adding bold to emphasized phrases as well, as in this example)
Similarly, the "strong" tag is for "strong text" – essentially a different type of emphasis. Use these two tags as you will, but use them semantically – only use a span when there is no tag with the appropriate meaning.
A simple test is this: consider someone reading the raw code. Good HTML will still make perfect sense to them, since good HTML is structural and semantic. When the code-reader hits that span tag, they won't know how it looks OR what it means (maybe it's being used to hide text or to create some effect with JavaScript – they wouldn't know without going through the CSS). If they are reading and encounter an em tag instead, they may not know how you have chosen to style it, but they know that it is intended as emphasis.