List in CSS
By Rosy BiswalHere we learn about the lists in CSS. As we have discussed HTML lists of arranging the items, CSS is embedded with the HTML for formatting those bulletin items.
There are three types of lists in HTML:
- Unordered lists- These are recognized as bullets.
- Ordered Lists- These are marked in ordered numbers.
- Definition Lists- It consists of a description of each item.
Uses of lists in CSS
- It allows for changing the marking style of pointers.
- It sets a distance between those pointers and the text.
- Appearing of the items in the boxes(layout)
- We can also add images in the background or used as a new pointer style
Let us look at an example of changing of the bulletin style:
<head>
<title>Lists</title>
<style>
ul {
list-style-type: circle;
}
ol {
list-style-type: lower-roman;
}
</style>
</head>
<body>
<ul>
<li>Codespeedy</li>
<li>Codespeedy</li>
<li>Codespeedy</li>
</ul>
<ol>
<li>Codespeedy</li>
<li>Codespeedy</li>
<li>Codespeedy</li>
</ol>
</body>
Adding an image as a pointer
Here we can add images as a new pointer style, only you had to add the path of the image.
<head>
<title>Lists</title>
<style>
ul li {
list-style-image: url("path of your image");
}
</style>
</head>
<body>
<ul>
<li>Codespeedy</li>
<li>Codespeedy</li>
<li>Codespeedy</li>
</ul>
</body>
Fixing the position of the lists and pointers
Here we will provide the class that keeps the pointers inside and out of the display boxes, for example:
<head>
<title>CSS</title>
<style>
body{
font-size: 34px;
}
ol li {
background: #ddd;
margin: 15px;
}
ol.in li {
list-style-position: inside;
}
ol.out li {
list-style-position: outside;
}
</style>
</head>
<body>
<ol class="in">
<li>Codespeedy</li>
<li>Codespeedy</li>
<li>Codespeedy</li>
</ol>
<ol class="out">
<li>Codespeedy</li>
<li>Codespeedy</li>
<li>Codespeedy</li>
</ol>
</body>These were the basic functionalities of Lists in CSS coding. We can modify it according to our requirements of creating our lists of items.
Leave a Reply