CSS List

❮ Prev Next ❯

Lists are a very important part of many web pages.

Lists are common elements used to organize and present information on webpages.

CSS provides powerful styling options to customize the appearance of lists, including bullet points, numbering, spacing, and more.

In this chapter, we'll explore the essentials of CSS list styling to help you create visually appealing and well-structured lists for your web projects.

Basic List Styling

By default, web browsers apply certain styles to links, such as underlining and changing the text color.

CSS offers several properties to style the appearance of lists, including list-style-type, list-style-positionand list-style-image. These properties allow you to customize the bullet points or numbering style, their position relative to the list item, and even replace them with custom images.

Example: 


ul {
  list-style-type : square;/* Use square bullets for unordered lists */
} 

ol {
  list-style-type : decimal;/* Use decimal numbering for ordered lists */
} 

ul {
  list-style-type : url('bullet.png');/* Use custom image for bullets */
}

List Item Styling

In addition to styling the list itself, you can also apply styles to individual list items using CSS. This allows you to customize the appearance of each item, such as changing the text color, font size, or adding background colors or borders.

Example: 


li {
  color : #3498db;/* Set text color for list items */
  font-size : 16px;/* Set font size for list items */
  background-color : #f2f2f2;/* Add background color to list items */
  padding : 5px 10px;/* Add padding to list items */
  border-radius : 5px;/* Add rounded corners to list items */
}

Horizontal Lists

By default, lists are displayed vertically, with each item stacked on top of the next. However, CSS allows you to style lists to display horizontally, which can be useful for navigation menus or inline content.

Example: 


ul {
  display : flex;/* Use flexbox to display list items horizontally */
  justify-content : space-around;/* Distribute list items evenly */
} 

li {
  color : inline-block;/* Display list items as inline blocks */
}

Nested Lists

Lists can also be nested within each other to create hierarchical structures. When styling nested lists, it's essential to use CSS selectors to target specific levels of nesting and apply styles accordingly.

Example: 


ul ul {
  margin-left : 20px;/* Indent nested unordered lists */
} 

ol ol {
  margin-left : 20px;/* Indent nested ordered lists */
}

Example 

<!DOCTYPE HTML>
<html>
    <head>
      <style>
      ul {
        display : flex;
        justify-content : space-around;
      } 
      
      li {
        color : #3498db;
        font-size : 16px;
        background-color : #f2f2f2;
        padding : 5px 10px;
        border-radius : 5px;
      } 
      </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
      <title>Title of the Document</title>
    </head>
    <body>
      <h3>welcome to Coding Koleji </h3>
      <ul>
        <li>This is the first item on the list.</li>
        <li>This is the second item on the list.</li>
        <li>This is the third item on the list.</li>
      </ul>
      <ol>
        <li>This is the first item on the list.</li>
        <li>This is the second item on the list.</li>
        <li>This is the third item on the list.</li>
      </ol>
    </body>
  </html>

CSS provides extensive options for styling lists, allowing you to customize their appearance and layout to suit your design needs. By mastering the techniques outlined in this chapter, you can create visually appealing and well-organized lists for your web projects.

Keep experimenting with different styles and approaches to discover the most effective list designs for your specific requirements.

❮ Prev Next ❯