CSS – Lists
CSS – Lists
Using CSS; various designing lists can be printed as per type, style, position and offset. The various properties are as below,
List-style-type: it specifies the shape or type of the marker like circle, square, decimal, disc, etc.
List-style-position: it specifies whether the market can locate outside or inside of the list.
List-style-image: it specifies an image of the marker rather than number or bullet.
Marker-offset: it specifies the distance between text and the marker of the list.
List-style: it sets various properties of lists in one statement.
Example:
<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle; list-stlye-position:outside;">
<li>HTML</li>
<li>CSS</li>
<li>Python</li>
</ul>
<ul style = "list-style-type:square;list-style-position:inside;">
<li>PC</li>
<li>Laptop</li>
<li>Notebook</li>
</ul>
<ol style = "list-style-type:decimal;list-stlye-position:outside;">
<li>Kolkata</li>
<li>Madras</li>
<li>Bangalore</li>
</ol>
<ol style = "list-style-type:lower-alpha;list-style-position:inside;">
<li>Physics</li>
<li>Chemistry</li>
<li>Math</li>
</ol>
<ul style = "list-style: inside square; marker-offset:2em;">
<li>Outstanding</li>
<li>Excellent</li>
<li>Good</li>
</ul>
<ol style = "list-style: outside upper-alpha;">
<li>PHP</li>
<li>ASP</li>
<li>JSP</li>
</ol>
<ol>
<li style = "list-style-image: url(listimg.jpg);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
Output:
Quiz :
Quiz 1: What are the various properties used in printing lists using CSS?
Quiz 2: How can you set all types of lists in one declaration? Give examples.