Tag Archives: lists

My Fair HTML List

CSS rarely flexes its styling muscles stronger than in the display of ordered and unordered lists. HTML outputs basic-looking lists like these…

basic_ol basic_ul

…but CSS can change them into great-looking lists like these:

opencircle_list squarefont_list romanborders_list
alphabottomborder_list gifbackground_list

But exactly how CSS can style these lists can be pretty obscure to a beginning webmaster (or even old hats like me). Here’s how to turn your plain ol’ lists into something lovely, sleek, and even spectacular. (Read to the end if you want to know how to create these five styled lists!)

Step 1: Label Your Lists

Before you can begin styling any specific list, you have to give it a name. CSS provides two ways to name your lists: classes and IDs. (CSS classes can be used over and over, but IDs can only be used one time on each page.)

CSS classes look like this: .list1 {styling rules go here}
CSS IDs look like this: #list1 {styling rules go here}

You can label your list anything you want to, as long as you remember to link your CSS style rules with your list, like so:

<ul id=”list1″>

<ul class=”list1″>

Step 2: Select Your List Styles

Once you’ve labeled your list, you can begin putting in style rules to make it fit your design. CSS has three style rules that pertain specifically to list styling:

  • list-style-type: Changes the bullet point out beside each list item to look a little different. (See the solid disc beside this list item?)
  • list-style-position: Changes whether the bullet point is included with the list item or hangs out a little farther beside it. (The “hangs out” position is the default)
  • list-style-image: Specifies a custom image as your bullet point image. (You have to make or find the bullet point image yourself)

List-Style-Type

To change the bullet point image with list-style-type, you simply write a line of CSS that looks like this:

#list1 {list-style-type: circle;}

If you don’t want an open circle as your bullet point, you can replace the word “circle” in the above example with another word from the following list. (Note: numbers will not work with unordered [un-numbered] lists, and likewise, bullet point images will not work with ordered lists.)

List-Style-Type Bullet Point Types

For Unordered Lists For Ordered Lists
disc (filled-in circle)
circle (open circle)
square (filled-in square)
decimal (.1, .2, etc.)
decimal-leading-zero (0.1, 0.2, etc.)
lower-roman (i, ii, iii, etc.)
upper-roman (I, II, III, etc.)
lower-greek (classical Greek numerals)
lower-alpha/lower-latin (a, b, c, etc.)
upper-alpha/upper-latin (A, B, C, etc.)
georgian (Georgian numerals)
armenian (Armenian numerals)

Also, if you don’t want a bullet point at all, you can put “list-style-type: none;” into your CSS instead.

List-Style-Position

To affect whether the bullet point displays closer to the list item than the default, write a line of CSS like this:

#list1 {list-style-position: inside;}

(If you want the bullet point to appear a little farther away from the list item, you can either type “list-style-position: outside;” or you can just leave out the “list-style-position” stuff altogether.)

List-Style-Image

To select a custom image for your bullet points, just add a line of CSS which looks like this:

#list1 {list-style-image: url(‘IMAGE_FILENAME.jpg’);}

Replace the “IMAGE_FILENAME.jpg” with the name of your custom image, and you’re in business!

Step 3: Write Your List Style Rules

Once you’ve figured out how you want your list styled, you can combine all these various properties into one CSS rule, like so:

#list1 {list-style-type: square; list-style-position: inside; list-style-image: url(‘myimage.gif’);}

You can also combine all the “list-style” things into one shorthand property, like so:

#list1 {list-style: square inside url(‘myimage.gif’);}

When writing the shorthand, make sure that the “list-style-image” choice comes first, then “list-style-position,” and last, “list-style-image.”

Step 4: Make It Spiffy

Thankfully, you don’t have to just write “list style” rules. You can also change the list’s background color, font size, font family, borders, and all sorts of things, just as you can style other parts of your HTML code. Not only that, but you can style each list item, too! Check out the following examples to see how different padding, colors, borders, etc. affect your list’s look:

opencircle_list
#list1 {list-style-type: circle;
width: 150px;}

#list1 li {padding: 0px;
margin: 0px;}

squarefont_list
#list2 {list-style-type: square;
width: 150px;
font-family: “Verdana”, sans-serif;
font-size: 15px;}

#list2 li {padding: 5px;
margin: 0px;}

romanborders_list
#list3 {list-style-type: upper-roman;
width: 150px;
font-family: “Garamond”, serif;
font-size: 18px;}

#list3 li {border: 1px solid #336699;
margin: 5px;
padding-left: 4px;}

alphabottomborder_list
#list4 {list-style-type: lower-alpha;
width: 150px;
font-family: “Bell MT”, serif;}

#list4 li {border-bottom: 1px dotted #FF00FF;}

gifbackground_list
#list5 {list-style-image: url(‘flashy.gif’);
width: 150px;
background-color: #000000;
font-family: “Chixat 8”;
font-size: 10px;}

#list5 li {background-color: #000000;
color: #FFFFFF;
margin: 3px;
padding-top: 2px;}

(Note: the screenshot of the last list doesn’t show the animated GIF bullet point in action, so here it is: flashy)

Summary

Lists, like any other element of an HTML page, can be styled to perfection with just a few bits of CSS. Experiment with your own list styles and see what you can create!