Up to this point, styles have been applied to individual page elements by associating style
sheets with their tags. This technique works fine in most cases; however, there are styling
situations not covered by this method.
For example, within a paragraph you might wish to apply a style to a particular letter, word,
phrase, or other text string located inside the paragraph. Applying a style sheet to the
<p> tag does not give you the ability to select which “substring”
of the paragraph to style. All characters in the paragraph receive the same styling.
Another example is a consecutive group of paragraphs to which you want to apply the same style.
You can, of course, duplicate and apply the same in-line style sheet individually to the separate
<p> tags to give them the same appearance. However, it would be
more convenient to be able to apply the same style to the paragraphs as a group, without having
to style them individually.
For these and other styling situations involving strings of text less than a paragraph in length
and blocks of text longer than a paragraph, XHTML provides “marker” tags to identify and isolate
particular sections or subsections of a page to which styling can be applied.
The <span> Tag
A <span> tag is a container tag placed around text for
the purpose of identifying a string of characters to which this tag’s style sheet is applied.
The tag can enclose a single letter, a word, a phrase, a sentence, or any other substring of
text for the purpose of identifying it for application of styling. Normally, the tag encloses
a string of text inside a paragraph-level container.
In the following paragraph the words "RED" and "BLUE" are isolated with
<span> tags as words to which these tags apply their color properties. When this
paragraph is displayed in the browser, the two words are rendered in their associated colors.
<p>This paragraph contains the word <span style="color:red">RED
is surrounded by a <span> tag to apply this color property to the word. In
this sentence the word <span style="color:blue">BLUE</span> is given that
A <span> tag is nothing more than a marker to isolate text
to which its style sheet can be applied. It has no built-in formatting characteristics of its
own. It does not force a line break nor does it produce a blank space. Therefore, it can be
used in-line, within the normal flow of text simply to style its enclosed content. Of course,
the style that is applied must be appropriate to the enclosed text string. It would not be
appropriate, for instance, to apply the text-indent property to
indent the "first line" of a single word enclosed by a <span>
The <div> Tag
A <div> (division) tag is a similar type of marker to the
<span> tag. Its purpose is to enclose and designate a collection
of page elements for application of styling to the enclosed set. The <div>
tag is called a "block-level" tag because it encloses other tags and, importantly, it
forces a line break on the page. Because it creates a line break before and after the content it
encloses, it cannot appear inside other tags as can the <span> tag.
Use of the <div> tag is illustrated by the following two
paragraphs. Both paragraphs are styled the same. However, instead of coding these styles as
in-line style sheets within both <p> tags, the paragraphs are
surrounded by a <div> tag which applies these styles. The
paragraphs inherit the styles of the enclosing <div> tag.
<div style="text-indent:25px; margin-left:30px; margin-right:30px;
<p>This paragraph has first-line indention of 25 pixels. It has both left
and right margins of 30 pixel and its alignment is justfied between the two
<p>This paragraph also has first-line indention of 25 pixels. It has both
left and right margins of 30 pixel and its alignment is justfied between the
margins. Both paragraphs are styled with an enclosing <div> tag to apply
these styles to both paragraphs.</p>
The <div> tag does not have any visible formatting
characteristics of its own other than the fact that it creates a line break before and after
its enclosed content. These line breaks are not evident in the above example since
<p> tags themselves produce their own line breaks, which
are collapsed together with that produced by the <div> tag.
Since the <div> tag, like the <span>
tag, provides great flexibility in enclosing and styling page content, there are numerious occasions
throughout these tutorials where spans and divisions are used to apply formatting to a wide
assortment page elements.