CSS List Tutorial
CSS List Tutorial:
We already know that there are two types of elements in HTML for creating lists. <ul> </ul> and <ol> </ol>I use these ul, ol and li when creating navigation menus or any list. There are several properties in CSS for styling this list. E.g.
list-style-type, list-style-position, list-style-image, list-style, marker-offset
list-style-type:
When the list is created (with ul) by default a bullet appears in front of each list e.g.
<ul>
<li> HTML </li>
<li> CSS </li>
<li> PHP </li>
<li> MySQL </li>
</ul>
See application
<!DOCTYPE html>
<html>
<body>
<ul>
<li> HTML </li>
<li> CSS </li>
<li> PHP </li>
<li> MySQL </li>
</ul>
</body>
</html>
Line 6 has "disc" by default. I.e. list-style-type: disc; If not, the bullet will show.
Now list-style-type can bring other symbols instead of this bullet. Such as the signs that can be given for ul
<style>
ul.first li {list-style-type:none;}
ul.second li {list-style-type:disc;}
ul.third li {list-style-type:circle;}
ul.fourth li {list-style-type:square;}
</style>
See application
<!DOCTYPE html>
<html>
<head>
<style>
ul.first li {list-style-type:none;}
ul.second li {list-style-type:disc;}
ul.third li {list-style-type:circle;}
ul.fourth li {list-style-type:square;}
</style>
</head>
<body>
<ul class = "first">
<li> HTML </li>
<li> CSS </li>
<li> PHP </li>
<li> MySQL </li>
</ul>
<ul class = "second">
<li> HTML </li>
<li> CSS </li>
<li> PHP </li>
<li> MySQL </li>
</ul>
<ul class = "third">
<li> HTML </li>
<li> CSS </li>
<li> PHP </li>
<li> MySQL </li>
</ul>
<ul class = "fourth">
<li> HTML </li>
<li> CSS </li>
<li> PHP </li>
<li> MySQL </li>
</ul>
</body>
</html>
Several values can also be used for ol e.g.
list-style-type: decimal;
list-style-type: decimal-leading-zero;
list-style-type: lower-alpha;
list-style-type: upper-alpha;
list-style-type: lower-roman;
list-style-type: upper-roman;
I did not give any more examples. It is very simple, you can see what the standard will look like. If you want to see, try making a list with ol and li and apply the styles.
list-style-position
With these properties it is possible to fix the marks on the inside or outside. It has a default value of "outside", as well as inside or away from the right to show
ul.third li
list-style-type: circle;
list-style-position: inside;
See application
<!DOCTYPE html>
<html>
<head>
<style>
ul.third li {
list-style-type:circle;
list-style-position:inside;
}
</style>
</head>
<body>
<ul class = "third">
<li> HTML </li>
<li> CSS </li>
<li> PHP </li>
<li> MySQL </li>
</ul>
</body>
</html>
list-style-image
It can be used to give pictures instead of symbols. E.g.
list-style-image: url (images / custom_bullet.png);
list-style:
This is a shorthand property. The work of the above 3 properties can be done with this one. The above shots are not used much. List-style is usually the usual work. E.g.ul.third li
list-style: url (../ images / cancel_f2.png) inside;
See application
<!DOCTYPE html>
<html>
<head>
<style>
ul.third li {
list-style:url(../images/cancel_f2.png) inside ;
}
</style>
</head>
<body>
<ul class = "third">
<li> HTML </li>
<li> CSS </li>
<li> PHP </li>
<li> MySQL </li>
</ul>
</body>
</html>
list-style: first list-style-type then list-style-position and finally list-style-image
You will see this list-style tie being used more. Most of the time when creating menus, when there is a lot of li inside ul, to remove its default bullet list-style: none; Is used.
list-style: none; In this way a value can also be used. If a value is given, it will be taken as list-style-type.