Blog

CSS Lists

In CSS, there are a lot of options for styling HTML lists. We can change its bullets, colors, positions etc.

Let’s have a quick review. In HTML there are two types of lists:

• <ul>:an unordered list; list items are marked with bullets
• <ol>: an ordered list; list items are marked with numbers or letters

And then we have the <li> element which defines the list items for both unordered and ordered lists.

CSS List Bullet Styles/Types

The list-style-type CSS property sets the bullet type or marker to use.

Valid Values:

• none: no bullet type
• disc: a filled circle; default value
• circle: a hollow circle
• square: a filled square
• decimal: decimal numbers e.g. 1, 2, 3
• decimal-leading-zero: decimal numbers with leading zeros e.g. 01, 02, 03
• lower-roman: lowercase roman numerals e.g. i, ii, iii
• upper-roman: uppercase roman numerals e.g. I, II, III
• lower-alpha: lowercase letters e.g. a, b, c
• upper-alpha: uppercase letters e.g. A, B, C
• lower-greek: lowercase classical greek e.g. α, β, γ
• arabic-indic: traditional Arabic-Indic numbering
• georgian: traditional Georgian numbering
• hebrew: traditional Hebrew numbering
• armenian: traditional Armenian numbering

Here is an example of an unordered list bullet types.

 #ul1 {  
   list-style-type: none;  
 }  
 #ul2 {  
   list-style-type: disc;  
 }  
 #ul3 {  
   list-style-type: circle;  
 }  
 #ul4 {  
   list-style-type: square;  
 }  

Here is an example of an ordered list bullet types.

 #ol1 {  
   list-style-type: none;  
 }  
 #ol2 {  
   list-style-type: decimal;  
 }  
 #ol3 {  
   list-style-type: lower-roman;  
 }  
 #ol4 {  
   list-style-type: lower-alpha;  
 }  

CSS List Bullet Position

The list-style-position CSS property sets the position (whether it’s outside or inside) of the bullets.

Valid Values:

• outside: sets the bullets to sit outside the list items (default)
• inside: sets the bullets to sit inside the list items

Example

 #outside {  
   list-style-position: outside;  
 }  
 #inside {  
   list-style-position: inside;  
 }  

CSS List Bullet Images

In CSS, it’s possible to have images as list bullets.

The list-style-image CSS property sets an image as bullets. Example:

 ul {  
   list-style-image: url("heart.png");  
 }  

However, this property is very limited in terms of controlling the position, size etc. of the bullets.

For that reason, we better use CSS background properties.

 ul {  
   padding-left: 20px;  
   list-style-type: none;  
 }  
 /* the selector below targets the */  
 /* li elements inside the ul element */  
 ul li {  
   padding-left: 20px;  
   background-image: url("images/star.png");  
   background-position: top left;  
   background-size: 16px 16px;  
   background-repeat: no-repeat;  
 }  

CSS List with Padding, Margin and Colors

To make lists look interesting we can add paddings, margins and colors.

Note: Any style set to the <ul> and <ol> elements affects the entire list while any style added to the <li> element only affects list items.

 ol {  
   list-style-type: upper-roman;  
   color: #f8f9f9;  
   background: #173459;  
   padding: 15px;  
 }  
 ​  
 ul {  
   list-style-type: square;  
   color: #f8f9f9;  
   background: #173459;  
   padding: 15px;  
 }  
 ​  
 ol li {  
   background: #d9534f;  
   padding: 5px;  
   margin-left: 30px;  
 }  
 ​  
 ul li {  
   background: #d9534f;  
   padding: 5px;  
   margin-left: 30px;  
 }  

Check out more…..