in

CSS LIST | Learn How To Add Beautiful List To Web Page Using CSS

In this tutorial we will be discussing about CSS LIST and how you can use different CSS properties to style the list on your web page. In our previous tutorial we looked at CSS MARGIN and how you can design those using flexible CSS properties. If you haven’t gone through the tutorial you can do so using the link below

Read previous tutorial on: CSS MARGIN | Learn How to Design The Web Page Margin Using CSS

CSS LIST

CSS allows developers to style the list on their web pages using different list styling properties. Sometimes you might not be satisfied with the default list properties given by HTML and you want to further style them. We can use CSS to achieve this purpose. Some of the list properties we can further add to our list include:

  • The list style type
  • The list style position
  • The list style
  • The list style image

The list-style-type

The list -style-type property is used to determine the type of bulletin used on your list. When setting the bulletin style please have it in mind that we have the ordered listing and the unordered listing.

The unordered listing

In the unordered listing we have different bulletin styles which include:

  • The circle bulletin
  • The disk bulletin
  • The square bulletin
  • The none

Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .listingstyle{
         list-style-type: circle;
      }
      .listingstyle1{
         list-style-type: square;
      }
      .listingstyle2{
         list-style-type: disc;
      }
      .listingstyle3{
         list-style-type: none;
      }
   </style>
   <title>Illustration of style property</title>
</head>
<body>
   <ul class="listingstyle">
      <li>HTML</li>
      <li>CSS</li>
      <li>JAVASCRIPT</li>
      <li>SEO</li>
   </ul>

   <ul class="listingstyle1">
      <li>HTML</li>
      <li>CSS</li>
      <li>JAVASCRIPT</li>
      <li>SEO</li>
   </ul>

   <ul class="listingstyle2">
      <li>HTML</li>
      <li>CSS</li>
      <li>JAVASCRIPT</li>
      <li>SEO</li>
   </ul>

   <ul class="listingstyle3">
      <li>HTML</li>
      <li>CSS</li>
      <li>JAVASCRIPT</li>
      <li>SEO</li>
   </ul>

   
</html>

Result

Illustration of style property
  • HTML
  • CSS
  • JAVASCRIPT
  • SEO
  • HTML
  • CSS
  • JAVASCRIPT
  • SEO
  • HTML
  • CSS
  • JAVASCRIPT
  • SEO
  • HTML
  • CSS
  • JAVASCRIPT
  • SEO

The ordered listing

using the ordered listing we have different styles which include:

  • The decimal e.g 1,2,3
  • The decimal leading zero e.g 01,02,03
  • The lower-roman e.g i,ii,iii
  • The upper-roman e.g I,II,III,IV,V
  • The lower-alpha e.g a,b,c
  • The upper-alpha e.g A,B,C,D
  • The lower-latin e.g a,b,c,d
  • The-upper-latin e.g A,B,C,D
  • The lower-greek e.g alpha,beta,gamma
  • The georgian e.g

Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .listingstyle{
         list-style-type: decimal;
      }
      .listingstyle1{
         list-style-type: decimal-leading-zero;
      }
      .listingstyle2{
         list-style-type: lower-alpha;
      }
      .listingstyle3{
         list-style-type: upper-alpha;
      }
      .listingstyle4{
         list-style-type: lower-latin;
      }
      .listingstyle5{
         list-style-type: upper-latin;
      }
      .listingstyle6{
         list-style-type: lower-greek;
      }
      .listingstyle7{
         list-style-type: georgian;
      }
   </style>
   <title>Illustration of style property</title>
</head>
<body>
   <ul class="listingstyle">
      <li>HTML</li>
      <li>CSS</li>
      <li>JAVASCRIPT</li>
      <li>SEO</li>
   </ul>
<br>
   <ul class="listingstyle1">
      <li>HTML</li>
      <li>CSS</li>
      <li>JAVASCRIPT</li>
      <li>SEO</li>
   </ul>
<br>
   <ul class="listingstyle2">
      <li>HTML</li>
      <li>CSS</li>
      <li>JAVASCRIPT</li>
      <li>SEO</li>
   </ul>
<br>
   <ul class="listingstyle3">
      <li>HTML</li>
      <li>CSS</li>
      <li>JAVASCRIPT</li>
      <li>SEO</li>
   </ul>
<br>
   <ul class="listingstyle4">
      <li>HTML</li>
      <li>CSS</li>
      <li>JAVASCRIPT</li>
      <li>SEO</li>
   </ul>
<br>
   <ul class="listingstyle5">
      <li>HTML</li>
      <li>CSS</li>
      <li>JAVASCRIPT</li>
      <li>SEO</li>
   </ul>
<br>

   <ul class="listingstyle6">
      <li>HTML</li>
      <li>CSS</li>
      <li>JAVASCRIPT</li>
      <li>SEO</li>
   </ul>
<br>

   <ul class="listingstyle7">
      <li>HTML</li>
      <li>CSS</li>
      <li>JAVASCRIPT</li>
      <li>SEO</li>
   </ul>
</html>

Result

Illustration of style property
  • HTML
  • CSS
  • JAVASCRIPT
  • SEO

  • HTML
  • CSS
  • JAVASCRIPT
  • SEO

  • HTML
  • CSS
  • JAVASCRIPT
  • SEO

  • HTML
  • CSS
  • JAVASCRIPT
  • SEO

  • HTML
  • CSS
  • JAVASCRIPT
  • SEO

  • HTML
  • CSS
  • JAVASCRIPT
  • SEO

  • HTML
  • CSS
  • JAVASCRIPT
  • SEO

  • HTML
  • CSS
  • JAVASCRIPT
  • SEO

The list style position

The list style position is used to specify if a long text or sentence that falls into the second line should align with the first line or should start under the marker. Some of the list-style-position property values we have include

  • inside – used to place text that entered the second line under the marker
  • outside – used to align text that goes to the second line under the start of the first line

Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .listingstyle{
         list-style-type: decimal; 
      }
      .first_item{
         list-style-position: inside;
      }
      .second_item{
         list-style-position: outside;  
      }
   </style>
   <title>Illustration of list style position </title>
</head>
<body>
   <ul class="listingstyle">
      <li class="first_item">HTML</li>
      <li class="second_item" >CSS</li>
   </ul>
</html>

Result

Illustration of list style position
  • HTML
  • CSS

The list style image property

This property allows us to make use of images as bulletin. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .listingstyle{ 
         list-style-image: url(imageurl.jpeg);
      }
      .first_item{
         list-style-position: inside;
      }
      .second_item{
         list-style-position: outside;  
      }
   </style>
   <title>Illustration of list style image property </title>
</head>
<body>
   <ul class="listingstyle">
      <li class="first_item">HTML</li>
      <li class="second_item" >CSS</li>
   </ul>
</html>

The list style property

The list style property allows us to add more than one property in one declaration. Using this property we can have they list-style-type and position declared in one expression. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   
   <title>Illustration of list-style property</title>
</head>
<body>
   <ul style="list-style-type: circle inside;">
      <li>HTML</li>
      <li>CSS</li>
      <li>JAVASCRIPT</li>
      <li>SEO</li>
   </ul>
</html>

Result

Illustration of list-style property
  • HTML
  • CSS
  • JAVASCRIPT
  • SEO

conclusion

The CSS list properties listed above are needed when styling your list on a web page. A good understanding of this list properties will enable you make good web list formatting and structure. Lets move on to the next topic on CSS PADDING

What do you think?

css margin

CSS MARGIN | Learn How to Design The Web Page Margin Using CSS

css padding

CSS PADDING | Learn How To Add Beautiful List To Web Page Using CSS