CSS LISTS

The CSS list properties allow you to do.

  • Set different list item markers for unordered lists
  • Set different list item markers for ordered lists
  • Add background colors to lists and list items
  • Set an image as the list item marker.

DIFFERENT LIST ITEM MARKERS

The list-style-type property defines the type of list item marker. The following example shows some of the open list item markers.

EXAMPLE

ul.a {

list-style-type: circle;

}

 

ul.b {

list-style-type: square;

}

 

ol.c {

list-style-type: upper-roman;

}

 

ol.d {

list-style-type: lower-alpha;

}

AN IMAGE AS THE LIST ITEM MARKER

The list-style-image property defines an image as the list item marker.

EXAMPLE

ul {

list-style-image: url(‘sqpurple.gif’);

}

POSITION THE LIST ITEM MARKERS

The list-style-position property defines whether the list-item markers should appear inside or outside the content flow.

EXAMPLE

ul {

list-style-position: inside;

REMOVE DEFAULT SETTINGS

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

EXAMPLE

ul {

list-style-type: none;

margin: 0;

padding: 0;

}

LIST – SHORTHAND PROPERTY

The list-style property is a shorthand property. It is used to set all the list properties in one given.

EXAMPLE

ul {

list-style: square inside url(“sqpurple.gif”);

}

STYLING LIST WITH COLORS

We can also style lists with colors, to make them look a little more interesting. Anything added to the <ol> or <ul> tag, affects the entire list, while properties added to the <li> tag will affect the individual list items.

EXAMPLE

ol {

background: #ff9999;

padding: 20px;

}

 

ul {

background: #3399ff;

padding: 20px;

}

 

ol li {

background: #ffe5e5;

padding: 5px;

margin-left: 35px;

}

 

ul li {

background: #cce5ff;

margin: 5px;

}