Span tag
leah
Status: New User - Welcome
Joined: 28 Feb 2004
Posts: 3
Reply Quote
I need some explanation on the span tag. I am trying to fix some formating in the style sheet for a block of text. Can any one help here?
Back to top
jeffd
Status: Assistant
Joined: 04 Oct 2003
Posts: 594
Reply Quote
the <span> tag is an inline element styling tag, as opposed to a block level tag.

For example:
:: Code ::

<style type="text/css">
p span {
font-size:20px;
font-weight:bold;
}
</style>

then:
<p> words words words <span>words</span> words words</p>


Willl give you a paragragh where the words inside the span tag have the span styling added to the p styling, or overriding it if they mix.

Notice the syntax here:
p span means that all spans inside of a p tag will get this styling.

The other options are to make classes or id's for your span tag, it would do the same thing:
:: Code ::

<style type="text/css">
span.larger {
font-size:20px;
font-weight:bold;
}
</style>

then:
<p> words words words <span class="larger">words</span> words words</p>


If you remove the span from span.larger, like this:
.larger
you can use that class on any element you want, that can be useful, and a good way to save code and make your stylesheet neater, but it's a little harder to read.

The span tag by itself, with no CSS added to it, does exactly nothing, it's a completely empty tag until you define it, it's made to add styling to inline elements, text mainly, and can be put inside any block level tag, like div, td, p, h1 - h6.

Other inline tags are <a href=....>, <img src=....>.

While you can use span tags outside of block level tags, don't do it, it's very bad practice, and can lead to very hard to debug errors.

One exception to this might be if you had an <a href..> tag but you wanted to add some styling to it, but even in that case you should just make a class or id for that, like this: <a href="url.htm" class="special2">text</a>

The class special two would then be defined in your stylesheet, like this:

.special2 {
color: #ffee56;
size:105%;
}

a . means it's a class, a # means it's an id.

Whatever you do, don't use <font> or <center> tags, those will work but cause many maintainance problems, they were deprecated by the w3c about 5 years ago, and should never be used for any reason. Always use CSS to add styling, it's easier to take care of and gives far superior results
Back to top
MatthewHSE
Status: Contributor
Joined: 20 Jul 2004
Posts: 122
Location: Central Illinois, typically glued to a computer screen
Reply Quote
Think of the <span> tag as a sort of "flexible" <b> or <i> tag. By assigning a class or id to a span tag, you can style the text inside it using CSS.

In other words, a <span> is basically a "handle" to use for styling purposes. It typically should not be used for layout purposes; <div> is more suited to that.
Back to top
Display posts from previous:   

All times are GMT - 8 Hours