PC TRAINING: XHTML

XHTML

XHTML is a markup language for Web pages from theW3C(World Wide Web Consortium). XHTML combines HTMLand XML into a single format (HTML 4.0 and XML 1.0). LikeXML, XHTML can be extended with proprietary tags. Also like XML,XHTML must be coded more rigorously than HTML. Over the years,HTML coders have become sloppy, because Web browser software was originally written to tolerate many variations in HTML coding, but, with XHTML, coders must conform to the XML rules.

In one sentence we can say that XHTML is a superset of HTML, but unlike HTML it is stricter to rules and requires a document to follow XML rules.Whereas HTML is an application of SGML, a very flexible markup language, XHTML is an application of XML, a more restrictive subset of SGML.

Document Style

Applying Style

A large part of XHTML coding involves application of styling characteristics to page elements. Styling includes positioning of elements on the page along with their visual appearance as font faces, sizes, colors, and other display characteristics.

There are two basic ways to control the layout and appearance of page elements -- with tag attributes and through style sheets. These methods are described briefly here and are elaborated and illustrated throughout the tutorial.

Attributes

Formatting styles can be applied through attributes coded within XHTML tags. Particular tags have particular attributes that are specific to them and which control the appearance of whatever page content they contain. As a quick example a horizontal rule is displayed across the page wherever the <hr/> tag is coded. This tag produces the following line often used to separate sections of content on the page.

Default horizontal rule

The above line is the default display of the tag. It can, though, take on a different appearance by coding attributes inside the tag. The size attribute controls the depth of the line; the width attribute gives its length; the color attribute sets its color, and the align attribute specifies its horizontal position on the line (to the left of the page, to the right of the page, or centered on the page).

Tag attributes are coded in the general format attribute="value", naming the attribute and supplying a quoted value for its setting. Below, for example, is an <hr/> tag coded with four attributes to control its displayed appearance as shown in Figure.

Red horizontal rule 50% of the width of the Web page

The line is 10 pixels in height (size="10"), 50% of the width of the browser window (width="50%"), red in color (color="red"), and centered horizontally on the page (align="center"). Thus, attribute values give styling characteristics to display the rule differently from its normal default style. As you proceed through this tutorial, particular attributes associated with particular tags are presented as styling options for those tags.

Under XHTML standards, however, most of the styling attributes of tags have been deprecated. This means that the attributes are still recognized in modern browsers but the recommendation is to abandon their use in favor of other styling methods. The movement is towards use of Cascading Style Sheets, rather than attributes, to apply styling to XHTML elements.

Cascading Style Sheets

The preferred way to apply styling to page elements is with Cascading Style Sheets (CSS). A style sheet is a set of style properties and accompanying style values that describe the appearance of XHTML elements to which they are applied. There are three methods of creating style sheets.

An in-line style sheet appears inside the tag to which its style declarations apply; an embedded style sheet is a separate style section of a Web page which applies its styles to all designated tags on a page; a linked style sheet is an external document containing style settings that apply to all pages that link to it.

In-line Style Sheets

An in-line style sheet is coded inside a tag to apply styling to that particular tag. It is coded in the general format shown belwo.

<tag style="property:value [; property:value] ...">

General format for an in-line style sheet.

One or more property:value pairs give style settings within a style attribute coded in the tag. Multiple style properties settings are separated from each other with semicolons; spaces can be included between the settings to help with readability.

The properties and values that can be coded for a tag depend to a large extent on the particular tag being styled. Style settings for a horizontal rule, for instance, can include height, width, color, and text-align properties, identical in effect to the deprecated size, width, color, and align attributes they replace.

These properties are coded as an in-line style sheet as shown in Figure. A style attribute appears inside the <hr/> tag and specifies a set of properties and values to apply to the tag when it is displayed in the browser.

Horizontal rule created with an in-line style sheet.

When applied as in-line style sheets, the properties and values pertain only to the tag in which they are coded. This means, for instance, that if there are several <hr/> tags on a page each would need to include the same in-line style sheet to share the same style. This may not present a problem with only a few tags; with many tags, though, it can be tedious and error-prone to code the same style sheet in all of the individual tags. A way is needed, then, to declare style settings one time and then share these settings among multiple tags.

Embedded Style Sheets

To avoid duplicate coding of in-line style sheets an embedded style sheet can be used. An embedded style sheet is defined within a <style type="text/css"> tag, normally coded in the <head> section of the page.

Within this <style> section is a list of tag names, called selectors, to which style declarations (properties and values) are assigned. Once these declarations are made, they are automatically applied to the identified tags wherever they are located on the page. The general format for the <style> section of a document is shown in Figure.

<style type="text/css">
selector {property:value [; property:value] ...}
...
</style>

General format for embedded style sheet.

A selector is a tag name (without the enclosing "<" and ">" symbols). Style properties and values for the tag are enclosed within a list of style declarations, separated by semicolons, all enclosed within a pair of braces "{ }". For example, the following code specifies style declarations for the <hr/> tag, supplying the same style settings as in the previous in-line style sheet.

<head>
<title>Embedded Style Sheet Example</title>
<style type="text/css"> hr {height:10px; width:50%; color:red; text-align:center} </style> </head>

Application of an embedded style sheet.

The hr selector is associated with four property:value declarations to style a horizontal rule. Once these styles are defined within an embedded style sheet they are applied automatically wherever the browser encounters an <hr/> tag in the document. It is not necessary to code separate in-line style sheets within each and every <hr/> tag. The tag itself carries the styling described in the embedded style sheet.

Although shown above with a single selector for the <hr/> tag, an embedded style sheet can contain any number of entries depending on how many different tags are to be styled. The example is also coded on a single line. Many Web page authors prefer to code property:value settings on separate lines for ease of reading and editing as shown in Listing.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> XHTML  Style Demo </title>
  <meta name="generator" content="jNote-iT" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">

hr {height:10px;
    width:50%;
    color:red;
    text-align:center}

</style>

 </head>

 <body>
<h2>Style Demo</h2>
  <hr />


 </body>
</html>

Alternate coding for an embedded style sheet.

Click here to view the result.

The typed format of style sheet entries does not affect their styling. Like XHTML code, style sheet code is in free format; it can be arranged in any fashion as long as the codes and punctuation are correct.

Whether to employ an embedded style sheet or multiple in-line style sheets is a matter of coding efficiencies and personal choice. Normally, if a style is applied to multiple occurences of a tag it involves less coding and fewer errors to code an embedded style sheet, declaring the style one time for sharing by all designated tags.

One the other hand, if a style is applied only once to a single tag, then there is convenience in coding an in-line style sheet for that one particular tag. Later, strategies are presented for dealing with various styling situations.

Linked Style Sheets

If your Web site contains multiple pages, and most do, then a third style sheet alternative is probably the best solution. It permits you to conveniently apply the same styles to all pages without having to duplicate in-line or embedded style sheets on each page.

A linked style sheet is a separate document containing property:value settings in the same format as an embedded style sheet. The only difference is that the linked document does not include <style> tags surrounding the entries. For example, a linked style sheet document containing specifications for the <hr/> tag described above includes the entries shown in Figure.

Stylesheet.css (document)
hr {height:10px;
width:50%;
color:red;
text-align:center}

A linked style sheet document.

This separate document is created with a text editor and saved as a standard text file, usually with the file extension .css to identify it as a style sheet document. It is common practice to save the document under the name Stylesheet.css in the same directory as the Web pages to which it applies.

A linked style sheet document contains style settings that are applicable to all pages of the Web site. Therefore, all pages that use the style sheet must "link" to it to make the styles available to those pages. This linkage occurs with a <link> tag coded in the <head> section of the page. The general format for the <link> tag is shown in Figure.

<link
  href="url"
  type="text/css"
  rel="stylesheet"
/>

General format for <link> tag.

The href (hypertext reference) attribute gives the location of the linked style sheet. If the style sheet appears in the same directory as the Web page to which it applies, then this entry is simply the name of that document. The type attribute identifies the type of document to which the link is made (always "text/css"). The rel attribute specifies the relationship of the external document to the current page (always "stylesheet").

If you have a style sheet document named Stylesheet.css that is located in the same folder as your Web page, you link the Web page to this document using the followingXHTML code.

<head>
<title>Linked Style Sheet Example</title>
<link href="Stylesheet.css" type="text/css" rel="stylesheet"/>
</head>

Linking a Web page to a linked style sheet.

Now the Web page has available to it all of the style settings included in the Stylesheet.css document. This linked style sheet can serve to replace embedded or in-line style sheets that otherwise would appear on individual Web pages. As in the case with embedded style sheets, any tags identified with selectors in a linked style sheet carry with them the declared styles.

Applying Style Sheets

It would not be uncommon to employ all three types of style sheets for a single Web page. A linked style sheet would contain styles that are common to all Web pages; an embedded style sheet would contains styles that are pertinent to the particular page; in-line style sheets would apply to individual tags for which common styling is not needed. The browser handles these multiple style sheets in the following fashion.

• First, any linked style sheets are applied to the identified tag selectors on the page.

• Second, any embedded style sheets are applied. If the same tag selectors appear in both the linked and embedded style sheets then embedded styles override or augment linked styles.

• Third, any in-line style sheets are applied. If these settings pertain to the same tags that appear in either linked or embedded style sheets, then in-line styles override or augment both linked and embedded styles.

The general principle in force is that any lower-level style setting takes precedence over an equivalent higher-level style setting. In-line style sheets take precedence over embedded style sheets, which take precedence over linked style sheets.

Assume, for example, that a linked style sheet contains the following style declarations for horizontal rules.

hr {height:1px;
width:50%;
color:red;
text-align:center}

Linked style sheet for horizontal rules.

All pages that link to this style sheet display horizontal rules in this style. Now assume that one particular page needs differently styled rules, say, ones that are blue rather than red. So, an embedded style sheet is coded on this single page in order to override the color declaration in the linked style sheet:

Embedded style sheet for horizontal rules.

All horizontal rules on this page are blue; however, they retain the height, width, and text-align properties from the linked style sheet. Tags on this page inherit the properties of the linked style sheet unless modified by the embedded style sheet.

Assume further that one particular horizontal rule on this page needs to be green and extend to the width of the page. So, an in-line style sheet is added to this particular rule.

In-line style sheet for a horizontal rule.

Green styling overrides the blue color that is inherited from the embedded style sheet; a width of 100% overrides the 50% width inherited from the linked style sheet. This particular rule, however, retains its 1 pixel height and centered alignment inherited from the linked style sheet.

Style inheritence is what makes style sheets "cascading." Linked styles are inherited by, or cascade across, all Web pages that link to them; embedded styles are inherited by, or cascade across, an entire Web page containing a <style> section; in-line styles are inherited by, or cascade across, individual tags containing in-line style sheets.

Document Style

Margins

When text is displayed in the browser window it spans from border to border with about a quarter of an inch margin surrounding the text on the page. You may have noticed these margins on Web pages created earlier.

Demonstrating Default Margin

Click here to view the file.

In some cases these margin settings work perfectly well. However, if there is a large amount of text on the page these narrow margins make for a crowded look and they increase the difficulty of reading the page. It can become tiresome plodding through line after line of text spanning from border to border.

A Web page is more inviting, is more readable, and is easier on the eyes if more white space appears around the text. In other cases, however, you may wish to reduce or remove default margin settings so that certain page elements appear even closer to the window borders.

Recall that the <body> tag encloses all page content that appears in the browser window. This tag can also be used to control margins around the borders of the page. The way to do this is to apply a style sheet to the <body> tag to adjust page margins.

Margin Style Properties

There are five style properties that can be used to set margins around page elements. These properties specify the amount of space to leave between the outside edges of the element and any surrounding content. When applied to the <body> tag they give the amount of white space to leave around displayed content on the page.

Property	:	Values
margin margin-top margin-right margin-bottom margin-left		npx n% auto

Margin properties and values.

The margin property sets the same margin width around all sides of the element; the margin-top, margin-right, margin-bottom, and margin-left properties set margins individually for each of the four sides. The auto setting causes margins to revert to their default widths when overriding previous margin settings.

Measurement Values

The margin properties, like various other style properties, require a measurement value. In most cases you are required to specify whether the measurement is in pixels (px) or as a percentage (%) of the width of the browser window. These are the two most common measurements of distance on a computer screen. If you do not specify the measurement type, then pixels are assumed.

Applying Margins with an In-Line Style Sheet

You can set margins surrounding the content on a Web page by applying a style sheet to the <body> tag. The following in-line style sheet, for example, sets a 25-pixel margin around the entire page, using the margin property and specifying 25 pixels of white space between the contents on the page and the borders of the browser window.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> XHTML Margin with Inline Style </title>
  <meta name="generator" content="jNote-iT" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>

<body style="margin:25px">

<p>This Web page displays a paragraph of text within margin settings of 
25 pixels surrounding the page. These margins are produced by an in-line
style sheet applied to the body of the document. Lines of text extend 
between and are word-wrapped within these left, right, top, and bottom 
margin settings.</p>

</body>

</html>

Setting the margins surrounding a Web page with an in-line style sheet.

Click here to view the page.

This styling produces the page display shown below . The text paragraph appears less crowded than in Figure, making it a more inviting read and making the text more readable by shortening the lines.

Web page with 25-pixel margins surrounding the page.

Applying Margins with an Embedded Style Sheet

In the above example the <body> tag includes an in-line style sheet to set margins for this particular page. You can, instead, code an embedded style sheet to produce the same results. The following <style> entry supplies a body selector along with a margin style property and value to apply to this tag.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Page Margins</title>
  <style type="text/css">
    body {margin:25px}
  </style>
</head>

<body>

<p>This Web page displays a paragraph of text within margin settings of 
25 pixels surrounding the page. These margins are produced by an embedded
style sheet applied to the body of the document. Lines of text extend 
between and are word-wrapped within these left, right, top, and bottom
margin settings.</p>

</body>

</html>

Click here to view the file.

The <body> tag, through the body selector, takes on the 25-pixel margin setting without having to code a style sheet inside the tag itself. Also, by using an embedded style sheet, style settings are isolated within a separate section of the page, making styles easy to locate and change if necessary. Your first instinct, in fact, should be to create an embedded style sheet, adjusted to in-line or linked style sheets as situations dictate.

Applying Margins with a Linked Style Sheet

If you have a Web site with multiple pages, and all pages need to share the same body margins, then a linked style sheet should be used. Place body styling in this separate document and link to it from all pages to which the style should apply.

The following code shows a Stylesheet.css document in which margin styling for the <body> tag is specified. This document appears in the same Web directory as the pages which share this style.

Stylesheet.css
body {margin:25px}

Once this style sheet document has been created any Web page can apply its margin settings by linking to it. Code to adopt this linked style sheet is shown below.

<head>
<title>Any Page</title>
<link href="someStylesheet.css" type="text/css" rel="stylesheet"/>
</head> ...

Setting the margins surrounding a Web page with a linked style sheet.

Applying Individual Page Margins

In the above examples the margin property is applied to set the same margin widths surrounding all four side of the page. You can, instead, selectively apply different widths to each of the sides by using individual margin properties. In the following embedded style sheet these different margin settings are applied to a page.

Setting individual margins surrounding a Web page with an embedded style sheet.

Note that the properties can appear in any order without affecting their application. Just make sure that property:value pairs are connected with a colon (:) and that declarations are separated with semicolons (;).

Deprecated <body> Attributes

Although not recognized under XHTML there are margin attributes, rather than margin properties, that can be used to set margin spacing for a page. These deprecated <body> attributes are listed below.

leftmargin="n"
rightmargin="n"
topmargin="n"
bottommargin="n"
marginwidth="n"
marginheight="n"

Margin settings are given by a value (n) representing the number of pixels of blank space to leave between the page content and the borders of the browser window. Settings apply individually to each of the borders (leftmargin, rightmargin, topmargin, bottonmargin), to both sides (marginwidth), or to both the top and bottom (marginheight) margins of the page, for example,

Although these deprecated <body> attributes still work in modern browsers--and you are likely to encounter them on existing Web pages--you should not use them when creating your own pages. Rely instead on margin style properties using linked, embedded, or in-line style sheets.

Paragraph Margins

Margin styles are applicable to many XHTML tags, not just to the <body> tag. In fact, any container tag can take on margin settings. The <p> tag is case in point. By declaring margin, margin-top, margin-right, margin-bottom, and/or margin-left style properties for this tag, a paragraph can have its margins adjusted on all sides of the text block or on each side individually.

The following code displays three paragraphs, the middle one of which uses an in-line style sheet to set its left and right margins to 40 pixels.

<p>Here are three paragraphs. This first paragraph is formatted with a standard paragraph tag with default style settings.</p>
<p style="margin-left:40px; margin-right:40px">This second paragraph is formatted with the style setting "margin-left:40px; margin-right:40px" to adjust its left and right margins to offset the paragraph from surrounding paragraphs. This styling produces a paragraph similar in style to a blockquote tag.</p>
<p>This third paragraph is coded like the first one. It is enclosed within a standard paragraph tag containing default styles.</p>

Setting paragraph margins with an in-line style sheet.

An in-line style sheet is used in this example since margin settings are applicable only to the single paragraph. There is no need to define an embedded style sheet or to create a linked style sheet document since this styling is not shared across all paragraphs.

Vertical Margins

It was mentioned previously that multiple <br/> tags can be used to increase the amount of vertical spacing on a page. Each <br/> tag beyond the one used to end a line of text produces an additional blank line down the page.

This same effect can be achieved with margin-top and margin-bottom style settings. By specifying these margin widths at the top and bottom of a text block the given number of pixels of blank space are inserted before and after the text, producing an effect similar to inserting blank lines.

The following code, for example, inserts additional spacing before and after an indented paragraph by increasing its top and bottom margins with an in-line style sheet. The effect is the same as shown previously for a blockquoted paragraph offset with additional <br/> tags.

<p>Here is a tale about Mary and a pesky little lamb which followed her anywhere and everywhere she went.</p>
<p style="margin-left:40px; margin-right:40px; margin-top:50px; margin-bottom:50px"> Mary had a little lamb,<br/> Its fleece was white as snow;<br/> And everywhere that Mary went,<br/> The lamb was sure to go.<br/> </p>
<p>Mary had an awkward social life. Its awfully difficult to date with sheep trailing around after you all the time.</p>

Setting vertical margins with an in-line style sheet.

You can use either multiple <br/> tags or extended margin settings to produce vertical spacing. Greater pixel precision, however, is gained by applying margin-top and margin-bottom styles.

Document Style

Alignment

Elements on a Web page are normally blocked at the left margin of the page or at the left margins established by their margin or margin-left style properties.

It is often the case, though, that you wish to change this default alignment and to align a page element at the right margin, to center it horizontally on the page, or to "float" the element to the left or right to permit text flow around the sides of the element.

The text-align Style

The text-align style property permits left, center, right, or justified alignment of page elements. Its property settings are shown below:

Property	:	Values
text-align		left center right justify

Text alignment property and values.

The text-align style property is replacement for the deprecated align attribute previously used for <p>, <hn>, and <hr/> tags. From this point forward all horizontal alignment should be done with the text-align property.

XHTML Alignment Demo

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>XHTML Alignment </title>
  <meta name="generator" content="jNote-iT" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>

 <body>
 <h3>XHTML Alignment Demo</h3>
 <hr />
 <p style="text-align:left">
This paragraph is formatted using the style="text-align:left" style
setting. Each line of text is blocked at the left margin of the page and
wraps at the right margin of the page. This is the default alignment
style for a paragraph.</p>

<p style="text-align:center">
This paragraph is formatted using the style="text-align:center" style
setting. Each line of wrapped text appears centered between the left and
right page margins.</p>

<p style="text-align:right">
This paragraph is formatted using the style="text-align:right" style
setting. Each wrapped line of text is aligned at the right margin of the 
page.</p>

<p style="text-align:justify">
This paragraph is formatted using the style="text-align:justify" style
setting. All wrapped lines of text except the last line are expanded to reach
both left and right margins. The final line, since it is not long enough to 
wrap, is not justified between the margins of the page.</p>
<hr />
  
 </body>
</html>

Click here to view the file.

Browser display of the above example.

Document Style

Width & Height

There are two general width and height style properties that can be used to size any page element. The width property gives the width of an element in pixels or as a percentage of the page width. The height property sets the element's height in pixels or as a percentage of page height.

Property	:	Values
width		npx n%
height

Styles for setting element width and height.

In subsequent tutorials these properties are applied to a wide assortment of page elements. For this initial introduction, widths and heights are applied to horizontal rules and graphic images to illustrate their use.

The default rule is 2 pixels in height and spans the width of the browser window. You can change these dimensions by coding width and height styles for the <hr/> tag. This sizing is shown by the following in-line style sheet and browser display.

Styled horizontal rule.

When specifying widths of page elements it is often preferable to code them as percentages. In this way the widths always appear in correct proportion to other elements on the Web page, even if the user adjusts the size of the browser window.

If a horizontal rule is sized to less than the width of the browser window then it also can be aligned with text-align:left, text-align:center, or text-align:right to position it horizontally on the line. In the previous example the rule is 75% of the width of the page and is centered.

Normally all horizontal rules on a page will be of the same style. Therefore, it makes sense to code this styling in an embedded or linked style sheet so that it can be coded one time for application to all rules on the page or all rules at the site. The following code is an example of how horizontal rules can be standardized for a page with an embedded style sheet.

Code to style all horizontal rules on a page.

With this styling, all <hr/> tags on the page produce rules that are 1 pixel in height, 50% of the width of the browser window (irrespective of the window size), and centered horizonally on the page.

Document Style

Color

Colors can be applied to various page elements with the color and background-colorproperties. Color values can be given by a color name, a hexadecimal value representing the combination of red, green, and blue hues to be applied, or by an RGB(red, green, blue) decimal value. For example, color specifications can take the following forms:

color:red
color:#FF0000
color:rgb(255,0,0)

These color assignments are discussed more fully in a later tutorial. For now you can use common system color names to bring color styling to your pages. There are 16 basic color names recognized as standard Windows colors and shown in a table below.

These colors can be applied to page elements with the style settings color:name or background-color:name coded in the style sheet associated with the element.

