Shorthand property to set all list characteristics.

Description

list-style is the shorthand property to set all list characteristics.

The format for the list-style shorthand property is as follows:


list-style: <list-style-type>  <list-style-position>  <list-style-image>

Example


<html>
<head>
<style type='text/css'>
li {<!-- w w w  . ja  va 2 s  .  c  o  m-->
    background: mistyrose;
}
li#arrow {
    list-style: square url('arrow.png') outside;
}
li#arrow-inside {
    list-style: url('arrow.png') inside;
}
li#marker-inside {
    list-style: square inside;
}
li#marker-image {
    list-style: square url('arrow.png');
}
li#arrow-only {
    list-style: url('arrow.png');
}
li#marker {
    list-style: circle;
}
li#position {
    list-style: inside;
}
</style>


</head>
<body>
    <ul>
        <li id='arrow'>All three styles can be provided.</li>
        <li id='arrow-inside'>The image and the position.</li>
        <li id='marker-inside'>The marker and the position.</li>
        <li id='marker-image'>The marker and the image.</li>
        <li id='arrow-only'>Just the image.</li>
        <li id='marker'>Just the marker.</li>
        <li id='position'>Just the position.</li>
    </ul>
</body>
</html>

Click to view the demo





















Home »
  HTML CSS »
    CSS »




CSS Introduction
CSS Background
CSS Border
CSS Box Layout
CSS Text
CSS Font
CSS Form
CSS List
CSS Selectors
CSS Others
CSS Table