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.
- 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:
As with div tags, to give span tags their own style, you can identify them with class or id attributes:
- class - is used when more than one span element will have the same styles applied to it
- id - is used when a single span will have styles unique to it
Here's how it looks with a class attribute:
.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:
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 ".":
#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:
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.
