Up to this point, embedded style sheets have been suggested to apply page-wide styles to tags. Where particular tags need to take on special styles different from these page-wide styles, in-line style sheets are used to modify the styling.

Where practical, though, embedded style sheets should always be the preferred styling method, even for application of special one-time-only styling. Embedded style sheets localize style settings within the single <style> section of the page, making them more accessible than if scattered across multiple in-line style sheets. Also, embedded style sheets can be easily promoted to linked style sheets for site-wide application. Here we consider some ways to apply special styling to page elements by using embedded style declarations rather than in-line style sheets.

Simple Selectors

By way of review, most styling can be done with individual tag selectors and their associated style declarations. These simple selectors declare default tag styling for an entire page.

General style sheet format for a simple selector.

Any number of selectors can be combined with any number of style properties within an embedded style sheet. For example, the following simple selectors set page-wide formatting for page margins, headings, paragraphs, and blockquotes. Anywhere one of these tags is encountered on the page, the browser applies the associated style.

<style>
  body       {margin:20px; color:black}
  h1         {color:blue; text-align:center}
  h2         {color:blue; text-align:left}  
  p          {text-align:justify; text-indent:25px}
  blockquote {margin-left:20px; margin-right:20px; text-align:justify}
</style>

There are likely to be occasions, though, where these page-wide styles need to be modified for particular tags. For example, one or more of the paragraphs in the document may require different alignment or indention, or a particular heading may use a different style to emphasize it differently from other headings, or one particular blockquote may require different margins or text alignment. Although you can use in-line style sheets to override these embedded style declarations, there are ways to designate exceptional styling within the embedded style sheet itself.

ID Selectors

One way to apply special styles to individual page elements is to provide the element with a unique identifier. Then, within the embedded style sheet, special styling can be applied only to the element with that identifier.

Assume, for instance, that common paragraph indention and alignment are adopted for an entire Web page with the embedded style sheet declaration shown above. That is, all paragraphs have 25-pixel indentions and are text justified. Now assume that one particular paragraph on the page requires different styling. This single paragraph needs to be offset from surrounding paragraphs with 25-pixel left and right margins and it should not have first-line indention.

The first step in styling this paragraph is to assign it an id value. An id is a unique identifier for the tag. It can be any name you choose using combinations of alphabetic and numeric characters. In the following code, id="Special" is assigned to the paragraph requiring special formatting.

<p id="Special">This paragraph requires special styling different from regular
paragraphs on the page. It should be offset 25 pixels from both margins and not 
have first-line indention.</p>

With an id assigned to this <p> tag it can be designated for special styling by using an ID selector in the embedded style sheet.

General style sheet format for ID selector.

