Ordered List
Example: List of fruits- Banana
- Orange
- 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- Banana
- Orange
- 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. |