YogeshChauhan.com

Styling Lists with CSS

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;
}
dreamhost

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 uninstall Cocoapods from the Mac OS? #4 How to Use SQL MAX() Function with Dates? #5 How to add Read More Read Less Button using JavaScript? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Apr 7 Solution for “Yarn build: Failed because of a stylelint error” Apr 7 Make sure your links have descriptive text Apr 7 How to add Laravel to WordPress using Sage theme (and install Tailwind CSS)? Apr 2 How to create a sidebar using pure CSS? Apr 1 How to switch dark and light themes using pure CSS? Apr 1 How to calculate elapsed time in JavaScript?

You might also like these

Solution for the error Commit failed – exit code 1 received in Desktop GithubMiscHow to create a Star Ratings using CSS?CSSHow to animate list items using CSS and JavaScript?CSSIs Software Really Eating The World? I don’t think soMiscThe Lending Club Analysis using Logistic Regression and Random Forest in RStudioMiscClean Form Input With These PHP Functions Before Inserting into DatabasePHPAlways add associated labels to your Form elementsUI/UXPHP Login System using PDO Part 1: Create User Registration PagePHPLearn how to add Scroll Indicator using CSS and JavaScript?CSSCasting in PostgreSQLPostgresHow to create a simple stopwatch using JavaScript?JavaScriptHow to make WordPress main stylesheet (style.css)?WordPress