CSS Lists - List Item Types, The Short Hand and Colored Lists

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:

These are tow simplest examples of the lists.

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

.list1{
list-style-type: armenian;
}

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

2.2. CSS List Item Markers for Unordered Lists

.list1{
list-style-type: circle;
}

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

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.

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

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.

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

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.

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

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.

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

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:

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

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

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

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.