Home » Tutorials » CSS » Lists

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
<style type=”text/css”>
ol.special{list-style-type:upper-roman;}
ul.special{list-style-image:url(/images/smiley4.gif);}
</style>

<ol class=”special”>
<li> test1 </li> 
<li> test2 </li>
</ol>
<ul class=”special”>
<li> test1 </li> 
<li> test2 </li>
</ul>
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



Link/cite this page

If you use any of the content on this page in your own work, please use the code below to cite this page as the source of the content.

  • Stewart, Suzy. "Lists". After Hours Programming. Accessed on March 17, 2024. https://www.afterhoursprogramming.com/tutorial/css/lists-css/.

  • Stewart, Suzy. "Lists". After Hours Programming, https://www.afterhoursprogramming.com/tutorial/css/lists-css/. Accessed 17 March, 2024.

  • Stewart, Suzy. Lists. After Hours Programming. Retrieved from https://www.afterhoursprogramming.com/tutorial/css/lists-css/.



0 thoughts on “Lists”

  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(/images/smiley4.gif);}

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

    Please explain with the single quotes are?

Leave a Comment

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