Lists in css in web development

By: Prof. Fazal Rehman Shamil
Last modified on May 27th, 2019

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.

 

 

 

 

Prof. Fazal Rehman Shamil
Latest posts by Prof. Fazal Rehman Shamil (see all)
Share

Related Posts: