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
  • block - block elements take up the full width of the Web page (by default) and have a line break above and below. Examples:
    • <h1></h1>
    • <p></p>
    • <div></div>
  • inline - inline elements take up only as much width as necessary and do not add line breaks. Examples:
    • <span></span>
    • <a></a>

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 >
Re-Vision.com

projects:
Simple Truths (and Complex Lies)

The Built World
Semblance Portrait Project
Back to Square One
Changing Chicago
Chicago's Reliance Building
US
Along the Mississippi River
The Work of Antoni Gaudí
Graffiti

places:
Morocco 2023
Beecher, Illinois
Iceland 2017
Cuba 2015
Providence, Rhode Island
Greece 2013
Eastern Europe 2013
Israel 2010
Paris, France
Puebla, Mexico 2009
Puerto Rico 2009
Barcelona 2007
Rome, Italy 2006

archive:
Graphics, sounds, and other ancient
items from the dawn of the Web.


FWIW:
Biography

©
Jay Boersma