Marusya's School Notes

List - Shorthand property

The list-style property is a shorthand property. It is used to set all the list properties in one declaration. When using the shorthand property, the order of the property values are:

list-style-type (if a list-style-image is specified, the value of this property will be displayed if the image for some reason cannot be displayed)
list-style-position (specifies whether the list-item markers should appear inside or outside the content flow)
list-style-image (specifies an image as the list item marker)

HTML file:	Displayed by browser:
<style> ul.def { list-style-image: url("../html_beg/images/sqpurple.gif"); } ul.in { list-style: square inside url("../html_beg/images/sqpurple.gif"); } ul.out { list-style: square outside url("../html_beg/images/sqpurple.gif"); } </style> <body> <p>This is default positioning:</p> <ul class="def"> <li>Coffee</li> <li>Tea</li> <li>Pop</li> </ul> <p>This is outside positioning:</p> <ul class="out"> <li>Coffee</li> <li>Tea</li> <li>Pop</li> </ul> <p>This is inside positioning:</p> <ul class="in"> <li>Coffee</li> <li>Tea</li> <li>Pop</li> </ul> </body>	This is default positioning: Coffee Tea Pop This is outside positioning: Coffee Tea Pop This is inside positioning: Coffee Tea Pop

HTML file:

Displayed by browser:

<body>
<p>This is default positioning:</p>
<ul class="def">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Pop</li>
</ul>

<p>This is outside positioning:</p>
<ul class="out">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Pop</li>
</ul>

<p>This is inside positioning:</p>
<ul class="in">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Pop</li>
</ul>
</body>

This is default positioning:

Coffee
Tea
Pop

This is outside positioning:

Coffee
Tea
Pop

This is inside positioning:

Coffee
Tea
Pop

If one of the property values above are missing, the default value for the missing property will be inserted, if any.