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.

Therefore 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>
<head>
	<title>CSS list-style Shorthand Example</title>
</head>
<body>

<ul style="list-style: inside square;">
	<li>CSS list-style Shorthand Tutorial</li>
	<li>CSS list-style Shorthand Example</li>
	<li>CSS list-style Shorthand Test</li>
</ul>
<ol style="list-style: outside upper-alpha;">
	<li>CSS list-style Shorthand Tutorial</li>
	<li>CSS list-style Shorthand Example</li>
	<li>CSS list-style Shorthand Test</li>
</ol>

</body>
</html>

Below is the sample output of the above CSS list-style shorthand example code:

css list style shorthand

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>
<head>
	<title>CSS marker-offset Example</title>
</head>
<body>

<ul style="list-style: inside square; marker-offset:2em;">
	<li>CSS list-style Shorthand Tutorial</li>
	<li>CSS list-style Shorthand Example</li>
	<li>CSS list-style Shorthand Test</li>
</ul>
<ol style="list-style: outside upper-alpha; marker-offset:2cm;">
	<li>CSS list-style Shorthand Tutorial</li>
	<li>CSS list-style Shorthand Example</li>
	<li>CSS list-style Shorthand Test</li>
</ol>

</body>
</html>

Here is the sample output produced by the above CSS marker-offset example code:

CSS marker-offset

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test