CSS List Styles

Published December 28, 2015 by CSS Newbies.

HTML unordered lists are characterized by <li> elements within a <ul> tag. The default styling of these unordered lists indicates that each individual list item is to follow a round bullet symbol, but the list-style-type property does take other values. Setting the list-style-type value to circle, for example, will cause the default bullet styling to be replaced by a circle, and list-style-type: square replaces the default bullet with a square.

list-style-type: circle;

Shapes aren’t the only options to choose from. You can use list-style-type: decimal to replace the default styling with sequential numbers, list-style-type: upper-latin for the default styling to be replaced with sequential letters (uppercase, for lowercase use lower-latin). You can also use upper-roman or lower-roman for sequential roman numerals (in upper or lower case, respectively). There’s also always the option to use list-style-type: none to get rid of the default styling all together.

Another way to customize the li elements of the <ul> tag is by using the css :before pseudo-selector with the content property. Set the list-style-type of the <ul> to none, then use the li selector with :before to set the content to be any symbol you like, which will make your symbol of choice appear before all the list items, just like the default bullet styling would. The css should look something like this:

    list-style-type: none;
    content: "^";
    position: absolute;

  1. Matthew (reply)

    “CSS is great. If you were to style a few ordered lists, for instance, and each of them had those style properties, it’d be a LOT of code. And every time you change one style, you have to change the code for all the others.
    I highly recommend checking out some of the free HTML+CSS content out there if you haven’t already. http://www.codecademy.com is completely free and their HTML+CSS course is doable in a single afternoon.”

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>