HEELPBOOK - CSS - How To Format Bullet Lists #########################


Bullet lists in HTML come in two varieties: Ordered Lists (in which each line begins with a number or letter) and Unordered Lists (in which each line begins with the same bullet shape or image).

On this page we will discuss how to format unordered lists so they have a bit more style. We'll also show you how to use an image for bullet lists.


############ CSS Styles ################

There are several ways to format the style of your lists but they all use the same basic set of instructions. These are CSS (Cascading Style Sheet) instructions and they look like this:


font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 2em;


These are just a small sample of the styles which are available. The ones above are common CSS styles and can be used anywhere there is text. There are also styles specific to lists, such as:


list-style-position: outside;
list-style-image: url(arrow.gif);
list-style-type: square;


When formatting a list, you can choose as many of these styles as you like. If you only need to use an image for the bullets, then that's the only style you choose. For this page we will use the following requirements to illustrate the methods:

- Set the font face to Verdana
- Set the font size to 12 pixels
- Set the background colour to grey
- Create a 6 pixel padding around the entire list


More formatting options will follow later.


########## Universal Style #################

The simplest way to format your lists is to define a style which applies to all lists in the page. In the head of your web page, add the following code:


ul { list-style-image: url("/images/arrow.gif") }



Syntax: list-style-type: <value>

Possible Values: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none

Default Value: disc

Applies to: Elements with display value list-item

Inherited: Yes

Specifies the type of list-item marker, and is used if list-style-image is none or if image loading is turned off



Syntax: list-style-image: <value>

Possible Values: <url> | none

Default Value: one

Applies to: Elements with display value list-item

Inherited: Yes

Replaces the marker specified in the list-style-type property.



Syntax: list-style-position: <value>

Possible Values: inside | outside

Default Value: outside

Applies to: Elements with display value list-item

Inherited: Yes

Takes the value inside or outside, with outside being the default. This property determines where the marker is placed in regard to the list item. If the value inside is used, the lines will wrap under the marker instead of being indented.



######## Example #################

The example on the right is the result of the style below. Note that both a list-style-type and list-style-type are defined - the arrow image is used unless it cannot be found or the user has image display disabled, in which case the list uses square bullets.


ul {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: 2em;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #00CC33;
text-decoration: none;
background-color: #CCCCCC;
text-indent: 5px;
list-style-position: outside;
list-style-image: url(arrow.gif);
list-style-type: square;
padding: 6px;
margin: 2px;
}


############ ARTICLE INFO #############

Article Month: April
Article Date: 11/04/2012
Permalink: http://heelpbook.altervista.org/2012/css-how-to-format-bullet-lists/
Source: http://www.mediacollege.com/internet/css/ul-list.html
Language: English

View more articles on: http://www.heelpbook.net/
Follow us on Facebook: http://it-it.facebook.com/pages/HeelpBook/100790870008832
Follow us on Twitter: https://twitter.com/#!/HeelpBook
Follow us on RSS Feed: http://feeds.feedburner.com/Heelpbook
Follow us on Delicious: http://delicious.com/heelpbook