list-style — CSS Technical Interview Questions & Answers

Bullet/number style, position and custom image.

list-style

  • Bullet/number style, position and custom image.
  • list-style is a CSS property: it changes how a selected element looks or sits. You write it inside a rule: .card { list: …; }
  • Change one value, refresh, say what moved: colour, space, size, or stacking. That is how you learn properties — not by memorising the spec.
  • Trap: putting it on the wrong selector (parent vs child). Trap: px only on a phone page — learn rem/%/flex too when it is layout.
  • Box model reminder: width/height, padding, border, margin are different. If list-style is about space, draw the box.

Technical Interview Tip: list-style: one rule on .card, then say what changed.

Code Examples for list-style

list-style — working example

.bullets {
  list-style-type: disc;
  list-style-position: outside;
  padding-left: 1.25rem;
}

.checks {
  list-style-type: "✓ ";
}

.plain {
  list-style: none;
  padding-left: 0;
}

list-style controls marker type, position, and image; list-style: none is common for nav menus.

How to Explain list-style to an Interviewer

What does list-style do?

A CSS property that changes look/layout Write it in a rule and refresh