Lists in css in web development

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.

 

 

 

 

Subscribe for Friendship

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

Buy advertisement space on T4Tutorials

For more details email [email protected]