🎓 A1Learner
🔍
0 of 54 lessons completed

CSS Lists

List styling controls the markers that appear beside list items. The list-style properties pick the marker and set where it sits.

Square markers

The square value gives each item a square marker. The rule targets the whole list at once.

ul {
  list-style-type: square;
}

Markers off

The none value removes every marker. Zero left padding removes the empty space the markers used.

ul {
  list-style-type: none;
  padding-left: 0;
}

Markers inside

The inside value puts the marker inside the text block. A wrapped line starts under the marker, not under the text.

ul {
  list-style-position: inside;
}

Example

ul {
  list-style-type: square;
  list-style-position: inside;
  padding-left: 20px;
}

Key points

  • list-style-type: the property that picks the marker for each item
  • list-style-position: the property that places the marker inside or outside the text block
  • Use decimal, lower-alpha or upper-roman for numbered markers on an ordered list
  • The practice page list is an unordered list, so its markers are bullets by default.
  • The list-style shorthand sets the type and position in one declaration.
  • A marker is part of its list item, and a rule on the list or the item can style it.

In this example, the ul rule sets square markers for the list. The position value puts each marker inside the text block. The padding value sets the space at the left of the list. Each list item takes the square marker from the list rule.

Note

A list keeps its items when the markers are removed.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

Which property picks the marker shown beside each list item?