CSS Lists










 

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…..

Share on:

Leave a Comment