CSS Tutorial (Chapter 15) – Working with Lists

Image style list property

This property defines a photo for use as a bullet mark next to the list element. This image is 
replaced by a tag specified in the type-style-list property.

Example :

ul li {list-style-image: url ('images / green-bullet.png'); }
 ul ol html li {list-style-image: url ('images / blue-bullet.png'); }
 ul ol css li {list-style-image: url ('images / brown-bullet. png'); }

This property specifies the position and method of placing the bullet along with the list items. And one of the following two values 

Inside: Specifies that the bullet list must be within the list items. 
Outside: Specifies that the bullet list must be outside the list items. 
Example :

ul li {list-style-image: url ('images / arrow. png'); }
 ul ol html li {
 list-style-image: url ('images / arrow1 .png');
 list-style-position: inside;
 background: # 09f;
 } you
 lol css li {
 list-style-image: url ('images / arrow2.png');
 list-style-position: outside;
 background: # ff9;

You can see that the bullet of the sub-set of the HTML option we gave inside the inside is inside the box, but the 
bullet sub-set of the CSS that has the external value is located outside the box.

Shortcut style list property

For style-list shortcuts, the following rule is used.

  CSS Tutorial (Chapter eighteen) – The way to display and lay elements


list-style: type position url ('ImageAddress');

Example :

li {list-style: square inside url ('bullet1.png'); }

Well, so far, we got to know the style attributes of the list, in the next session we’ll look at the positioning or the same 
position of the elements on the page

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top