<style>
  ol {list-style-type:upper-roman}
</style>

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

An ordered list with Roman numeral numbering.

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.

<style>
  ol#List1 {list-style-type:upper-roman}
  ol#List2 {list-style-type:lower-roman}
</style>

<ol id="List1">
  <li>List Item 1</li>
  <li>List Item 2</li>

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

  <li>List Item 3</li>
</ol> 

Nested ordered lists with Roman numeral numbering.

Styling Definition Lists

A definition list is a series of terms and definitions offset from surrounding text by a single blank line. The terms in the list are blocked at the left margin; definitions are indented and word wrapped on the following lines.

Recall that a definition list is enclosed inside <dl> tags and contains one or more <dt> tags listing the terms to be defined. Each term has an associated <dd> tag surrounding its definition. An example definition list is coded below and displayed below

<dl>
  <dt>Term 1</dt>
    <dd>This is the Term 1 definition. The definition term appears on 
        a line by itself and is followed by a definition text block.
        The definition is indented and word wrapped.</dd>
  <dt>Term 2</dt>
    <dd>This is the Term 2 definition. The definition term appears on 
        a line by itself and is followed by a definition text block.
        The definition is indented and word wrapped.</dd>
</dl>

Term 1

This is the Term 1 definition. The definition term appears on a line by itself and is followed by a definition text block. The definition is indented and word wrapped.

Term 2

This is the Term 2 definition. The definition term appears on a line by itself and is followed by a definition text block. The definition is indented and word wrapped.

A definition list.

There are no style properties especially designed for definition lists. You can, however, apply other formatting styles to a list to give it a different look and alignment. In the following example the above list is given additional spacing between items by applying margin settings to the <dd> tags.

<style>
  dd {margin-top:10px; margin-bottom:10px}
</style>

<dl>
  <dt>Term 1</dt>
    <dd>This is the Term 1 definition. The definition term appears on 
        a line by itself and is followed by a definition text block.
        The definition is indented and word wrapped.</dd>
  <dt>Term 2</dt>
    <dd>This is the Term 2 definition. The definition term appears on 
        a line by itself and is followed by a definition text block.
        The definition is indented and word wrapped.</dd>
</dl>

Term 1

This is the Term 1 definition. The definition term appears on a line by itself and is followed by a definition text block. The definition is indented and word wrapped.

Term 2

This is the Term 2 definition. The definition term appears on a line by itself and is followed by a definition text block. The definition is indented and word wrapped.

A definition list with top and bottom margins surrounding list items.

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.

<style>
  ul {color:red}
  ol {color:blue}
</style>

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

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

• Red Item 1
• Red Item 2
• Red Item 3

1. Blue Item 1
2. Blue Item 2
3. Blue Item 3

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.

<style>
  ul li {color:red}
  ol li {color:blue}
</style>

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

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 below

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

---

---

|  About us | Categories | New Releases | Most Popular | Web Tutorial | Free Download | Drivers |