Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Formatting Unordered and Ordered Lists in CSS
The style and position of unordered and ordered lists can be formatted by CSS properties with list-style-type, list-style-image and list-style-position.
Syntax
The syntax of CSS list-style property is as follows −
Selector { list-style: /*value*/ } Style Ordered List With Upper Roman Marker
The following example illustrate the CSS list-style property and styles the ordered list. We have set the upper roman values for the ordered list −
list-style: upper-roman;
Example
Let us see an example −
<!DOCTYPE html> <html> <head> <style> ol { list-style: upper-roman; line-height: 150%; } </style> </head> <body> <h2>Top Programming Languages</h2> <ol> <li>Python</li> <li>Java</li> <li>C#</li> </ol> </body> </html> Style Ordered List With Lower Roman Marker
The following example illustrate the CSS list-style property and styles the ordered list. We have set the lower roman values for the ordered list −
list-style: lower-roman;
Example
Let us see an example −
<!DOCTYPE html> <html> <head> <style> ol { list-style: lower-roman; line-height: 150%; } </style> </head> <body> <h2>Top Programming Languages</h2> <ol> <li>Python</li> <li>Java</li> <li>C#</li> </ol> </body> </html> Style Unordered List Inside the List Item
The following example illustrate the CSS list-style property and styles the unordered list. We have set the circle for the unordered list and the position is also set inside −
list-style: circle inside;
Example
Let us see an example −
<!DOCTYPE html> <html> <head> <style> ul > ul{ list-style: circle inside; } li:last-child { list-style-type: square; } </style> </head> <body> <h2>Programming Languages</h2> <ul> <li>C++ programming language created by Bjarne Stroustrup as an extension of the C programming language.</li> <li>Java programming language developed by James Gosling.</li> <ul> <li>Core Java</li> <li>Advanced Java</li> </ul> <li>Scala is a modern multi-paradigm programming language designed to express common programming patterns in a concise, elegant, and type-safe way.</li> </ul> </body> </html> Style Unordered List Outside the List Item
The following example illustrate the CSS list-style property and styles the unordered list. We have set the square for the unordered list and the position is also set outside −
list-style: square outside ;
Example
Let us see an example −
<!DOCTYPE html> <html> <head> <style> ul > ul{ list-style: square outside; } li:last-child { list-style-type: square; } </style> </head> <body> <h2>Programming Languages</h2> <ul> <li>C++ programming language created by Bjarne Stroustrup as an extension of the C programming language.</li> <li>Java programming language developed by James Gosling.</li> <ul> <li>Core Java</li> <li>Advanced Java</li> </ul> <li>Scala is a modern multi-paradigm programming language designed to express common programming patterns in a concise, elegant, and type-safe way.</li> </ul> </body> </html> 
263 Views
