HTML Tutorial - Lesson #1

Lists are nice, but visually boring. You can spice it up by adding bullets and other effects.

As with all other styles, you can include the CSS command on each line, which only defines it for the current iteration.

STYLE="list-style-image: something"

Or redefine the entire style by including the definition in between the <HEAD> and </HEAD>.

<STYLE>
UL {list-style: circle inside lower-alpha}
</STYLE>

Each of these may be specified on all of the different list tags: <UL>, <OL>, <LI> (to just define a simple list item), <DD> and <DT>.

Image Bullets

Using images on bulleted lists can really spice things up. Here is an example.

And here is what it looks like.

Item 1
Item 2
Item 3

You can also change each individual list element.

And here's how that looks:

Item 1
Item 2
Item 3

Bullet Types

You can change the bullet to one of three different pre-defined types: circle, square and disc.

<UL>
   <LI STYLE="list-style-type: circle">Circle
   <LI STYLE="list-style-type: square">Square
   <LI STYLE="list-style-type: disc">Disc
</UL>

This looks as follows:

Circle
Square
Disc

Numbered List Types

You can also define lists using various numbering schemes: decimal, lower-case alpha, upper-case alpha, lower-case roman and upper-case roman.

<OL>
   <LI STYLE="list-style-type: decimal">Decimal
   <LI STYLE="list-style-type: lower-alpha">Lower-case alpha
   <LI STYLE="list-style-type: upper-alpha">Upper-case alpha
   <LI STYLE="list-style-type: lower-roman">Lower-case roman
   <LI STYLE="list-style-type: upper-roman">Upper-case roman
</OL>

And below is how that comes out:

Decimal
Lower-case alpha
Upper-case alpha
Lower-case roman
Upper-case roman

Of course, you can make them all the same as shown below:

This is how that turns out:

Item 1
Item 2
Item 3
Item 4
Item 5

Connect with me

Florish and prosper: Check out The Way To Happiness today

W3CHTML 5.0 W3C CSS