JavaScript is disabled! Please enable JavaScript in your web browser!

Freestyle Academy of Communication Arts & Technology

1299 Bryant Ave, Mt. View, CA 94040 T 650-940-4680   F 650-961-1346
2 Required Classes: English and Design 3rd/Elective Class:  + Animation or Digital Media or Film
Freestyle Logo

Font Size

+

-

Reset

Back to list of all examples

Useful Stuff About:

Lists - Bulleted or Numbered

These are bulleted lists

The HTML code for this looks like this


<ul>/* ul stands for UNordered List */
    <li> Bulleted item 1 where order doesn't matter</li>/*li stands for List Item*/
    <li> Bulleted item 2 where order doesn't matter</li>
    <li> Bulleted item 3 where order doesn't matter</li>
    <li> Bulleted item 4 where order doesn't matter</li>
</ul>

These are numbered lists

  1. Numbered item 1 where order DOES matter
  2. Numbered item 2 where order DOES matter
  3. Numbered item 3 where order DOES matter
  4. Numbered item 4 where order DOES matter

The HTML code for this looks like this


<ol>/* ol stands for Ordered List */
    <li>Numbered item 1 where order DOES matter</li>/*li stands for List Item*/
    <li>Numbered item 2 where order DOES matter</li>
    <li>Numbered item 3 where order DOES matter</li>
    <li>Numbered item 4 where order DOES matter</li>
</ol>


These are bulleted lists with custom images for bullets

The HTML code for this looks the same as above but the CSS is different


ul li{
      list-style-image:url(path/to/custom/image.png);/*Path is relative to css file, NOT the HTML/PHP file*/
}

These are numbered lists with multi levels

  1. Numbered item 1 where order DOES matter
    1. Sub-level one
      1. Sub-level two
      2. Sub-level two
      3. Sub-level two
    2. Sub-level one
      1. Sub-level two
      2. Sub-level two
      3. Sub-level two
    3. Sub-level one
      1. Sub-level two
      2. Sub-level two
      3. Sub-level two
  2. Numbered item 2 where order DOES matter
    1. Sub-level one
      1. Sub-level two
      2. Sub-level two
      3. Sub-level two
    2. Sub-level one
      1. Sub-level two
      2. Sub-level two
      3. Sub-level two
    3. Sub-level one
      1. Sub-level two
      2. Sub-level two
      3. Sub-level two

The HTML code for this looks like this


<ol>
<li>Numbered item 1 where order DOES matter
<ol type="a">
<li>Sub-level one
<ol type="i">
<li>Sub-level two</li>
<li>Sub-level two</li>
<li>Sub-level two</li>
</ol>
</li>
<li>Sub-level one
<ol type="i">
<li>Sub-level two</li>
<li>Sub-level two</li>
<li>Sub-level two</li>
</ol>
</li>
<li>Sub-level one
<ol type="i">
<li>Sub-level two</li>
<li>Sub-level two</li>
<li>Sub-level two</li>
</ol>
</li>
</ol>
</li>
<li>Numbered item 2 where order DOES matter
<ol type="a">
<li>Sub-level one
<ol type="i">
<li>Sub-level two</li>
<li>Sub-level two</li>
<li>Sub-level two</li>
</ol>
</li>
<li>Sub-level one
<ol type="i">
<li>Sub-level two</li>
<li>Sub-level two</li>
<li>Sub-level two</li>
</ol>
</li>
<li>Sub-level one
<ol type="i">
<li>Sub-level two</li>
<li>Sub-level two</li>
<li>Sub-level two</li>
</ol>
</li>
</ol>
</li>
</ol>