1. What are CSS Lists?

Just like HTML lists, CSS lists are helpful when there is a need to structure the data in the form of groups or related items. Actually, CSS lists are just another way to style the HTML lists and enhance their presence on the web browser with the help of some stylesheets. Look at the below example to take a quick view list. This is the simplest way of representing CSS lists or HTML lists:

Example

Top 5 Websites on the internet:
Top 5 Richest cities in the world:
  1. California
  2. Toronto
  3. Paris
  4. London
  5. San Francisco
These are tow simplest examples of the lists.

Try in CodeLab

Tutorial Contents:

  1. Introduction to CSS Lists
  2. List Item Markers of CSS Lists
  3. The List Short-Hand Property
  4. Styling Lists with Colors

1.1. Basic Properties of Lists

Basically, HTML lists are of two types:

  1. Items are marked with bullets – Unorderd Lists
  2. Items are marked with numbers or letters – Ordered Lists

Whereas, CSS lists have the following properties;

  • CSS lists apply advance styling to HTML lists
  • Set the list item marker for ordered lists
  • Set the list item marker for unordered lists
  • An image as list item marker
  • Applying background to the list items or even lists
  • And even much more styling to each and every single element of the lists

2. What are CSS List Item Markers?

The items in a list are marked with some number, letter, bullet, etc, these are called list item markers. The type of list item marker is specified by the list-style-type property.

2.1. CSS List Item Markers for Ordered Lists

Example

  • armenian
  • cjk-ideographic
  • decimal
  • decimal-leading-zero
  • georgian
  • hebrew
  • hiragana
  • hiragana-iroha
  • katakana
  • katakana-iroha
  • lower-alpha
  • lower-greek
  • lower-latin
  • lower-roman
  • none
  • upper-alpha
  • upper-greek
  • upper-latin
  • upper-roman
  • initial
.list1{
list-style-type: armenian;
}

.list2{
list-style-type: lower-roman;
}

Try in CodeLab

2.2. CSS List Item Markers for Unordered Lists

Example

  • disc
  • circle
  • square
  • none
.list1{
list-style-type: circle;
}

.list2{
list-style-type: square;
}

Try in CodeLab

2.3. An Image as a CSS Lists Item Marker

The use of list-style-image property specifies the image as a list marker type.

Example

.list1{
list-style-image: url(‘searchicon.png’);
}

Try in CodeLab

2.4. An Icon as a CSS Lists Item Marker

The CSS lists can be styled by the use of icons, more specifically by the help of font-icons. To do this, CSS pseudo-selectors helps and CSS content property does the job.

Note:

The code after the content property is taken from Font Awesome website. Also, back-slash before the code is a must in order to make it work properly.

Example

ul{
list-style: none;
}
ul li:before{
font-family: “Font Awesome 5 Free”;
content: “\f0eb”;
margin-right: 15px;
}

Try in CodeLab

2.5. Using Text as CSS Lists Item Marker

The lists can be styled by the use of text also. Similar to the previous example where the icon was used as a list item marker, we may type text after content property, in place of code. this text can be styled in any way and it will be placed before all the list items perfectly.

Note:

The back-slash before the text is not needed in this case, just like in the icon case earlier.

Example

ul{
list-style: none;
}
ul li:before{
content: “xxx”;
background-color: #3949ab;
margin-right: 15px;
}

Try in CodeLab

2.6. Positioning the CSS List Item Marker

The list item marker position is set with the help of the list-style-position property. Basically, there are two positions for item markers:

  1. Outside: The marker will be outside of the item or list.default
  2. Inside: The marker remains inside of the item or list.

Consider the below example to understand clearly.

Example

ul.list1{
list-style-position: outside;
}
ul-list2{
list-style-position: inside;
}

Try in CodeLab

2.7. Remove Default Standards/Properties of a CSS List

Since, list-style-type: none; property removes the list markers of ordered or unordered lists, but there are some default padding and margins set to the lists also. We can remove these as follows:

Example

ul{
list-style-type: none;
padding: 0;
margin: 0;
}

Try in CodeLab

3. What is Short-Hand Poperty of CSS Lists?

Furthermore, all the properties of the list can be specified with the help of the list short-hand property, in one declaration. This is done by list-style short-hand property. The order of values is as follows:

  1. list-style-type “if the image is not present, it will be displayed as an alternative.”
  2. list-style-position
  3. list-style-image

Example

ul {
list-style: square outside url(“searchicon.png”);
}

Try in CodeLab

4. How to Style CSS Lists with Colors?

In order to get a pleasant look, lists can be styled with the help of CSS colors to make them beautiful and attractive.

Example

Top 5 Richest People in the world:
  • Bill Gates
  • Elon Musk
  • Jeff Bezos
  • Mark Zuckerberg
  • You 🙂

Top 3 Car Brands:

  • Porsche
  • Genesis
  • Subaru

Try in CodeLab

Give Us Your Feedback
OR
If You Need Any Help!
Contact Us