ADVERTISEMENT

CSS Lists

Telegram Group Join Now

ADVERTISEMENT

CSS Lists

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

ADVERTISEMENT

ADVERTISEMENT

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

CSS Lists
CSS Lists

 

ADVERTISEMENT

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

ADVERTISEMENT

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.

ADVERTISEMENT

#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

ADVERTISEMENT

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

ADVERTISEMENT

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:

ADVERTISEMENT

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

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

ADVERTISEMENT

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

ADVERTISEMENT

For that reason, we better use CSS background properties.

ADVERTISEMENT

 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

ADVERTISEMENT

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

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT