Links

To style a link differently depending on their state -

a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked

When setting the style for several link states, there are some order rules:

a:hover MUST come after a:link and a:visited.
a:active MUST come after a:hover.

By default browser render links with an underline below the text. If you want to remove that underline use text-decoration property with the value none

list-style-type

The list-style-type specifies the type of list-item marker in a list.

You can use the following values -

Value	Description
disc	Default value. The marker is a filled circle
armenian	The marker is traditional Armenian numbering
circle	The marker is a circle
cjk-ideographic	The marker is plain ideographic numbers
decimal	The marker is a number
decimal-leading-zero	The marker is a number with leading zeros (01, 02, 03, etc.)
georgian	The marker is traditional Georgian numbering
hebrew	The marker is traditional Hebrew numbering
hiragana	The marker is traditional Hiragana numbering
hiragana-iroha	The marker is traditional Hiragana iroha numbering
katakana	The marker is traditional Katakana numbering
katakana-iroha	The marker is traditional Katakana iroha numbering
lower-alpha	The marker is lower-alpha (a, b, c, d, e, etc.)
lower-greek	The marker is lower-greek
lower-latin	The marker is lower-latin (a, b, c, d, e, etc.)
lower-roman	The marker is lower-roman (i, ii, iii, iv, v, etc.)
none	No marker is shown
square	The marker is a square
upper-alpha	The marker is upper-alpha (A, B, C, D, E, etc.)
upper-greek	The marker is upper-greek
upper-latin	The marker is upper-latin (A, B, C, D, E, etc.)
upper-roman	The marker is upper-roman (I, II, III, IV, V, etc.)

Note that not all the broswer supports all the list-style-type value above. If a browser doesn't support a value it will render as a disc by default.

Here is an example -

<div class="box">
  <ul style="list-style-type: upper-roman;">
    <li>Mango</li>
    <li>Strawberry</li>
    <li>Banana</li>
    <li>Apple</li>
    <li>Guava</li>
    <li>Date</li>
  </ul>
</div>

Mango
Strawberry
Banana
Apple
Guava
Date

Try inspecting that ul and change the value differently and see the each effect.

list-style-image

The list-style-image property replaces the list-item marker with an image.

It can take two values -

none which means no image will be used as a list marker. No image will be displayed. Instead, the list-style-type property will define what type of list marker will be rendered. This is default.
url which is used to provide the url of the image that will be used as the image.

If the image is not found, the default value disc will be used. Here is an example -

.ulImage{
    list-style-image: url('Assets/img/sqpurple.gif');
}

<div class="box">
  <ul class="ulImage">
    <li>Mango</li>
    <li>Strawberry</li>
    <li>Banana</li>
    <li>Apple</li>
    <li>Guava</li>
    <li>Date</li>
  </ul>
</div>

Mango
Strawberry
Banana
Apple
Guava
Date

list-style-position

The list-style-position property specifies the position of the list-item markers (bullet points). It can take the following values -

inside The bullet points will be inside the list item
outside The bullet points will be outside the list item. This is default.

Here is an example -

.insideUl{
  list-style-position: inside;
}
.insideUl li{
  border: 1px solid black;
}
.outsideUl{
  list-style-position: outside;
}
.outsideUl li{
  border: 1px solid black;
}


<div class="box">
  <h3>Inside</h3>
  <ul class="insideUl">
    <li>Mango</li>
    <li>Strawberry</li>
    <li>Banana</li>
    <li>Apple</li>
    <li>Guava</li>
    <li>Date</li>
  </ul>
  <h3>Outside</h3>
  <ul class="outsideUl">
    <li>Mango</li>
    <li>Strawberry</li>
    <li>Banana</li>
    <li>Apple</li>
    <li>Guava</li>
    <li>Date</li>
  </ul>
</div>

Inside

Mango
Strawberry
Banana
Apple
Guava
Date

Outside

Mango
Strawberry
Banana
Apple
Guava
Date

list-style

The list-style property is a shorthand property that sets values for three different list-related properties in one declaration:

ul {
    list-style: <list-style-type> || <list-style-position> || <list-style-image>;
}

ul {
    list-style: square outside none;
}

Which would be the same as the following longhand version:

ul {
 list-style-type: square;
 list-style-position: outside;
 list-style-image: none;
}

In the shorthand, if any values are omitted, they will revert to their initial state.

Remove Default Settings

The list-style-type:none property can also be used to remove the markers/bullets. Note that the list also has default margin and padding. To remove this, add margin:0 and padding:0 to <ul> or <ol>:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}