Lists

HTML lists can be styled with great detail, but we will cover a couple of these properties. This can become extremely complicated if you are attempting have very specific customizations to lists inside lists, which we will not be dealing with in this tutorial. Lists can be customized even more than standard paragraph.

CSS Common List Properties

  • list-style-type – sets the bullet style (roman numerals, numbers, circles, etc)
  • list-style-image: set a custom bullet style using an image

We will be using the first property with an ordered list and the other property with an unordered list.

Example

Result
  1. test 1
  2. test 2
  • test1
  • test2

We assigned both lists to a class called special this time so that I wouldn’t destroy my category lists on your left. Let’s discuss our ordered list first (ol). We changed the list-style-type property to a value of “upper-roman” that gives us the awesome incremental roman numeral effect in the first list.

In the second list, the unordered list (ul), we discover the super fantastic list-style-image property. Obviously, if we are setting an image and not a form of order, this is essentially useless in an ordered list. We create a CSS url reference, url(”) where we put our link inside the single quotations. In my case, I have a crazy smiley face to brighten the day.

Other Usable CSS Properties for lists

As I mentioned above, lists have more styling options than a paragraph. This means they can use everything that paragraphs can. The most common adjust I make to lists, is the to the margin and padding properties. Feel free to tinker with all kinds of properties; don’t limit yourself.

References

If you enjoyed this resource, support me by sharing this page with others.
Share on Facebook
Facebook
Share on Google+
Google+
Share on StumbleUpon
StumbleUpon
Digg this
Digg
Tweet about this on Twitter
Twitter
Share on Reddit
Reddit

Leave a Comment

  1. I am not trying to be a hard arse, but you really need to pay attention to what you say in the tutorial and what the code you write says:

    ul.special{list-style-image:url(https://3mxock1ugpvl207mv625mlv8-wpengine.netdna-ssl.com/images/smiley4.gif);}

    …url(”) where we put our link inside the single quotations.

    Please explain with the single quotes are?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.