Webwork
/
The Span Tag
<span></span>

Like the div tag, the span tag, in conjunction with CSS is used to determine the style of web page content but the span tag is for inline elements.

Two categories of CSS Elements

Inline elements can go inside of block elements but block elements cannot go inside of inline elements.

This is ok:
<div><a href="somewhere.html">Go somewhere.</a></div>

This is not:
<a href="somewhere.html"><div>Go somewhere.</div></a>

The span tag is most often used to style individual words or groups of words:

Source:
The ghost of electricity howls in the bones of her face.
Web page:
The ghost of electricity howls in the bones of her face.
The <span style="color: #f00">ghost of electricity</span> howls in the bones of her face.
The ghost of electricity howls in the bones of her face.

As with div tags, to give span tags their own style, you can identify them with class or id attributes:

Here's how it looks with a class attribute:

Source:
<style type="text/css">

.letscallthisredtext {
color: #f00;
}

</style>

Above goes in head of doc. The "." in front of letscallthisredtext tells the browser that it is looking at a classname. Below goes in body:

The <span class="letscallthisredtext">ghost of electricity</span> howls in the bones of her face.
Web page:
The ghost of electricity howls in the bones of her face.

Any span tag that you give a classname of "letscallthisredtext" will have the letscallthisredtext style applied to it. You can make up whatever names you want for the classes but your life will be easier if you use useful descriptive classnames like "title" or "footer."

With an id attribute you'd use "#" sign rather than a ".":

Source:
<style type="text/css">

#letscallthisredtext {
color: #f00;
}

</style>

Above goes in head of doc. The "#" in front of letscallthisredtext tells the browser that it is looking at a classname. Below goes in body:

The <span class="letscallthisredtext">ghost of electricity</span> howls in the bones of her face.
Web page:
The ghost of electricity howls in the bones of her face.

As mentioned, the id attribute is used for unique occurrences and the class attribute is used for style groups that will be used mulitple times.

Previous | Webwork Table of Contents | Next >
photographs:

Semblance Portrait Project
The Built World
Greece
Hungary/Czech Republic
Poland
Graffiti
Simple Truths
Israel


Paris
Puebla, Mexico
Spain
Along the Mississippi
Italy
Santa Fe
The Reliance Building
Providence
archive:

Webwork
The Web Page from Hell
The Portals Project
Transition
Insights
Internet Spelling Guide
Ape Silverback (Primate Ruminations)
Revenge of the Movie Poster
GIFs 4 Us
The Web Rules
Webpix
Backgrounds 4 Us
Webpaper
Digital Sketches
Fonts
Sounds
© Jay Boersma