Information - Resources - Tools - Strategies

for developing a profitable Web business

Tutorials | Changing List Styles

HTML: Changing List Styles


Replacing the Bullets in an Unordered List

You may distinguish your unordered list by changing the default disc that displays before each item. To do this you need to add the type attribute to your <ul> tag and define it as "square" or "circle".

Format:

<ul type="square">  or   <ul type="circle">


Example 1 – Using a Square

This list uses a square in front of each item.

    <ul type="square">
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
    </ul>

Display:
  • First list item
  • Second list item
  • Third list item

Example 2 – Using a Circle

This list uses an unfilled circle in front of each item.

    <ul type="circle">
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
    </ul>

Display:
  • First list item
  • Second list item
  • Third list item

Replacing the Numbers in an Ordered List

There are five display options available in an ordered list.

  1. Arabic numbers (1, 2, 3...)
  2. Lowercase alphabet (a, b, c...)
  3. Uppercase alphabet (A, B, C...)
  4. Lowercase Roman numerals (i, ii, iii...)
  5. Uppercase Roman numerals (l, ll, lll...)

The format required to implement one of these options is the same as illustrated in the unordered list example above. If you wanted to use the uppercase alphabet in your ordered list, you would do the following:

<ol type="A">.

Now let's apply that to an example and see how it looks in a browser.

Example 3: – Using Uppercase Alphabet

<ol type="A">
    <li>First list item</li>
    <li>Second list item</li>
    <li>Third list item</li>
</ol>

Display:
  1. First list item
  2. Second list item
  3. Third list item

Changing Values in an Ordered List


Modifying the Start Value

You can control the start value of items in your list by combining the start attribute with the opening tag and adding a value. Here's how you would begin your list at the number 50.

Format:

<ol start="50">

NOTE: Your start values are always set using Arabic numbers, even if you use an alphabetic or roman numeral list. In other words, if you wanted to begin your list with the uppercase letter "H" you would use the value "8" after the start attribute.

Example

<ol type="A" start="8">
    <li>First list item</li>
    <li>Second list item</li>
    <li>Third list item</li>
</ol>

Display:
  1. First list item
  2. Second list item
  3. Third list item

Modifying the Value of a List Item

You can change the individual value of any list item by using the value attribute with the <li> tag. Here's how:

<li value="15">

If you inserted this at line item no. 6 in a numbered list, the number 15 would display instead and items following would continue as 16, 17, and so on.


« Previous  ¦  Next »




 

Newsletter

Name:

Email:

Useful Stuff
Ponder This

Action is the vehicle that converts your dreams to reality. If you would only develop the courage to begin, you'd be well on your way to success.