List Style

Exercise

In the "index.html" file, replace the code with the following:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS</title>
  <link rel="stylesheet" href="./css/styles.css">
</head>

<body>
  <h1>List Style</h1>
  <ul>
    <li><a href="#">Default List Style</a></li>
    <li id="no-list-style"><a href="#">No List Style</a></li>
    <li id="disc-style"><a href="#">Prices</a></li>
    <li id="circle-style"><a href="#">Contact</a></li>
  </ul>
</body>

</html>

Save.
If "Live Server" is not already running, right-click anywhere in the editor and select "Open with Live Server" from the context menu.
In the "styles.css" file, replace the code with the following:

#no-list-style {
  list-style: none;
}

#disc-style {
  list-style: disc;
}

#circle-style {
  list-style: circle;
}

Save.
In the browser, you should see the following:

Code Walkthrough and Explanation

`list-style`

In CSS, the list-style property is used to control the appearance of the markers (or bullets) that appear alongside an unordered list (<ul>) or an ordered list (<ol>).

The list-style property has three sub-properties:

list-style-type: This sub-property determines the type of marker to be used. Some common values for list-style-type are disc (a filled circle), circle (an unfilled circle), square (a filled square), decimal (numbers), lower-roman (lowercase Roman numerals), upper-roman (uppercase Roman numerals), lower-alpha (lowercase letters), and upper-alpha (uppercase letters).
list-style-position: This sub-property determines whether the marker appears inside or outside of the list item. The default value is outside, which means the marker appears to the left of the list item. Setting the value to inside will cause the marker to appear inside the list item.
list-style-image: This sub-property allows you to use a custom image as the marker. You can specify the path to the image file using the url() function.

Experiment with the Code

Try creating an ordered list and changing the list-style.

Video and Code References

Questions? Subscribe and ask in the video comments:

GitHub and Other References