What is CSS?
How to Create a Custom CSS List


Article Difficultly Level: Medium
Article Viewed over 9,354 Times

Has CSS always been somewhat of a mystery to you? Do you sometimes wonder what the benefits are to using CSS? Would you like to learn how to style HTML unordered list?

If you said yes to everything above, then this article is for you. I recently was searching the web for the easiest way to customize my unordered list using CSS, and found many possible solutions. However, none of the articles really explained what the CSS code was doing and why.

Article Guide: Real quick, when I use brackets [] it means I'm calling your attention to just that line of code. Do not insert brackets into your CSS code thinking this is part of CSS, because it is not. I will always present images with the actual code displayed. Use that instead. Thanks!

I decided to write this article because I was trying to find the best way to design unordered HTML list for my own site. Because of my CSS layout structure, I was having problems just assigning CSS to the <UL> and <LI> tags. So the simple solution is to define a CSS class. Let's begin.

Okay, so why would we want to control an unordered list through CSS? Well, it allows us to add neat design elements such as graphics to replace those nasty looking bullets. It also allows us to get very specific with positioning of these graphics. Using CSS to control the list also allows for repetition of graphics without slowing down the page loading.

Code Example #1

Below is a normal looking unordered list.
  • Item 1
  • Item 2
  • Item 3

It looks pretty bland doesn't it? So how do we spice it up? Keep reading the article and follow along with the referenced code examples.

(Figure One) - Explained

In the class .orangelists, [display:inline;] that is by default, so you don't actually have to include that in your CSS. I just put it in there so you would know. I set all [padding] to zero's because we don't need any of that.

.orangelists - Broken Down
The class [.orangelists] will get attached to the <UL> tag inside your HTML document. You can use this class anywhere on your HTML page you want to use the class. You always want to set the [margins] to zero, and set [text-indent] to zero.

[text-indent] controls how far away your text sits from the bullet point.

.orangelists li - Broken Down
You can continue a CSS Class by typing its name, then a space, and the HTML element you want to control. Example: .orangelists li

When you add an HTML element after a class, you now are setting the parameters for that element. In this case it would be the <LI> tag, which is of course the sub element of the <UL> tag.
css code

To the right you will see the finished CSS code to create an unordered list. Take a moment to read through
(Figure One) - Explained if you haven't already done so. Allow me to further expound on the .orangelists li class now. The [list-style-type: none;] sets the default bullets that you would normally see if you created an unordered html list, to go away. So why do we do this? Well, it's so we can make room for our cool graphic to represent as a bullet point. In my case, I have orange check marks. Open Adobe Photoshop to create your graphic, or use a free graphic. The code [background:url(yourimage.gif) no-repeat 0 50%;] sets the image to be used as the bullet within the unordered list. This image gets attached to each <LI> item line you have in your html code.

Let's take a closer look at the [background] css property. What is this doing to the unordered list and what does it look like? If you look to the right in Code Example #2, you will see my orange check box graphics taking the place for bullet points.

To conclude this tutorial, I just want to quickly cover what the property [padding-left:30px;] is controlling. This parameter is controlling the space between the graphic and the text. If you adjust that padding to say 10px, the graphic will be very close to the text, and it probably won't look visually correct.

My Follow Up Notes:
This is just one way of controlling an unordered list using CSS. I used the class method because it worked for my situation. However, you can apply this CSS directly to the UL and LI HTML elements. That means instead of creating a class like .orangelists, you can simply reference the <UL> tag and write the CSS code to control it.

Possible Spacing Issue:
One last thing, you might run into a spacing issue between your list items. You can either solve this problem by using <BR> tags after each ending <LI> tag, or set the
[line-height] property to a value greater then 100%. It is probably easier to use the line-height property to fix the spacing.

I hope you found this tutorial useful. Keep checking back as I will continue to add more content on a variety of subjects.

Code Example #2
Below is the finished check box list using the code from Figure One. Take a moment to get a visual of how it is suppose to looks.

  • New Visits to Returning Visits
  • Average Time on Site
  • Bounce Rate
  • Completed Goals
Hire Me

If you found this article helpful, but need further help on a web project I am available for hire. Simply use my contact form by clicking here.

rss feed subscribe Wichmann Enterprise Tutorials:
Subscribe to my RSS Article Feed.