Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

How to Style a List

A list is an arrangement of text about usually related items, and usually arranged vertically. The items may, or may not be arranged in a specific order. Each item in a list may be marked, or prefaced by a number, letter, or a graphic bullet or icon. Readers like lists because a list is more readable than a block of text and provides order in a more easily understandable way.

  1. bread
  2. milk
  3. eggs
  4. potatoes
  5. broccoli
<ul>
<li>bread</li>
<li>milk</li>
<li>eggs</li>
<li>potatoes</li>
<li>broccoli</li>
</ul>

Shown above is the html code for a basic list. With html you can create a numbered list or a list with the default bullets. But by using some simple CSS style code you can define your list to use roman numerals or letters rather than numbers, or you can define your own graphic to use for the bullets in your list.

  1. bread
  2. milk
  3. eggs
  4. potatoes
  5. broccoli

If you wish to use letters rather than numbers for the items in your list, set the CSS list-style-type property to lower-alpha or upper-alpha. Example code to define a list to use lowercase letters is shown below.

<ol style="list-style-type: lower-alpha;">
<li>bread</li>
<li>milk</li>
<li>eggs</li>
<li>potatoes</li>
<li>broccoli</li>
</ol>
  1. bread
  2. milk
  3. eggs
  4. potatoes
  5. broccoli

If you wish to use roman numerals rather than numbers for the items in your list, set the CSS list-style-type property to upper-roman. Example code to define a list to use roman numerals is shown below.

<ol style="list-style-type: upper-roman;">
<li>bread</li>
<li>milk</li>
<li>eggs</li>
<li>potatoes</li>
<li>broccoli</li>
</ol>
  • bread
  • milk
  • eggs
  • potatoes
  • broccoli

An unordered list may use circle, disc, or square bullets. If, rather than letting the browser set the default bullet type, you wish to explicitly set the bullet type, use the list-style-type property. Example code to define an unordered list to use square bullets is shown below.

<ul style="list-style-type: square;">
<li>bread</li>
<li>milk</li>
<li>eggs</li>
<li>potatoes</li>
<li>broccoli</li>
</ul>
  • bread
  • milk
  • eggs
  • potatoes
  • broccoli

If, rather than use one of the pre-defined bullet types, you would like to use your own image for bullets, use the list-style-image property. Example code to define an image to use for items in an unordered list is shown below.

<ul style="list-style-image: url('bullet.gif');">
<li>bread</li>
<li>milk</li>
<li>eggs</li>
<li>potatoes</li>
<li>broccoli</li>
</ul>
  • 4. bread
  • 5. milk
  • 6. eggs
  • 7. potatoes
  • 8. broccoli



RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268