Styling Lists Using CSS

No more default bullet points or simple numbered lists. In this CSS tutorial we are going to learn how to style our HTML list items by using different numbers, letters, bullets, or images.

We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.

First, let’s learn the two different types of lists we can create.

• Ordered Lists: They are specified by using <ol></ol> in our HTML page. Their elements are marked with numbers or letters.
• Unordered Lists: They are specified by using <ul></ul> in our HTML page. Their elements are marked with bullets or images.

STEP ONE:
Let’s create an HTML page with an unordered list and a ordered list to see how many styles we can give them using CSS.

   <ul>
   <li>CSS Atoms</li>
   <li>Illustrator Atoms</li>
   <li>Photoshop Atoms</li>
   <li>HTML Atoms</li>
   </ul>
 
   <ol>
   <li>JavaScript Atoms</li>
   <li>PowerShell Atoms</li>
   <li>SQL Atoms</li>
   <li>The Web Made Easy</li>
   </ol>

STEP TWO:
Now that we have our lists ready to style, link a CSS to your HTML page and add an specification for the unordered list and one for the ordered list like shown below:

ul {
}
 
ol {
}

STEP THREE:
First let’s use the list-style-type to style the bullets of our unordered list:

• Disc: the default marker type:
  
  Code Block

  Ask a Question

  Download Source

  style.css

  Disc List Style Type:

  ul {
  	list-style-type: disc;
  }
      

  Preview:
  


• Circle: Gives a small circle as bullet:
  
  Code Block

  Ask a Question

  Download Source

  style.css

  Circle List Style Type:

  ul {
  	list-style-type: circle;
  }
      

  Preview:
  


• Square: Gives a small square as bullet:
  
  Code Block

  Ask a Question

  Download Source

  style.css

  Square List Style Type:

  ul {
  	list-style-type: square;
  }
      

  Preview:
  


• None: Removes any bullet or marker from the list:
  
  Code Block

  Ask a Question

  Download Source

  style.css

  None List Style Type

  ul {
  	list-style-type: none;
  }
      

  Preview:
  

We used over 10 web hosting companies before we found Server Intellect. They offer dedicated servers, and they now offer cloud hosting!

STEP FOUR:
The list-style-type property is also used to style ordered lists. There are 11 different values to style an ordered list. This time, I am going to name the different kinds of ordered list values and give an example of each one.

• list-style-type: armenian
  
  


• list-style-type: decimal (default type)
  


• list-style-type: decimal-leading-zero
  
  


• list-style-type: georgian
  
  


• list-style-type: lower-alpha (alphabetical order)
  
  Use list-style-type: upper-alpha to set capitals.


• list-style-type: lower-greek
  
  


• list-style-type: lower-latin (same as alpha / alphabetical order)
  
  Use list-style-type: upper-latin to set capitals.


• list-style-type: lower-roman
  
  Use list-style-type: upper-roman to set capitals.

Now that we know the different available types of ordered list markers. Let’s style our ordered list with upper-roman numbers:

ol {
	list-style-type:upper-roman;
}

Preview:

STEP FIVE:
Did you know that you can set any image as the marker for your list? Yes, instead of using the list-style-type property we can use the list-style-image property to display any graphic.
Let’s give it a try:
Firs, download or make your desired bullet graphic and save it for web inside your images folder.
I am going to use this blue star: 

Then, add the list-style-image property to your unordered list specification and add the URL of your saved graphic:

ul {
	list-style-image: url(images/marker.jpg);
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

NOTE: For cross-browser compatibility, I set the list-style-item property to none and padding and margin to 0px.

Preview:

This is it! As you can see, lists can be styled just like any other element. Go ahead and make your past HTML lists appealing!

Need help with cloud hosting? Try Server Intellect. We used them for our cloud hosting services and we are very happy with the results!

Download Give Style To Lists Source File