codescracker


css

CSS List Style Shorthand



« Previous Tutorial Next Tutorial »


The list-style shorthand property is used to modify the default display characteristics of list-markers in HTML list structures.

The list-style property is used to provide the values for the list-style-type, list-style-image, and list-style-position properties.

So in short, the list-style property sets all the properties for a list in one declaration

CSS list-style Shorthand Example

Here is an example on CSS list-style shorthand:

<html>
<body>
<ul style="list-style: inside square;">
<li>Java</li>
<li>SQL</li>
<li>PHP</li>
</ul>

<ol style="list-style: outside upper-alpha;">
<li>Java</li>
<li>SQL</li>
<li>PHP</li>
</ol>
</body>
</html>

Below is the sample output of the above CSS example:

css all in one

CSS marker-offset

The marker-offset property allows you to specify the distance between the marker and the text relating to that marker. Its value should be a length as shown in the following example:

Unfortunately, however, this property is not supported in IE 6 or Netscape 7.

<html>
<body>

<ul style="list-style: inside square; marker-offset:2em;">
<li>Java</li>
<li>SQL</li>
<li>PHP</li>
</ul>

<ol style="list-style: outside upper-alpha; marker-offset:2cm;">
<li>Java</li>
<li>SQL</li>
<li>PHP</li>
</ol>

</body>
</html>

It will display the following result:

CSS marker-offset

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test