Property	:	Values
color		aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,olive, purple, red, silver, teal, white, and yellow
background-color

Basic color properties and names.

Text and Background Colors

Text colors are applied by assigning a color value in the style sheet associated with the container tag enclosing the text. For instance, a heading can be displayed in blue by assigning this color name in an in-line style sheet for the <hn> tag.

<h1 style="color:blue">A Blue Heading</h1>

Code to style a colored heading.

If an entire paragraph is to have a particular text color, then that color name can be applied with a style sheet associated with its <p> tag.

<p style="color:red">...red paragraph text...</p>

Code to style a colored paragraph.

In certain cases you may wish to display all text on a page in a particular color. This is easily done by assigning the color property to the <body> tag. The following code displays all text on a page in green by using an embedded style sheet associated with the body selector.

Embedded style sheet to color all text on a page.

Any text container can also be given a background color by applying the background-color property. Just make sure that the color chosen is complementary to the text color and does not make it difficult to read the text. In the following style sheet, yellow is used as the page background color behind its green text.

Embedded style sheet to assign a background color to a page.

Document Style

Spans & Divisions

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 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 ?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 an in-line tag placed around text for the purpose of identifying a string of characters to which this tag 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. As an in-line tag, the <span> tag surrounds a string of text enclosed inside a block-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.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head> 
  <title> XHTML Span tag </title>
  <meta name="generator" content="jNote-iT" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>

 <body>
 <h3>XHTML Span Demo</h3>
 <hr />
  <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:teal">TEAL</span> is given that 
color.</p> 

 </body>
</html>

Click here to view the file.

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 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 its enclosed content.

Use of the <div> tag is illustrated by the following two paragraphs. Both paragraphs are styled the same. However, instead of coding these styles with in-line style sheets in 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.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> XHTML <DIV> tag </title>
  <meta name="generator" content="jNote-iT" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>

 <body>
 <h3>XHTML DIV Demo</h3>
 <hr />
 <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. </p>
 
</div>

 </body>
</html>

Code to style two paragraphs through an enclosing <div> tag.

Browser output of this formatting is shown below:

Click here to view the file.

Paragraphs styled with enclosing <div> tag.

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.

Document Style

Style selectors & Classes

Use of embedded style sheets has been suggested as the normal way 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. Discussed below are 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 embedded styling can be done with individual tag selectors and their associated style declarations. These simple selectors declare default tag styling for an entire page. The general format for a simple selector is shown in Figure.

selector {property:value [; property:value] ... }

General embedded 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, and paragraphs. Anywhere one of these tags is encountered on the page, the browser applies the associated style.

An embedded style sheet applying simple selectors.

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.

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 with first-line indents of 25 pixels.

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 particular 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>

Identifying a paragraph for application of special styling.

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. The general format for an ID selector is shown below :

selector#id {property:value [; property:value] ...}

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:

Applying styling to an ID selector

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.

Styling Spans and Divisions

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 reducing their flexibility in styling other spanned text or divisions that require different stylings. In other words, do NOT code the following simple selectors in embedded style sheets.

Avoid using simple selectors for <div> and <span> tags.

However, by using ID selectors with these tags 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 type="text/css">
  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>

Using ID selectors for styling individual <div> and <span> 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 in an embedded style sheet as shown by its general format in Figure.

.class {property:value [ ;property:value] ...}

General style sheet format for class selector

Rather than naming a tag or using 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 can be associated with this 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 .set class, in this case overriding normal styling given by the p simple selector.

