Lists

Lists can be styled using the following CSS properties:

 

  • list-style
  • list-style-image
  • list-style-position
  • list-style-type

 

Property Description Value
list-style Shorthand to specify all properties "inside square"
list-style-image Specifies an image for the marker User defined URL
list-style-position Specifies whether marker appears inside or outside the containing element none

inside

outside

list-style-type Specifies the type of list item:

Unordered lists

Ordered lists

none

circle

disc *

square

--------

decimal *

decimal-leading-zero

lower-alpha

upper-alpha

lower-roman

upper-roman

lower-greek

lower-latin

 

<!DOCTYPE html>
<html>
    <head>
        <title>My Document Title</title>
        <style type="text/css">
			ol { list-style-type:upper-roman; }
			ul { list-style-type:square; }
        </style>
    </head>
    <body>
		<ol>
			<li>1st RULE: You do not talk about FIGHT CLUB.</li>
			<li>2nd RULE: You DO NOT talk about FIGHT CLUB.</li>
			<li>3rd RULE: If someone says "stop" or goes limp, taps out the fight is over.</li>
		</ol>
		<br>
		<ul>
			<li>4th RULE: Only two guys to a fight.</li>
			<li>5th RULE: One fight at a time.</li>
			<li>6th RULE: No shirts, no shoes.</li>
		</ul>
		<br>
		<ul style="list-style-image:url('/images/FightClub.jpg'); list-style-position:inside;">
			<li>7th RULE: Fights will go on as long as they have to.</li>
			<li>8th RULE: If this is your first night at FIGHT CLUB, you HAVE to fight.</li>
		</ul>
    </body>
</html>
  1. 1st RULE: You do not talk about FIGHT CLUB.
  2. 2nd RULE: You DO NOT talk about FIGHT CLUB.
  3. 3rd RULE: If someone says "stop" or goes limp, taps out the fight is over.

 

  • 4th RULE: Only two guys to a fight.
  • 5th RULE: One fight at a time.
  • 6th RULE: No shirts, no shoes.

 

  • 7th RULE: Fights will go on as long as they have to.
  • 8th RULE: If this is your first night at FIGHT CLUB, you HAVE to fight.

Leave a Reply