Lists in CSS

CSS

Preface

There are 2 basic types of lists in CSS:

  • List has ordinal number
  • List only has dot characters, or certain characters …

1. List in HTML and list in CSS

In HTML, there are two main types of lists:

  • unordered list (
      ) – list items are marked with bullets
  • unordered list (
      ) – items in the list are marked with numbers or letters

The CSS list property allows you to:

  • Set different list item markers for ordered lists
  • Set different list item markers for unordered lists
  • Set images as list item marker
  • Add background color to list and list items

2. Various item markers in the list

The list-style-type property specifies the type of the list item marker.

The following example shows some of the available list item markers:

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}
</style>
</head>
<body>

<p>Example of unordered lists:</p>
<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>Example of ordered lists:</p>
<ol class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

</body>
</html>

Note: Some values ​​are for an unordered list, and some values ​​are for an ordered list.

3. An image as a list item marker

The list-style-image property specifies an image as the list item marker:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-image: url('cafedev.vn.gif');
}
</style>
</head>
<body>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

4. Location of list item markers

The list-style-position property specifies the position of the list item markers (bullet points).

“List-style-position: external;” that is, the bullets will be out of the list item. The beginning of each line of a list item is vertically aligned.

“List-style-position: inside;” means that the bullets will be inside the list item. Since it is part of the list item, it will be part of the text and push the text to the beginning:

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}
</style>
</head>
<body>

<h1>The list-style-position Property</h1>

<h2>list-style-position: outside (default):</h2>
<ul class="a">
  <li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
  <li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
  <li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves</li>
</ul>

<h2>list-style-position: inside:</h2>
<ul class="b">
  <li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
  <li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
  <li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves</li>
</ul>

</body>
</html>

5. Styled list with colors

We can also style lists with colors, to make them look a bit more interesting.

Anything added to the or tag affects the entire list, while properties added to the tag will affect individual list items:

<!DOCTYPE html>
<html>
<head>
<style>
ol {
  background: #ff9999;
  padding: 20px;
}

ul {
  background: #3399ff;
  padding: 20px;
}

ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}

ul li {
  background: #cce5ff;
  margin: 5px;
}
</style>
</head>
<body>

<h1>Styling Lists With Colors:</h1>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

Hope this helps!

Source link

Leave a Reply

Your email address will not be published. Required fields are marked *