<style type="text/css">
  p       {margin:20px}
  .set {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>

Declaring and applying a style class.

(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, unlike the ID selector, the class selector can be assigned to any number of tags.

Thus, any paragraphs, divisions, or other block-level 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 to produce the page display shown in Figure.

<head>
  <title>Class Styles</title>

<style type="text/css">
  .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>

</head>
<body>

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

</body>

Declaring and applying various style classes.

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, 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 has become the essence of XHTML coding.

Document Style

Styling Lists

Previously you were introduced to some of the basic style properties used to format page elements. The following sections add to your repertoire of properties, focusing on ways to add special styling to page elements. In this section various ways of adding special styles to list structures are discussed.

Styling Unordered Lists

One of the list structures is an unordered list, a series of items preceded by bullet characters and set off from surrounding text by single blank lines. The list is single spaced and indented from the left margin. An example unordered list is coded and displayed below.

• List Item 1
• List Item 2
• List Item 3

An unordered list

Bullet types can be specified by using the deprecated type="disc|circle|square"attribute of the <ul> tag. Preferably, though, style sheet properties should replace this attribute. For unordered lists there are two style properties that can be used to designate the type of bullet symbol with which to prefix list items. These properties and their associated values are shown in Figure .

Property:	Value
list-style-type	disc circle square none
list-style-image	url(url)

List-style bullet types

Specifying Bullet Characters

The unordered list shown in below uses the list-style-type property to display a circle as the bullet type. Styling is given in an embedded style sheet entry for the ul selector.

Code for list-style bullet type

Unordered list with circle bullets

Of course, by using the simple selector ul in the stylesheet, all unordered lists on the page will have circle bullets. It might be preferable to use ID selectors so that different lists can be assigned different bullet characters. The following style sheet identifies three such lists, each with its own prefix character.

Embedded style sheet for list-style bullet types

A particular list structure takes on a bullet type by assigning the associated id to its <ul> tag. That is, a list identified with the tag <ul id="List3"> will have square characters as bullets.

Setting Margins for Unordered Lists

Normally, unordered lists are indented a fixed number of pixels from the left margin. In certain cases you may not wish the list of items to be indented. You can include a margin-left style setting to move items to the left margin (the margin setting for the list equates to the margin setting for its container). In the following code this margin setting is added to the ul selector to align bullets at a page margin of 20 pixels.

Aligning an unordered list at the page margin

Suppressing Display of Bullet Characters

You may wish to use other than the supplied bullet characters to prefix your list. In the following example the list-style-type property is set to none to remove display of bullets. Then each list item is prefixed with an arrowhead character from the Webdings font (the numeric character "4" displays the right-arrowhead symbol in this font family).

<?xml version="1.0" encoding="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>List Style Demo </title>
  <meta name="generator" content="jNote-iT" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" /> <style type="text/css">
  ul {list-style-type:none; margin-left:20px}
</style>
 </head>

 <body>
 

<ul>
  <li><span style="font-family:Webdings">4</span> List Item 1</li>
  <li><span style="font-family:Webdings">4</span> List Item 2</li>
  <li><span style="font-family:Webdings">4</span> List Item 3</li>
</ul>

 </body>
</html>

Code to display a special bullet character

Click here to view the file.

In this example the default bullet character is not replaced by the arrowhead. Instead, visibility of bullets is suppressed and the arrowhead character is added to the beginning of each list item. Even though bullet display is suppressed, room for the hidden character still occupies space on the line. Therefore, a margin-left setting is needed to move the list items back to their normal positions.

Consider the following list in which the right-arrowhead character has been added in front of the items, but display of default bullets is intentionally not suppressed.

<style type="text/css">
  ul {margin-left:20px}
</style>

<ul>
  <li><span style="font-family:webdings">4</span> List Item 1</li>
  <li><span style="font-family:webdings">4</span> List Item 2</li>
  <li><span style="font-family:webdings">4</span> List Item 3</li>
</ul>

Code for unordered list without suppression of bullet character.

• ? List Item 1
• ? List Item 2
• ? List Item 3

Unordered list with visible bullets and arrowhead characters.

When list-style-type:none is added to the style sheet the default disc characters are not displayed; however, the space occupied by these characters remains. In order to move the list, including the arrowheads, to the left so that it occupies that space and retains normal indention of list items, the margin-left property is added to the style sheet. A left margin of approximately 20 pixels aligns the right-arrowhead characters at the position previously occupied by the bullets.

Using Graphic Images for Unordered Lists

Rather than using text characters as bullets you can use graphic images to prefix list items by coding the list-style-image:url(url) property. If the image is in the same directory as the page containing the list, then the url is simply the name of the graphic file. In the following example an image named Bullet.gif is used to prefix list items. Browser output is shown in Figure.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> XHTML Image List  </title>
  <meta name="generator" content="jNote-iT" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">
  ul {list-style-image:url("../img/bullet.png"); vertical-align:middle}
</style>
 </head>

 <body>
<h3>XHTML UL with image bullet </h3><hr />
 
<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>

 </body>
</html>

Code for unordered list with graphic image as bullets.

Unordered list with graphic image as bullets

Click here to view the file.

Depending on the size of the image you may have to adjust vertical alignment of the list items to align properly with the image. Normally, text aligns at the bottom of an in-line image. In this example the vertical-align:middle property is applied to the image to align its accompanying text with the middle of the image. Also, text-top and text-bottom values can be used to vertically align text with the top or bottom of an image.

Styling Ordered Lists

An ordered list is a series of items preceded by sequence numbers and set off from surrounding text by single blank lines. The list is single spaced and indented from the left margin in the same way as an unordered list. A default ordered list is coded and displayed as shown below.

Code for an ordered list

1. List Item 1
2. List Item 2
3. List Item 3

An ordered list

Style sheet settings can be used to designate the type of numbering symbol to prefix list items. The list-style-type property can be applied using the values shown in Figure. The decimal value is default.

Property:	Value
list-style-type	decimal upper-alpha lower-alpha upper-roman lower-roman none

List style types of numbering symbols.

Specifying Number Characters

The following ordered list is numbered with upper-roman numerals. Browser output is shown in Figure.

Code for an ordered list with upper-roman characters.

1. List Item 1
2. List Item 2
3. List Item 3

Nested Ordered Lists

Ordered lists can be nested inside each other with each list having its own numbering scheme. In the following example an outer list is numbered with upper-case Roman numerals and an inner list is numbered with lower-case Roman numerals. Numbering characters are assigned to particular lists by using ID selectors.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> List Style Demo  </title>
  <meta name="generator" content="jNote-iT" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">
  ol#List1 {list-style-type:upper-roman}
  ol#List2 {list-style-type:lower-roman}
</style>
 </head>

 <body>

<h3>XHTML Ordered list Demo</h3>

<ol id="List1">
  <li>List Item 1</li>
  <li>List Item 2
      <ol id="List2">
        <li>List Item 2a</li>
        <li>List Item 2b</li>
      </ol>
  </li>
  <li>List Item 3</li>
</ol> 

 </body>
</html>

Code for nested ordered lists

Nested ordered lists with Roman numeral numbering.

Click here to view the file.

Contextual Selectors

List structures present a good opportunity to discuss an additional method -- an addendum to ID selectors -- to apply selective styling to XHTML elements. Consider this scenario for two lists requiring different stylings: the list items in an unordered list are displayed in a different color from those in an ordered list.

The two lists could apply different color settings through their tag selectors. That is, the ul selector could take on a different color from the ol selector with the following code.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>XHTML List  </title>
  <meta name="generator" content="jNote-iT" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">
  ul {color:pink}
  ol {color:teal}
</style>
 </head>

 <body>
 <h3>List Color Demo</h3>
 <hr />


<ul>
  <li>Pink Item 1</li>
  <li>Pink Item 2</li>
  <li>Pink Item 3</li>
</ul>

<ol>
  <li>Teal Item 1</li>
  <li>Teal Item 2</li>
  <li>Teal Item 3</li>
</ol>

 </body>
</html>

Code to display unordered and ordered lists in different colors

Click here to view the file.

Unordered and ordered lists displayed in different colors.

The <ul> list is displayed in red and the <ol> list is displayed in blue. However, an alternative is to focus on differences in the <li> tags between the two lists. The <li> tag appearing in the <ul> list needs to be assigned a different color from the <li> tag appearing in the <ol> list. The need is to differentiate between the <li> tags appearing in the two lists. This differentiation is made with the following style sheet format.

Using contextual selectors

The pairs of selectors -- ul li and ol li -- describe the combination of tags that must occur for the associated style to be applied. These contextual selectors -- two or more simple selectors separated by blank spaces -- provide the tag relationships that must occur before the style is applied.

The preceding code sets the color to red where an <li> tag follows a <ul> tag; it sets the color to blue where an <li> tag follows an <ol> tag. That is, the <li> tag takes on a style depending on its context, whether it is associated with a <ul> tag or with an <ol> tag.

Contextual selectors can also include ID selectors to further differentiate styles. The following code uses id values to distinguish two unordered lists for the purpose of applying different bullet styles. At the same time, the two sets of list items are assigned different colors depending on which unordered list they appear in.

<style type="text/css">
  ul#ListA    {list-style-type:disc}
  ul#ListB    {list-style-type:circle}
  ul#ListA li {color:red}
  ul#ListB li {color:blue}
</style>

<ul id="ListA">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ul id="ListB">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Using contextual selectors to differentiate unordered lists.

The two lists are differentiated in the style sheet by id values assigned to their <ul> tags. The first two style settings apply different bullet styles to the identified ul selectors. The last two style settings apply different colors to the li selector depending on which ul list it is contained in. The li color style depends on the ul ID context. Browser output of this code is shown in Figure.

• Item 1
• Item 2
• Item 3

• Item 1
• Item 2
• Item 3

Unorder lists displayed with different bullets and colors.

Use of contextual selectors is not limited to styling list structures. There will be numerous occasions throughout these tutorials where they are used to differentiate all manner of tag combinations.

Document Style

Borders & Padding

Nearly all XHTML elements can have borders, and they can include padding (white space) around their contents. This is the case whether or not there are normally borders around the element or whether padding space is a normal characteristic of the tag.

Border Styles

Border styles include properties pertaining to the type of border, its width, and its color. The following table lists these properties.

Property:	:	Value
border-style border-top-style border-right-style border-bottom-style border-left-style		dashed dotted double groove inset none outset ridge solid
border-width border-top-width border-right-width border-bottom-width border-left-width		thin medium thick npx
border-color border-top-color border-right-color border-bottom-color border-left-color		#000000 - #FFFFFF color name rgb(r,g,b)
border		border:style size color

Border styles and properties

Border style, width, and color properties can be applied to all four sides of an XHTMLelement or they can be selectively applied to individual sides. For example, the five types of border style properties are

border-style	- applies to all four sides
border-top-style	- applies only to the top edge
border-right-style	- applies only to the right edge
border-bottom-style	- applies only to the bottom edge
border-left-style	- applies only to the left edge

When a border specification applies to all four sides of an element, the shortcut border property combines style, width, and color values, in that order and separated by spaces, within a single property declaration. That is, instead of coding the three separate specifications,

border-style:solid
border-width:1px
border-color:black

you can combine these settings within a single border property:

border:solid 1 black

All three of these values do not have to be given, but the remaining ones must be in the correct order: border:solid 1px (unspecified color).

There are eight border styles from which to choose. These styles are shown in Figure with their widths set to 3 pixels. Smaller border widths do not display some of the styles.

Borders are nomally applied to tags such as and tags, those that are containers for text. You can, however, experiment with other tags to see their border effects.

To illustrate styling variations the following division is displayed with a border that has different styles on all four sides. The division encloses a paragraph that has its own border settings and includes a text string with its own border.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> Border </title>
  <meta name="generator" content="jNote-iT" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">
  body
  {
 border-width:2px; 
        border-color:pink; 
        border-style:groove;
  height:600px;
  }
div#A  {
 margin: 2px 2px 2px 2px;
  border-width:7px; 
        border-color:red; 
        border-top-style:solid; 
        border-right-style:dashed; 
        border-bottom-style:ridge; 
        border-left-style:double}

p#B    {border:dashed 3px #0099CC}

span#C {border:solid 4px teal}
</style>
 </head>

 <body>


<div id="A">
  <p id="B">This is a <span id="C">text string with borders</span> 
  inside a paragraph with borders inside a division with four different
  borders.</p>
</div>

 </body>
</html>

Code for various border styles

This is a text string with borders inside a paragraph with borders inside a division with four different borders.

Borders surrounding page elements

Click here to view the file

Since the enclosing division displays different borders on each of its four sides, individual specifications are given for each side. Since identical borders appear around all sides of the paragraph and spanned text, the shorthand border property is declared for these containers. Although you probably will not go to this extreme in adding borders to page elements, this example shows the different border settings that can be made.

Padding Styles

In the above styling example, borders are collapsed around the text they enclose. In most cases, for visual attractiveness and readability, you will wish to leave space between the text and its border. This is accomplished by introducing padding inside the text container. Padding is the amount is space between the borders of a container and its enclosed content.

Padding is added to a container with the style properties shown in Figure. The padding property introduces white space around all four sides of the container; padding-top, padding-right, padding-bottom, and padding-left selectively apply padding to each of the four sides.

Property	:	Values
padding padding-top padding-right padding-bottom padding-left		npx

The following code is a repeat of the previous division with padding added to the , , and tags to introduce additional space between the text and its enclosing borders. Different effects can be achieved by specifying different padding amounts on each of the four sides.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> XHTML Padding  </title>
  <meta name="generator" content="jNote-iT" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">
div#A  {padding:7px;
        border-width:2px; 
        border-color:gray; 
        border-style:solid; 
        }

