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