- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
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*/
}Example
The following examples illustrate CSS list-style property −
The following example styles ordered list −
<!DOCTYPE html>
<html>
<head>
<style>
ol {
list-style: upper-roman;
line-height: 150%;
}
</style>
</head>
<body>
<h2>Latest C# Versions</h2>
<ol>
<li>C# 8.0</li>
<li>C# 7.3</li>
<li>C# 7.2</li>
<li>C# 7.1</li>
<li>C# 7.0</li>
</ol>
</body>
</html>Output
This gives the following output −
Example
The following example styles unordered list −
<!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>Output
This gives the following output −
Updated on 09-Jan-2020 10:23:31
- Related Questions & Answers
- Formatting Unordered and Ordered Lists Using CSS
- Style unordered lists markers with CSS
- What is the difference between ordered factors and unordered factors in R?
- Formatting Text in CSS
- Formatting Text Using CSS
- Understanding CSS Visual Formatting
- CSS Visual Formatting Model
- Styling Lists in CSS
- Control the flow and formatting of text with CSS
- Styling Lists with CSS
- How to create an unordered list without bullets using CSS?
- Style the numbering characters in an ordered list with CSS
- Ordered Set and GNU C++ PBDS
- How to Animate Bullets in Lists using CSS
- What are Lists and Self-Organizing lists in compiler design?
Advertisements