p#B    {padding:7px; border:dashed 3px blue}

span#C {padding:2px; border:solid 4px green}
</style>

<div id="A">
  <p id="B">This is a <span id="C">text string with borders</span> 
  inside a paragraph with borders inside a division with four different
  borders.</p>
</div>
 </head>

 <body>
  

 </body>
</html>

Code for padding and various border styles

This is a text string with borders inside a paragraph with borders inside a division with four different borders.

Padding surrounding text elements

Click here to view the file

Document Style

Element Sizing

Unless they are styled otherwise, text containers such as <div>, <p>, and <span>tags are sized to fit the contents they contain. It is often the case that you wish to have more control over the sizes of container tags, and you can with the style settings shown in Figure. You were introduced to the height and width properties in a previous tutorial. Here they are combined with the overflow property to control the size and visual appearance of text containers.

Property:	:	Value
height		npx n% auto
width		npx n% auto
overflow		visible hidden scroll auto

Element size style properties

Container Widths and Heights

In previous tutorials height and width settings are applied to images and horizontal rules to give them specific sizes. The same can be done with virtually any XHTML tag, including text containers. The following paragraph, for instance, is sized at 50% of the width of the browser window rather than expanding by default to the entire page width.

A border is added to visualize the effect, and padding is used to keep the border from closing in around the text. This paragraph is displayed in the browser as shown in Figure.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> XHTML sizing demo </title>
  <meta name="generator" content="jNote-iT" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">
  p#Sized {width:50%; border:solid 1px; padding:10px}
</style>
 </head>

<body>


<p id="Sized">This is a paragraph with its width set to 50% of the width 
of the browser window. Still, the text wraps within these boundaries. Since 
its width is set as a percentage, the paragraph resizes to remain at 50% of 
the page width when resizing the browser window.</p>

 </body>
</html>

Code to size and pad a paragraph

Click here to view the file.

This is a paragraph with its width set to 50% of the width of the browser window. Still, the text wraps within these boundaries. Since its width is set as a percentage, the paragraph resizes to remain at 50% of the page width when resizing the browser window.

Paragraph with its width set to 50% of the page width.

The width of the paragraph always remains at 50%. Since no height styling is applied, the height of the paragraph expands to encompass the amount of text contained within it.

Container Overflows

By default, the height of a container always expands to display its contained text, irrespective of its specified height setting. In order to set the exact height of a container you must also indicate how to handle text "overflow," where the container is not sized large enough to display all of its content. You must, that is, supply an overflow property to deal with potential "hidden" text beyond the boundaries of the container.

A setting of overflow:visible displays all content irrespective of the specified height of the container (the default setting); overflow:hidden applies the specified height setting even if part of the text remains hidden; overflow:scroll displays horizontal and vertical scroll bars whether needed or not to view hidden text; overflow:auto displays a vertical scroll bar if needed to view hidden text.

The overflow:auto style is the most generally useful and visibly pleasing for displaying potential scrolling text within a container of a specified width and height. Coding for the above <p> tag with overflow:auto is shown below.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> XHTML Overflos </title>
  <meta name="generator" content="jNote-iT" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">
  p#OFLOW {overflow:auto; width:25%; height:100px; padding:5px;
           border:solid 2px;}
</style>
 </head>

 <body>

<center>

<p id="OFLOW">Page content can appear within elements as well as flow 
throughout the main document. With tags such as <div>, <p>,
and <span> to contain content, these elements can, if so chosen, be 
sized to various heights and widths.</p>
</center>
 </body>
</html>

Code to handle overflow text within a paragraph

Click here to view the file.

This particular paragraph has id="OFLOW" to differentiate it from the other three paragraphs which have their own id values. The paragraph has width and height settings that do not permit full display of the entire paragraph. Therefore, it is also given an overflow:auto style so that a vertical scroll bar appears for accessing the hidden text.

Floating Containers

This is a division with its width set to 250 pixels and its height set to 200 pixels. It has a ridge border 5 pixels in width, padding of 10 pixels, and a background color of gray. The division floats to the right of the page. Its left margin is set at 20 pixels for separation from the text on the page.

Since all of the text cannot display within the specified height and width, the division is given a style setting of overflow:auto to create a vertical scroll bar.

In many cases text containers are sized at less than their default widths and heights to create "sidebar" comments, that is, to display boxed text that appears along side the main textual contents on a page. A sidebar division is shown in Figure. It floats to the right with word wrap around it.

Text containers, like graphic images, can be positioned at either the left or right of the page by applying the float style. When coding a floating container make sure the code for the container appears first, followed by any text that wraps around the container.

Coding for the floating division in Figure is shown below. Styling is given by a class selector within an embedded style sheet. Division code appears immediately before the text that wraps around the container.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>XHTML  Float </title>
  <meta name="generator" content="jNote-iT" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">
  .FLOAT {float:right; width:50%; height:200px; overflow:auto; color:white; 
          background-color:#99CCFF; margin-left:20px; padding:10px; border:
          ridge 5}
  h3     {text-align:center}
</style>

 </head>

 <body>
<h3>Floating Containers</h3>

<hr />
<div class="FLOAT">

<h3>Floating Containers</h3>