Styling is applied to the selector, but only to the selector with the designated (#) id value. Thus, an ID selector can be added to the above style sheet to format the special paragraph differently from regular paragraphs:

<style>
  body       {margin:20px; color:black}
  h1         {color:blue; text-align:center}
  h2         {color:blue; text-align:left}  
  p          {text-align:justify; text-indent:25px}
  p#Special  {text-indent:0px; margin-left:25px; margin-right:25px}
  blockquote {margin-left:20px; margin-right:20px; text-align:justify}
</style>

The syntax p#Special refers to the <p> tag with the id value (#) of "Special". The standard 25-pixel first-line indention given by the p simple selector is reset to 0 pixels for this particular paragraph. Also, the paragraph is given left and right margin settings different from normal paragraphs Its text remains justified, however, as inherited from standard paragraph styling given through the p selector. In other words, all paragraphs inherit the styling given by the p simple selector unless these styles are modified or supplemented by p#id selectors.

This type of tag identification and styling can be used for any tag. Just assign a unique id to the tag, and differentiate it from other tags of the same type by adding this #id value to the tag selector.

You should not style <span> or <div> tags with simple selectors in an embedded style sheet. These tags often appear multiple times on a page to isolate and style different portions of text and different collections of page elements, all of which usually require different stylings. Thus, you cannot associate one particular style with these tags without eliminating their flexibility in styling other spanned text or divisions that require different stylings. By using ID selectors with these tags, however, you can apply different styles to different <span> and <div> tags without commiting them to one particular style.

In the following example, two paragraphs are given the same style by enclosing them inside a <div> to which special styling is applied. The style effects only this single division through its unique ID selector. Styling of other divisions is not affected since they do not have this id value. At the same time, two <span> tags take on their unique stylings through their unique id values, leaving unaffected any other stylings of spanned text.

<style>
  div#Justify {text-align:justify}
  span#Red    {color:red}
  span#Blue   {color:blue}
</style>

<div id="Justify">
<p>This paragraph is styled by inheriting the styling of its container 
division which is formatted with the <span id="Red">"Justify"</span> style.</p>

<p>This paragraph is also styled by inheriting the styling of its container 
division. In addition, <span id="Blue">"Blue"</span> styling is applied to 
one of its words.</p>
</div>

Although the practice is advised against under XHTML standards, the same id can be assigned to more than one tag which share the same style. For example, the following two paragraphs are assigned id="Special" and both inherit this particular paragraph style.

<style>
  p#Special {text-indent:0px; margin-left:25px; margin-right:25px}
</style>

<p id="Special"&gt;This paragraph is styled through application of the 
"Special" style to its id selector.</p>

<p id="Special">This paragraph is also styled through application of the 
"Special" style to its id selector.</p>

For even greater flexibility, an ID style does not have to be associated with a particular type of tag selector. A style sheet entry can include a "general-purpose" ID selector,

<style>
  #Special {text-align:justify}
</style>

which can be associated with any tag by assigning this id value to it. The following paragraph and blockquote receive the same styling through the same general ID selector even though they are different types of tags.

<p id="Special">This paragraph is styled by inheriting the styling of a 
general ID selector.</p>

<blockquote id="Special">This blockquoted paragraph is also styled by 
inheriting the styling of a general ID selector.</blockquote>

It is not advisable to use ID selectors as general-purpose styling techniques even though they work as such. ID selectors should be reserved for applying one-time-only unique styles to a single tag selector as given by its standard format, selector#id. Other styling methods described below are designed for creating general styles that can be applied across different and multiple tags.

Style Classes

By defining a class selector a general-purpose style can be declared for broad application to any tags needing to share the style. A class selector is defined within an embedded style sheet

General style sheet format for class selector.

Rather than naming a tag or an id in the selector, a class name is supplied, preceded by a period. This class selector can be a name of your choosing but cannot include spaces or special characters. Any combination of style properties and values are associated with the style class.

The following embedded style sheet includes a style class named .Offset. Once this class has been defined, it is assigned to any tag with the class="class" attribute. Below, the style class is applied to a paragraph by assigning it to the <p> tag. This paragraph takes on the styling of the .Offset class, in this case overriding normal styling given by the p simple selector.

<style>
  p       {margin:20px}
  .Offset {margin-left:30px; margin-right:30px}
</style>

<p class="Offset">This paragraph requires special styling different from normal
paragraphs on the page. It has left and right margins of 30 pixels./p

(Note that the class assigned in the tag does not include the period that is necessary when declaring the .class selector in the style sheet.)

A style class is a general-purpose style that can be applied to any type of tag simply by assigning the class to the tag; plus, the class can be assigned to any number of tags. Thus, any paragraphs, divisions, blockquotes, or other tag types can reflect the above styling by assigning them to the .Offset class. Of course, the tag to which the class is applied must be receptive to the particular properties and values declared for the class.

Style classes are particularly relevant to <span> and <div> tags for styling text strings and blocks of code without commiting these tags to one particular style. The tags become carriers for many different styles simply by assigning different style classes to them. The following code is an example of applying various style classes through various tags

<style>
  .Offset  {margin-left:25px; margin-right:25px; text-align:justify}
  .Red     {color:red}
  .Blue    {color:blue}
  .Rule    {height:2px; width:75%; text-align:center; color:green}
</style>

<hr class="Rule"/>

<div class="Offset">

  <p>Here is a paragraph that takes on the formatting given for its enclosing 
  division. Within this paragraph the word <span class="Red">RED</span> has its 
  own style class applied.</p>
	
  <p>This paragraph also is styled by its enclosing division. Within this 
  paragraph the word <span class="Blue">BLUE</span> has its own style class
  applied.</p>

</div>

<hr class="Rule"/>

Both of the above paragraphs are styled by enclosing them inside a division to which the .Offset style class is assigned. Thus, the paragraphs inherit division styling, which in this case offsets both paragraphs from the page margins and justifies their text. This technique has the same effect as declaring an ID selector for division styling (div#Offset) and applying the style through this ID selector (<div id="Offset">). However, the .Offset class is more flexible since it can be associated with other tags besides divisions. Any tags on the page can take on the .Offset style by assigning them to this class.

Within each paragraph are individual words that take on color styling. These words are enclosed inside <span> tags through which colors are applied by assigning the tags to either the .Blue or .Orange style class. Incidentally, if any other sections of the page -- a paragraph, a heading, a blockquote, whatever -- need to be displayed in one of these colors, then their enclosing tags can be assigned these same style classes. Any normal stylings of these tags are supplemented with assigned colors.

Both horizontal rules are 75% of the width of the page, 2 pixels in height, green, and centered. The choice is made to define a style class to represent this styling and to assign all <hr/> tags to this class. Of course, these styles could be defined for the simple hr selector without using a class. However, the choice is made to create classes for all stylings and to assign tags to these classes as needs dictate. It would not be unusual to find an embedded style sheet composed exclusively of style classes that are selectively applied to all varieties of tags requiring those styles.

Styling Strategies

By now you are probably confused. You have a choice of using linked style sheets, embedded style sheets, in-line style sheets, or some combination thereof. When using linked or embedded style sheets you have a choice of using simple tag selectors, ID selectors, or style classes. Later in this tutorial additional styling options are presented. What’s a person to do about all these options?

Given the various approaches to styling, a reasonable strategy to follow is outlined below. You may developed your own preferred approach as you become more familiar with style sheets, but the following outline is a good beginning to sort out the options.

• Use an embedded style sheet as the primary styling method. This permits isolation of styles within a single section of the page, making it easy to locate and change styles and also to promote embedded styles to a linked style sheet for site-wide application.



• Within the embedded style sheet use simple tag selectors to apply common, page-wide styling to all tags of the same type.



• Define style classes to apply styling through general-purpose tags such as <span> and <div> tags. Also, use style classes when two or more tags require formatting different from or supplementary to that given by their simple tag selectors.



• For single tags requiring unique styling assign an id value to the tag and apply its styling through an ID selector in the embedded style sheet.



• Use an in-line style sheet where one-time styling is required and there is overriding convenience in having the style sheet coded inside the tag. Too many in-line style sheets are difficult to track down for changes; plus, identical in-line styles have to be changed in multiple locations, leading to possible oversight and errors.

Although preference is given to using embedded style sheets -- and by extension, linked style sheets -- these tutorials often use in-line style sheets as instructional devices to introduce and describe style properties. The assumption is, however, that in-line styles will be elevated to embedded or linked styles when pages are "put into production."

This tutorial has given you a first introduction to style sheets. There are many more style properties to come and many other variations on those introduced here. The importance of style sheets cannot be over-emphasized. With deprecation of most tag formatting attributes, style sheets have become the primary technique for arranging and displaying page content. The use of in-line, embedded, and linked style sheets is now the essence of XHTML coding.