YogeshChauhan . com

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 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

Implicit and Explicit Joins in Oracle SQLSQL/MySQLHow to pass arguments in SCSS function?SCSSDefault Values in SCSS (Sass)SCSS5 Steps to Create a Line using Canvas Tag in HTML5HTML3 Ways we can create URLSearchParams Objects in JavaScriptJavaScriptHow to create a for loop in SCSS (Sass)?SCSSHow to create a Progress Bar using JavaScript?JavaScriptIs there a way to do a FULL OUTER JOIN in MySQL?SQL/MySQLUPDATE and DELETE Statements in PostgresPostgresHow to avoid element shift on border change while hovering in CSS?CSSArbitrary Arguments in SCSS functionsSCSSHow to remove N/A from Radio Button list in Drupal?Drupal