CSS Lists

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:

CSS Lists
CSS 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;
}

Restaurant Website Using HTML and CSS

Here is an example of anĀ ordered listĀ of 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");
}

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

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

Portfolio Website using HTML and CSS (Source Code)

Thanks for reading! Hope you Visit our website next Time too.

ADVERTISEMENT



Leave a Reply