Lists

Property Value
List-style-type disc;circle;square;decimal;lower-roman; upper-roman; lower-alpha; upper-alpha; none
list-style-position Position of the bullet or number
inside; outside
list-style-image An image can be used as a bullet
url('name of image.jpg/gif')



List-Style-Type

In HTML we have already looked at the unordered and ordered lists, so now we are going to look at the different list-style-type for the unordered and ordered lists.


Unordered list

<head>
<style>
#circle
{list-style-type:circle;color:red;}

#square
{list-style-type:square;color:green;}

#disc
{list-style-type:disc;color:blue;}
</style>
</head>



<body>
<ul id="circle">
<li>red</li>
<li>green</li>
<li>blue</li>
<ul>
</body>

Displays

  • red
  • green
  • blue
<body>
<ul id="square">
<li>Little</li>
<li>Tiny</li>
<li>Small</li>
<ul>
</body>

Displays

  • Little
  • Tiny
  • Small



<body>
<ol id="disc">
<li>Golden Delicious Apples</li>
<li>Conference Pears</li>
<li>Black Amber Plums</li>
<ol>
</body>

Displays

  • Golden Delicious Apples
  • Conference Pears
  • Black Amber Plums



Ordered list


<head>
<style>
#decimal
{list-style-type:decimal;}

#lower-roman
{list-style-type:lower-roman;}

#upper-alpha
{list-style-type:upper-alpha;}
</style>
</head>



<body>
<ol id="decimal">
<li>Multiply 2 by 2 then add 5</li>
<li>Multiply 3 by 3 then add 6</li>
<li>Multiply 4 by 4 then add 7</li>
<ol>
</body>

Displays

  • Multiply 2 by 2 then add 5
  • Multiply 3 by 3 then add 6
  • Multiply 4 by 4 then add 7



<body>
<ol id="lower-roman">
<li>Name a Hardware</li>
<li>Name a Software</li>
<li>How many kilo bytes in 1MB</li>
<ol>
</body>

Displays

  • Name a Hardware
  • Name a Software
  • How many kilo bytes in 1MB





<body>
<ol id="upper-alpha">
<li>Climb a coconut tree today</li>
<li>Learn to drive tomorrow</li>
<li>Run a marathon next week</li>
<ol>
</body>

Displays

  • Climb a coconut tree today
  • Learn to drive tomorrow
  • Run a marathon next week




List-Style-Image

Images can be used as bullet points. In the example below, we have created an unordered list item marker with a star image called 'star.jpg'. You can use an image of your choice but remember to re-size them i.e width="20" height="20".

<body>
<ul style="list-style-image:url('../images/star.jpg')"
<li>pen</li>
<li>pencil</li>
<li>crayon</li>
<ul>
</body>

Displays

  • pen
  • pencil
  • crayon

Let us have a look at one more list-item marker with a different image.

<body>
<ul style="list-style-image:url('../images/circ.jpg')">
<li>pen</li>
<li>pencil</li>
<li>crayon</li>
<ul>
</body>

Displays

  • pen

  • pencil

  • crayon



List-Style-Position

The list-style-position is used when you want to place the list item marker inside or outside the list.


Inside

The list-style-position:inside places the list item marker inside the list.

<head>
<style>
#inside {list-style-position:inside;}
</style>
</head>

Inside Postion

  1. In the morning, I am going to have porridge with honey.

  2. In the afternoon, I am going to have salad for lunch.

Outside

The list style-position:outside places the list item marker outside the list.

<head>
<style>
#outside{list-style-position:outside;}
</style>
</head>

Outside Postion

  1. In the morning, I am going to have porridge with honey.

  2. In the afternoon, I am going to have salad for lunch.



Now do the Exercise!