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</span> that 
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 
color.</p> 

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> tag.

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; 
text-align:justify">

  <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 
  margins.</p>

  <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>
	
</div>

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.