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.

Myhtmlcode.com

CSS List Tutorial