<p>This is a division with its width set to 250 pixels and its height set to 
200 pixels. It has a ridge border 5 pixels in width, padding of 10 pixels, 
and a background color of gray. The division floats to the right of the page. 
Its left margin is set at 20 pixels for separation from the text on the 
page.</p>

<p>Since all of the text cannot display within the specified height and 
width, the division is given a style setting of overflow:auto to create a 
vertical scroll bar.</p>

</div>

... wrapped text ... 
</body>
</html>

Code for a floating division

Output in the browser

Click here to view the file.

Notice that only about half of the content is visible within the divisions width and height settings. Therefore, the overflow:auto property is added to the divisions style sheet to display a vertical scroll bar for accessing all text. A border is added for visibility.

The above code is a good illustration of using the block-level <div> tag to enclose and style other text blocks as a single unit of page content. In this case the <div> tag encapsulates a heading and two paragraphs. Its purpose is to identify this collection of content to receive styling in the form of a floated, bordered container inside of which the content can scroll.

Document Style

Element Positioning

Content on a Web page normally appears in the physical order in which it is coded inXHTML. In addition, elements can be floated to the left or right of the page with word wrap around them. You may, however, wish to have additional control over placement of page elements. You can, indeed, have precise pixel control over element positioning with the style properties listed in Figure

Property:		Value
position		relative absolute
left		npx n%
top		npx n%
z-index		n

Positioning style properties.

In order to be positioned precisely on the page, an element must be assigned a position property. Thereafter, the element can be placed at a precise pixel location using the accompanying left, top, and z-index properties.

Relative Positioning

Elements on a Web page normally appear at a location that is relative to surrounding elements on the page. That is, they are physically displayed in the order in which they are coded. Normally, in-line text cannot be moved from its default position on the page.

The built-in formatting given by the tag and its surrounding tags dictate where content is located. An <h1> tag always appears a double-space below a preceding paragraph and a double-space above a following paragraph. However, by assigning a position property to a tag, it can be repositioned with pixel precision up or down the page or across the page.

In order to reposition the <h1> tag in the above example it can be assigned a position:relative style. Then, by applying the left and/or top property, it can be moved by a certain number of pixels from its original location. The following code repositions this heading by styling the tag with positioning properties.

Code to reposition a heading relative to surrounding content.

With a position of relative the tag can be repositioned relative to its original location. The left property gives the pixel distance by which the element is offset from its normal horizontal position; the top property gives the pixel distance by which the element is offset from its normal vertical position. In the above example the heading is positioned +50 pixels from the left of its original location; it is positioned -10 pixels from the top of its original location.

Notice that pixel directions can be positive or negative. A positive value for the left property moves the element to the right; a negative value moves it to the left. A positive value for the top property moves the element down the page, a negative value moves it up the page.

In the following example each word in a sentence is packaged in a separate <span> container in order to style it separately. Each word then has its its top position offset relative to its normal vertical position across the line. All words are contained by a <div> tag to apply font sizing to the group of words.

<div style="font-size:24pt">
<span style="position:relative; top:-15px">Words</span>
<span style="position:relative; top:+10px">in</span>
<span style="position:relative; top:-5px">a</span>
<span style="position:relative; top:+5px">sentence.</span>
</div>

Each <span> tag is positioned relative so that its top property can be applied. It is not necessary to position the words horizontally with a left property since <span> tags are, by default, positioned side by side across the line. Only the tops of the words are repositioned from their normal vertical alignment.

As you are repositioning page elements you may need to use trial-and-error methods to get the exact positioning you want. There is no easy way to know at a glance exactly how many positive or negative pixel offsets are needed for horizontal and vertical placements.

Layering Elements

Page elements are layered on top of one another as they are added to a Web page; that is, each subsequently coded element is contained in a layer that sits on top of previous elements. Normally this layering is not evident and not important to know since page elements typically do not overlap.

When elements are explicitly positioned on the page, however, they may overlap, making this layering obvious. It also may be necessary to change this default layering so that elements are in preferred overlapping order.

You can explicitly change default layering of page elements by coding their z-index style properties. The z-index value is a relative measurement. Elements with larger numeric values appear on top of elements with lower values.

Thus, an element with z-index:2 appears on top of an element with z-index:1; an element with z-index:20 appears on top of an element with z-index:10. The absolute value of z-index does not matter. All that matters are the relative z-index magnitudes assigned to a set of layered elements.

The colored squares shown in Figure demonstrate various positions and layers. In this case, layering is given solely by the default order in which the squares are coded -- those coded last appear on top of those coded previously.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> XHTML Positioning </title>
  <meta name="generator" content="jNote-iT" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" /><style type="text/css">
  .RED    {position:relative; width:100px; height:100px; left:0px; top:0px;
           background-color:red; border:solid 1px white; color:white; 
           text-align:right}
  .GREEN  {position:relative; width:100px; height:100px; left:-50px; top:25px;
           background-color:green; border:solid 1px white; color:white;
           text-align:right}
  .BLUE   {position:relative; width:100px; height:100px; left:-100px; top:50px;
           background-color:blue; border:solid 1px white; color:white; 
           text-align:right}
</style>
 </head>

 <body>
  

<div>
<span class="RED">Red</span>
<span class="GREEN">Green</span>
<span class="BLUE">Blue</span>
</div>

 </body>
</html>

Code to overlap page elements.

Click here to view the file

Normal layering of page elements

The red square is coded first so it appears below the green square which is coded second, which appears below the blue square which is coded last. Notice that these squares are produced with <span> tags that are given widths, heights, colors, background colors, and borders.

No z-index settings are necessary to create this layering. However, the squares are given left and top stylings to offset them horizontally and vertically from their natural side-by-side positions to overlap them and make their layering visually evident.

The above squares can have their layers reversed simply by assigning them z-index values. In the following code, the red square is assigned the largest value (bringing it to the top) and the blue square is assigned the smallest value (sending it to the bottom). The order of coding the <span> tags remains unchanged. Display of these squares is shown in Figure.

Code to relayer page elements

Recall that absolute z-index values do not matter so long as the differences in magnitude are in proper relationship. The 3, 2, and 1 values used above could have been coded as 30, 20, and 10; or 300, 200, and 100; or 300, 20, and 1. The largest value is on top and the smallest value is on the bottom, irrespective of their absolute magnitudes.

Repositioning Blank Space

When using relative positioning there is not a lot of latitude in moving elements from their normal vertical positions on the page. The reason is that space is still reserved for the repositioned element at its original location on the page, irrespective of the fact that it has been moved from that location. This can cause excessive blank space to appear on the page as shown by the following example of a repositioned paragraph.

<p>Preceding paragraph....</p>
<p style="position:relative; top:25px; font-size:24pt"> Repositioned Paragraph. </p> <p>Following paragraph....</p>

Code to reposition a paragraph

From its normal position the repositioned <p> tag is moved 25 pixels down the page. However, the original size and location of this tag is maintained in the flow of page elements, occupied now by blank space where the tag would normally appear. Not only that, any follow-on text maintains its position relative to the original location of the repositioned <p> tag, thereby being nearly overwritten by the moved text.

As long as page elements are repositioned vertically within a reasonable number of pixels from their original locations, the above spacing issues should not cause concern. As vertical distances increase, however, blank space appears in the flow of page elements representing abandoned space previously occupied by the repositioned element. You will probably need to try various positionings to get page elements to appear in satisfactory relationships to one another.

Absolute Positioning

