Current course:

Lists

<ol>
      <li> Put an item here</li>
      <li> Put an item here</li>
      <li> Put an item here</li>
</ol>

Ordered list
<ol></ol>
These are the types of ordering:
1. style="list-style-type: upper-alpha;" -will give you A B C D E F G...
2. style="list-style-type: lower-alpha;" -will give you a b c d e f g...
3. style="list-style-type: decimal;" -will give you 1 2 3 4 5 6 7 8 9... THIS IS THE DEFAULT!
4. style="list-style-type: upper-roman;" -will give you I II III IV V VI... Roman Numerals
5. style="list-style-type: lower-roman;" -will give you i ii iii iv v vi... small roman numerals
Using the list item tag <li> will put each item on a separate line, instead of using a line break.
list One:
  1. I. Chapter 1 - Introduction
  2. II. Chapter 2 - Birth
  3. III. Chapter 3 - Childhood
  4. IV. Chapter 4 - Adolescence
  5. V. Chapter 5 - Adult


CODE for list one:
<ol> <li>I. Chapter 1 - Introduction</li>
<li>II. Chapter 2 - Birth</li>
<li>III. Chapter 3 - Childhood</li>
<li>IV. Chapter 4 - Adolescence</li>
<li>V. Chapter 5 - Adult</li>
</ol>


list Two:
  1. Chapter 1 - Introduction
  2. Chapter 2 - Birth
  3. Chapter 3 - Childhood
  4. Chapter 4 - Adolescence
  5. Chapter 5 - Adult
CODE for list two:
<ol style="list-style-type: decimal;">
<li>Chapter 1 - Introduction</li>
<li>Chapter 2 - Birth</li>
<li>Chapter 3 - Childhood</li>
<li>Chapter 4 - Adolescence</li>
<li>Chapter 5 - Adult</li>
</ol>
list Three:
  1. Chapter 1 - Introduction
  2. Chapter 2 - Birth - (Notice I've changed the TYPE!)
  3. Chapter 3 - Childhood
  4. Chapter 4 - Adolescence
  5. Chapter 5 - Adult

CODE for list three:
<ol style="list-style-type: upper-alpha;">
<li>Chapter 1 - Introduction</li>
<li style="list-style-type: upper-alpha;">Chapter 2 - Birth</li>
<li >Chapter 3 - Childhood</li>
<li>Chapter 4 - Adolescence</li>
<li>Chapter 5 - Adult</li>
</ol>

Unordered lists
<UL></UL>
Attributes: TYPE
An Unordered list is made with bulleted points. There are THREE Types of bullets:
 
Definition lists
<DL></DL>
Instead of list Items, you have two parts, <DT> and <DD> within the list:

CODE for Definition list:
<DL>Define your Definition liST with DL
<dt>Definition Title DT</dt>
<dd>Definition DD</dd>
<dt>Another Word</dt>
<dd>Another Definition</dd>
<dt>Another Word</dt>
<dd> Another Definition</dd>
</DL>

Nested lists
You can have lists within lists, or an Outline-type list (Table of Contents, etc.)
The OFFICIAL Outlining order for lists is: I, A, 1, a, i.
If you nest an UNORDERED list, the default order is: disc, circle, square, and square for rest.
  1. Chapter 1 - Lifestages
    1. Lifestages of a fruitfly
    2. Lifestages of a paramecium
    3. Lifestages of a Butterfly
      1. Egg stage
        1. Many eggs laid at once
        2. Hatch 2 minutes after laid
      2. Pupa
      3. Larvae
      4. Adolescence
      5. Adult
      6. Death (they only live a couple days)
  2. Chapter 2
  3. Chapter 3
  4. Chapter 4
CODE for Nested list:
<ol style="list-style-type: upper-roman;">
      <li>Chapter 1 - Lifestages</li>
     <ol style="list-style-type: upper-alpha;">
          <li>Lifestages of a fruitfly</li>
          <li>Lifestages of a paramecium</li>
          <li>Lifestages of a Butterfly</li>
          <ol style="list-style-type: upper-alpha;">
               <li>Egg stage</li>
               <ol style="list-style-type: upper-alpha;">
                    <li>Many eggs laid at once</li>
                    <li>Hatch 2 minutes after laid</li>
               </ol>
               <li>Pupa</li>
               <li>Larvae</li>
               <li>Adolescence</li>
               <li>Adult</li>
               <li>Death (they only live a couple days)</li>
          </ol>
     </ol>
     <li>Chapter 2</li>
     <li>Chapter 3</li>
     <li>Chapter 4</li>
</ol>

Adding CSS:
Replace the TYPE attribute with a STYLE attribute using list-style-type / list-style-position / list-style-image.
list-style-type: choose one of the following bullet styles
none, square, disc, circle, upper-alpha, lower-alpha, upper-roma , lower-roman, decimal (choose one)
EX: <ol style="list-style-type:circle;">
list-style-position: inside or outside
inside - Indents the marker and the text.
outside - Keeps the marker to the left of the text
EX: <ol style="list-style-position:inside;">
  1. Put this inside
  2. Put this inside


  1. Put this outside
  2. Put this outside
list-style-image: url('image location')
EX: <UL style="list-style-image: url('images/arrow.gif');"> --single quotes around image pathname.
  • arrow bullet
  • arrow bullet
  • arrow bullet