Span tag
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 |
|||||
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 |
|||||
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 |
|||||
All times are GMT - 8 Hours
|