CSS Lists Tutorial - codeswithpankaj.com
CSS provides various properties to style lists, both ordered (<ol>
) and unordered (<ul>
). This tutorial will cover list-style-type, list-style-position, list-style-image, and the list shorthand property.
1. List Style Type
The list-style-type
property specifies the type of list-item marker (bullet or number).
Example:
Copy <! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >CSS List Style Type - codeswithpankaj.com</ title >
< style >
ul {
list-style-type : square ;
}
ol {
list-style-type : upper-roman ;
}
</ style >
</ head >
< body >
< ul >
< li >Item 1 - codeswithpankaj</ li >
< li >Item 2 - codeswithpankaj</ li >
</ ul >
< ol >
< li >Item 1 - codeswithpankaj</ li >
< li >Item 2 - codeswithpankaj</ li >
</ ol >
</ body >
</ html >
In this example, the unordered list uses square bullets, and the ordered list uses upper Roman numerals.
2. List Style Position
The list-style-position
property specifies the position of the list-item markers (bullets or numbers). It can be inside
or outside
.
Example:
Copy <! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >CSS List Style Position - codeswithpankaj.com</ title >
< style >
ul .inside {
list-style-position : inside ;
}
ul .outside {
list-style-position : outside ;
}
</ style >
</ head >
< body >
< ul class = "inside" >
< li >Item 1 - codeswithpankaj</ li >
< li >Item 2 - codeswithpankaj</ li >
</ ul >
< ul class = "outside" >
< li >Item 1 - codeswithpankaj</ li >
< li >Item 2 - codeswithpankaj</ li >
</ ul >
</ body >
</ html >
Here, the first unordered list has markers inside the list item, and the second has markers outside the list item.
3. List Style Image
The list-style-image
property replaces the list-item marker with an image.
Example:
Copy <! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >CSS List Style Image - codeswithpankaj.com</ title >
< style >
ul {
list-style-image : url ( 'https://example.com/image.png' ) ;
}
</ style >
</ head >
< body >
< ul >
< li >Item 1 - codeswithpankaj</ li >
< li >Item 2 - codeswithpankaj</ li >
</ ul >
</ body >
</ html >
In this example, the list items use an image as the marker.
4. List Shorthand Property
The list-style
shorthand property is used to set list-style-type
, list-style-position
, and list-style-image
in one declaration.
Example:
Copy <! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >CSS List Shorthand - codeswithpankaj.com</ title >
< style >
ul {
list-style : circle inside ;
}
ol {
list-style : lower-alpha outside ;
}
</ style >
</ head >
< body >
< ul >
< li >Item 1 - codeswithpankaj</ li >
< li >Item 2 - codeswithpankaj</ li >
</ ul >
< ol >
< li >Item 1 - codeswithpankaj</ li >
< li >Item 2 - codeswithpankaj</ li >
</ ol >
</ body >
</ html >
Here, the unordered list uses circular markers inside the list item, and the ordered list uses lower alpha markers outside the list item.
5. Custom List Markers
You can create custom list markers using pseudo-elements and CSS.
Example:
Copy <! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >CSS Custom List Markers - codeswithpankaj.com</ title >
< style >
ul {
list-style : none ;
padding-left : 0 ;
}
ul li {
position : relative ;
padding-left : 20 px ;
}
ul li ::before {
content : '\2022' ; /* Bullet character */
position : absolute ;
left : 0 ;
color : red ;
}
</ style >
</ head >
< body >
< ul >
< li >Item 1 - codeswithpankaj</ li >
< li >Item 2 - codeswithpankaj</ li >
</ ul >
</ body >
</ html >
In this example, custom list markers are created using the ::before
pseudo-element and CSS content property.
This tutorial covers essential CSS properties for styling lists. For more tutorials and examples, visit codeswithpankaj.com .
Last updated 3 months ago