EverWeb Codebox

Styled Lists

List Style Examples

Lists can be quickly created using HTML and CSS in a Snippet.

Code

Unordered List with Disc

  • Item One
  • Item Two
  • Item 3

Unordered List with Square

  • Item One
  • Item Two
  • Item 3

Ordered List with Decimal

  1. Item One
  2. Item Two
  3. Item 3

Ordered List with Lower Alpha

  1. Item One
  2. Item Two
  3. Item 3

Ordered List with Roman

  1. Item One
  2. Item Two
  3. Item 3

<div style="font: 15px Trebuchet MS, verdana, sans-serif;margin:0;padding:0">

<p>Unordered List with Disc</p>

<ul style="list-style-type:disc;">

<li>Item One</li>

<li>Item Two</li>

<li>Item 3</li>

</ul>

<p>Unordered List with Square</p>

<ul style="list-style-type:square; margin-left: 20px">

<li>Item One</li>

<li>Item Two</li>

<li>Item 3</li>

</ul>

<p>Ordered List with Decimal</p>

<ol style="list-style-type:decimal; margin-left: 60px">

<li>Item One</li>

<li>Item Two</li>

<li>Item 3</li>

</ol>

<p>Ordered List with Lower Alpha</p>

<ol style="list-style-type:lower-alpha; margin-left: 20px">

<li>Item One</li>

<li>Item Two</li>

<li>Item 3</li>

</ol>

<p>Ordered List with Roman</p>

<ol style="list-style-type:lower-roman;">

<li>Item One</li>

<li>Item Two</li>

<li>Item 3</li>

</ol>

</div>

<div style="font: 15px Trebuchet MS, verdana, sans-serif;color:#000000;margin:0;padding:0">

<ul style="list-style-type:disc;">

<li>Item One</li>

<li>Item Two</li>

<li>Item Three</li>

</ul>

</div>

Simple Unordered List

The basic list consists of...

  • A containing div with an inline style for the font
  • A list with an inline style
  • Some list items

A list can be unordered <ul> or ordered <ol>.

Either type of list with a "list-style:none" has no number or letter.

Unless the style is defined, the default values are "disc" for <ul> and "decimal" for <ol>.


In the above code, the styles are marked in magenta. The first one is to style the text stating the font size, font family, fallback fonts and the font color which is expressed as a hex color number.

The second inline style stipulates the list type.

Acceptable List Style Types

  • disc
  • circle
  • square
  • decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • lower-greek
  • lower-latin
  • upper-latin
  • armenian
  • georgian
  • lower-alpha
  • upper-alpha
  • none