Lists in css in web development

By: Prof. Dr. Fazal Rehman | Last updated: March 3, 2022

Ordered List

Example: List of fruits
  1. Banana
  2. Orange
  3. Apple

Un-ordered List:

  • Banana 
  • Orange
  • Apple

How to style the un ordered list with CSS?

Example 1:

File 1 :  stylefile.css

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

File 2: index.html

<head> <style> <link rel=”Stylesheet” type=”text/css” href=”stylefile.css” /> </head> <p>This is unordered lists</p> <ul class=”first”> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul>

Output:

This is unordered list
  • Banana 
  • Orange
  • Apple

How to style the ordered list with CSS?

Example 2:

File 1 :  stylefile.css

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

File 2: index.html

<head> <style> <link rel=”Stylesheet” type=”text/css” href=”stylefile.css” /> </head> <p>This is ordered list with upper roman style</p> <ol class=”first”> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol>

Output:

This is ordered list with upper roman style
  1. Banana 
  2. Orange
  3. Apple

Some explanations:

CSS 

How it works

ol { background: red; padding: 20px; } It will set the background color as red and set padding to 20px for ordered list
ul { background:red; padding: 66px; }  It will set the background color as red and padding to 20px for un-ordered list.
 ul li { background:red; margin: 44px; }  it will apply the css on all list of un-ordered lists.
 ol li { background:red; margin: 33px; }  It will apply the css on all lists of ordered lists.
ol.t4tutorials{ background:red; margin: 33px; }  It will apply the CSS on ordered list that have class t4tutorials.
       

Leave a Comment

All Copyrights Reserved 2025 Reserved by T4Tutorials