Syntax error Formatting Unordered and Ordered Lists in CSS

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>
Updated on: 2023-11-02T11:47:54+05:30

247 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements