CSS Lists

Styling lists in CSS allows you to control the appearance of ordered (<ol>) and unordered (<ul>) lists, as well as definition lists (<dl>). You can customize list markers, spacing, and layout to match your design requirements.

Unordered Lists (<ul>)

Unordered lists use bullet points by default. You can change the list style, position, and spacing.


<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Unordered list styles */
.styled-ul {
    list-style-type: square; /* Change bullet to square */
    padding-left: 20px;      /* Add left padding */
    margin: 20px 0;          /* Add top and bottom margin */
}

.styled-ul li {
    margin-bottom: 10px;     /* Add space between list items */
}
</style>
</head>
<body>
    <h1>Unordered List</h1>
    <ul class="styled-ul">
        <li>List Item 1</li>
        <li>List Item 2</li>
        <li>List Item 3</li>
    </ul>
</body>
</html>

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3

Ordered Lists (<ol>)

Ordered lists use numbers by default. You can change the list style, position, and spacing similarly to unordered lists.


<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Ordered list styles */
.styled-ol {
    list-style-type: upper-roman; /* Change number style to upper Roman numerals */
    padding-left: 20px;           /* Add left padding */
    margin: 20px 0;               /* Add top and bottom margin */
}
.styled-ol li {
    margin-bottom: 10px;          /* Add space between list items */
}
</style>
</head>
<body>
<h2>Ordered List</h2>
<ol class="styled-ol">
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ol>
</body>
</html>

Ordered List

  1. First Item
  2. Second Item
  3. Third Item

Definition Lists (<dl>)

Definition lists are used for terms and their definitions.


<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Definition list styles */
.styled-dl dt {
    font-weight: bold;   /* Bold the term */
    margin-top: 10px;    /* Add space above the term */
}

.styled-dl dd {
    margin-left: 20px;   /* Indent the definition */
    margin-bottom: 10px; /* Add space below the definition */
}
</style>
</head>
<body>
<h2>Definition List</h2>
<dl class="styled-dl">
    <dt>Term 1</dt>
    <dd>Definition 1</dd>
    <dt>Term 2</dt>
    <dd>Definition 2</dd>
</dl>
</body>
</html>

Definition List

Term 1
Definition 1
Term 2
Definition 2

CSS Lists – Interview Questions

Q 1: How to remove bullets from a list?

Ans: list-style: none;

Q 2: What is list-style-type?

Ans: It defines bullet style.

Q 3: Can images be used as bullets?

Ans: Yes, using list-style-image.

Q 4: Difference between ul and ol?

Ans: ul is unordered; ol is ordered.

Q 5: Can list items be styled individually?

Ans: Yes, using li selector.

CSS Lists – Objective Questions (MCQs)

Q1. Which property removes list bullets?





Q2. Which value removes bullets completely?





Q3. Which property sets list marker position?





Q4. Which value places bullet inside the content box?





Q5. Which property is shorthand for list styling?





Related CSS Lists Topics