CSS TUTORIALS - CSS - Lists
CSS - Lists
ADVERTISEMENTS
| Value | Description |
|---|
| none | NA |
| disc (default) | A filled-in circle |
| circle | An empty circle |
| square | A filled-in square |
ADVERTISEMENTS
| Value | Description | Example |
|---|
| decimal | Number | 1,2,3,4,5 |
| decimal-leading-zero | 0 before the number | 01, 02, 03, 04, 05 |
| lower-alpha | Lowercase alphanumeric characters | a, b, c, d, e |
| upper-alpha | Uppercase alphanumeric characters | A, B, C, D, E |
| lower-roman | Lowercase Roman numerals | i, ii, iii, iv, v |
| upper-roman | Uppercase Roman numerals | I, II, III, IV, V |
| lower-greek | The marker is lower-greek | alpha, beta, gamma |
| lower-latin | The marker is lower-latin | a, b, c, d, e |
| upper-latin | The marker is upper-latin | A, B, C, D, E |
| hebrew | The marker is traditional Hebrew numbering | |
| armenian | The marker is traditional Armenian numbering | |
| georgian | The marker is traditional Georgian numbering | |
| cjk-ideographic | The marker is plain ideographic numbers | |
| hiragana | The marker is hiragana | a, i, u, e, o, ka, ki |
| katakana | The marker is katakana | A, I, U, E, O, KA, KI |
| hiragana-iroha | The marker is hiragana-iroha | i, ro, ha, ni, ho, he, to |
| katakana-iroha | The marker is katakana-iroha | I, RO, HA, NI, HO, HE, TO |
ADVERTISEMENTS
<ul style="list-style-type:circle;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style="list-style-type:square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style="list-style-type:decimal;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style="list-style-type:lower-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style="list-style-type:lower-roman;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
|
- Maths
- Social Science
- Physics
- Maths
- Social Science
- Physics
- Maths
- Social Science
- Physics
- Maths
- Social Science
- Physics
- Maths
- Social Science
- Physics
|
| Value | Description |
|---|
| none | NA |
| inside | If the text goes onto a second line, the text will wrap underneath the marker. It will also appear indented to where the text would have started if the list had a value of outside. |
| outside | If the text goes onto a second line, the text will be aligned with the start of the first line (to the right of the bullet). |
<ul style="list-style-type:circle; list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style="list-style-type:square;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style="list-style-type:decimal;list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style="list-style-type:lower-alpha;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
|
- Maths
- Social Science
- Physics
- Maths
- Social Science
- Physics
- Maths
- Social Science
- Physics
- Maths
- Social Science
- Physics
|
<ul>
<li style="list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol>
<li style="list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
|
- Maths
- Social Science
- Physics
- Maths
- Social Science
- Physics
|
<ul style="list-style: inside square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style="list-style: outside upper-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
|
- Maths
- Social Science
- Physics
- Maths
- Social Science
- Physics
|
<ul style="list-style: inside square; marker-offset:2em;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style="list-style: outside upper-alpha; marker-offset:2cm;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
|
- Maths
- Social Science
- Physics
- Maths
- Social Science
- Physics
|
