Yogesh Chauhan's Blog

Styling Lists with CSS

in CSS on September 24, 2020

There are three different properties for styling list-items:

1. list-style-type (default: disc) 
2. list-style-image (default: outside) 
3. list-style-position (default: none) 

NOTE: above properties need to be declared in that order.

We can declare each property separately, or we can use list-style shorthand property.

list-style-type

list-style-type defines the shape/type of bullet point for each list-item.

We can add these values for list-style-type:

1. disc
2. circle
3. square
4. decimal
5. lower-roman
6. upper-roman
7. none

Example


li {
 list-style-type: square;
}

li {
 list-style-type: circle;
}

list-style-image

If we want to display an image instead of bullet point, we can use  list-style-image.

We can pass URL or local image as value.


li {
 list-style-image: url(images/image.png);
}

list-style-position

It defines where to position the list-item marker. We can add two values, either “inside” or “outside”.


li {
 list-style-position: outside;
}

amazon

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS? #Aug 1 What is Zdog? #Aug 1 How to add before after image effect using pure CSS? #Jul 31 Add animation to your skills bar using CSS #Jul 31 Use SwiperJS to create mobile touch sliders fast
You might also like these
Learn to create profile card using HTML and CSSCSSHow to create a pricing table using flex in CSS?CSSHow to create a Random Hex Color generator using JavaScript?JavaScriptSocial Media Colors: Sass VariablesMiscellaneousA complete diagram with building blocks of an Angular applicationAngularWhat is the difference between float and double?MiscellaneousCan Firewall and IDPS Stop DDoS Attack?MiscellaneousHow to show widgets on the Appearance tab in WordPress?WordPressWhat does Containment mean in React?ReactWhat is HTMLUnknownElement?HTMLForcing the domain to serve securely using HTTPSMiscellaneousThe 7 Security Objectives of Any Organization for IT and Network SecurityMiscellaneous