css 101

Lists

An ordered or unordered list can be much more than a simple set of bullet points - in CSS, lists are often used to create navigation elements such as horizontal or vertical menus. Let's start with options for simple lists.

For unordered lists, you can select whether the bullet style should be circular, square, or none:

  • This
  • Is a
  • List

Try changing "square" to "circle" or "disc" for other effects. You can also use an image in place of your bullets by specifying its URL:

  • This
  • Is a
  • List

Ordered lists can have any combination of Roman numerals, decimal, alphabetic characters and more. A nice trick is to nest lists within lists, then use the CSS nested selector syntax we learned earlier to style different levels of your list differently, like this:

  1. Person
  2. Place
    1. Region
    2. Country
      1. United States
      2. Canada
      3. Mexico
    3. State
  3. Thing

In the example here, ordered lists "ol" are told to use "upper-roman" as the list-style-type, unless it's an ordered list inside of an ordered list, in which case the list-style-type is "decimal"... unless it's a triply nested ordered list, in which case the list-style-type is "lower-alpha." This technique is the key to building CSS based flyout navigation menus.