Whereas position:relative positions a page element relative to surrounding elements, position:absolute places an element in relation to its container element. By default, the container element is the Web page itself, the <body> tag. Therefore, elements are absolutely positioned in relation to the top-left corner of the Web page and, importantly, are taken out of the normal flow of page elements.

Absolute positioning is shown in the example in Figure where the word "DRAFT" is enclosed in a <div> tag that is positioned absolute. With this positioning the tag is located relative to the top-left corner of the page. It is offset 50px from the top and 280px from the left of the page, placing it beneath the accompanying paragraph.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Positioning</title>
</head>
<body>

<div style="position:absolute; top:50px; left:280px; z-index:-1; 
font-family:impact; font-size:68pt; color:#3399CC">eBIZ.com</div>

<p>Positioned beneath this paragraph is the word "DRAFT" defined by the 
<div> tag shown above. This tag appears in the XHTML code immediately
before this paragraph. It is positioned absolute; therefore, it is taken out 
of the normal flow of page elements. With this word??½s removal from the flow 
of page elements, this paragraph moves up to occupy the abandoned page space, 
thereby overlaying the word. Thus, the word "DRAFT" occupies an absolute 
position on the page unaffected by whatever else surrounds it. It is also 
given a z-index value of -1 to layer it beneath the text layer of the page 
so that it does not overlay the text.</p>

</body>
</html>

Code to absolutely position content beneath the text layer of a page

Absolute positioning of content beneath the text layer of a page

The text layer of a page always has a z-index value of 0 (zero). Therefore, the <div> tag is given a z-index value of -1 value in order to layer the word beneath the text layer so that it does not block out the text.

When a page element is positioned absolute and is given left and top property settings, it is taken out of the normal flow of page elements. In the above example, the <div> tag is removed from its normal physical location preceding the paragraph. The paragraph, then, moves up to occupy the abandoned position of the <div> tag.

This means that it does not really matter where an element that is positioned absolute is coded on the page. Irrespective of where it is physically coded it is still positioned in relation to the top-left corner of the page. The only case where its coded position matters is when the element is positioned only by its left (but not its top) property. If it is not repositioned vertically, it stays in its coded position.

Determining Positional Locations of Page Elements

Since it can be difficult to determine left and top page positions relative to a lengthy, scrolling Web page, elements that are positioned in relation to one another are often placed inside another container element. This container element is positioned relative to maintain its position within the flow of page elements; the contained elements are positioned absolute inside the container.

Thus, absolute position measurements are made relative to the container rather than to the page. The container becomes the easier-to-manage coordinate system within which contained elements are precisely positioned.

A good general solution to positioning page elements in relation to one another is

1. Define and size a <div> tag to encompass the positioned elements. Position the division relative, thus locating it within the flow of page content. As content is added to or removed from the page, this division still maintains its relative position between other page elements. It moves up or down the page as page content changes.

2. Place elements to be positioned inside the division, and position them absolute. Thus, the left and top distances for the positioned elements are always measured from the top-left corner of the division. This "local" coordinate system stays the same even if the division changes positions within the flow of page elements.

The division shown in Figure is positioned relative to maintain its position among other XHTML elements on a page. It is displayed with a dotted border to make it visible. The enclosed squares are positioned absolute, with left and top positions measured from the top-left corner of this division.

<style type="text/css">
  .DIV    {position:relative; width:300px; height:160px; border:dotted 1}

  .RED    {position:absolute; width:100px; height:100px; left:0px; top:0px;
           background-color:red; border:solid 1px white; color:white; 
           z-index:1; text-align:right}
  .GREEN  {position:absolute; width:100px; height:100px; left:50px; top:25px;
           background-color:green; border:solid 1px white; color:white; 
           z-index:2; text-align:right}
  .BLUE   {position:absolute; width:100px; height:100px; left:100px; top:50px;
           background-color:blue; border:solid 1px white; color:white; 
           z-index:3; text-align:right}
</style>

<div class="DIV">

  <span class="RED">Red </span>
  <span class="GREEN">Green </span>
  <span class="BLUE">Blue </span>

</div>

The advantage of using this strategy is that the container division can be moved to any location on the page and its contained elements still maintain their absolute positions within the division. It is not necessary to recalculate their positions since they are always relative to the top-left corner of the container division.

The following code uses this same strategy to produce a drop-shadow effect.

<style type="text/css">
  div#CONTAIN {position:relative; height:45px; width:180px; border:dotted 1px}

  div#BLACK   {position:absolute; left:0px; top:0px; z-index:2; font-family:
               impact; font-size:24pt; color:black}
  div#SILVER  {position:absolute; left:+5px; top:+5px; z-index:1; font-family:
               impact; font-size:24pt; color:silver}
</style>

<div id="CONTAIN">
  <div id="SILVER">Drop Shadow</div>
  <div id="BLACK">Drop Shadow</div>
</div>

An encompassing division (positioned relative within the flow of page content) contains the two layered elements to be positioned. The container division is given a dashed border to show its size and position. The words and shadow positions can be easily determined by their distances from the top-left corner of this division.

The words are positioned at the very top-left corner of the division (left:0px; top:0px); the shadow is offset 5 pixels from the words (left:+5px; top:+5px). The words are given a z-index value larger than the shadow to layer them on top.

When enclosing positioned content inside a division you normally need to set the width and height properties of the division. A positioned division has a default width that spans the width of its container -- the width of the Web page if its container element is the <body> tag. .

You may wish to set the division width only large enough to enclose its contained elements as is done for the above drop shadow effect. A positioned division also has a default height of 0 pixels irrespective of its content. Therefore, you will need to set its height large enough to reserve vertical page space for displaying its enclosed content

The example shown in Figure is a more elaborate use of positioning. It is a mock-up of a newsletter using the above positioning strategy. Borders are shown around the various elements to help visualize the layout.

Newsletter layout using positioned elements

The entire newsletter is contained inside a division that is sized 500 x 420 pixels and positioned relative to fit within the flow of content on the page. Inside this encompassing division are various other divisions positioned absolute for exacting layout inside the container division.

Shown below is an outline of the XHTML coding for the newsletter layout. No content has yet been added to the newsletter; at this design stage it is just necessary to format its layout. Content can be easily added once it is known where it goes. Note in particular the positioning types and measurements for the various divisions.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Newsletter</title>

<style type="text/css">
div#OUTER {
position:relative;
width:500px;
height:420px; 
border-color: #99CCFF;
border-style: groove;
border-width: 1 
}
div#HEAD  {
position:absolute;
left:0px; 
top:0px;  
width:500px;
height:40px;
border:dotted 1;
text-align:center; 
font-size:24pt
}
div#COL1  {
position:absolute;
left:0px;  
top:50px; 
width:240px; 
height:260px;

}
div#COL2  
{
position:absolute; 
left:260px; 
top:50px;  
width:240px; 
height:260px;
border:dotted 1
}
div#FOOT  {
position:absolute; 
left:0px;   
top:320px; 
width:500px; 
height:100px;
 border-width: 1;
border-top: inset
}
</style>

</head>
<body>

<div id="OUTER">

  <div id="HEAD">
    Newsletter Layout
  </div>
  
  <div id="COL1">
    First Column
  </div>
  
  <div id="COL2">
    Second Column
  </div>
  
  <div id="FOOT">
    Footer
  </div>

</div>

</body>
</html>

Code for newsletter layout using positioned elements

Output: Try it yourself.

PC TRAINING

XHTML - PART II

0 comments:

CATEGORIES

POPULAR POSTS

BLOG ARCHIVE

ABOUT ME

Categories

About

Link list 2

Follow us

Link list 3