CSS
Lists
CSS can be used to customize the style of list elements.
list-style-type
CSS property list-style-type is used to specify the type of list-item marker. Default value is “disc”.
Properties
Some of the types that can be used for list element styling are as follows:
- list-style-type: circle;
- list-style-type: square;
- list-style-type: upper-roman;
- list-style-type: lower-alpha;
Example:
<!doctype html>
<html>
<head>
<title>...</title>
<style>
ul.circle {
list-style-type: circle;
}
</style>
</head>
<body>
<p>PHPDocs provides the tutorials of following languages.</p>
<ul class="circle">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>
</body>
</html>
list-style-position
CSS property list-style-position is used to specify where to place the list-item marker. Default value is “outside”
Properties
Some of the positions that can be used for list element styling are as follows:
- list-style-position: circle;
- list-style-position: square;
Example:
<!doctype html>
<html>
<head>
<title>...</title>
<style>
ul.inside {
list-style-position: inside;
}
</style>
</head>
<body>
<p>PHPDocs provides the tutorials of following languages.</p>
<ul class="inside">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>
</body>
</html>
list-style-image
CSS property list-style-type is used to replace the list-item marker with an image.
Example:
<!doctype html>
<html>
<head>
<title>...</title>
<style>
ul {
list-style-image: url('sqpurple.gif');
}
</style>
</head>
<body>
<p>PHPDocs provides the tutorials of following languages.</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>
</body>
</html>