CSS and Lists

CSS and HTML are a bit different in terms of lists. In CSS, there are only 2 types of lists as opposed to HTML, which has 3. CSS has numbered and bulleted types of lists and you can define the style of the bullets and numbers with CSS using list-style-type property.

Styling the List

This is used to style the bullets and numbering in different ways as allowed by CSS. For example, to have a list with square style bullets, we use the following code.

<ul style=”list-style-type: square;”>

<li>one</li>

<li>two</li>

<li>three</li>

the output is as follows

Usage of an Image as a Bullet

We can use an image as a bullet too, by making the necessary changes in the code. For example, to have an image as a bullet, we can use the following code.

<ul style=”list-style-image: url(image.gif);”>

<li>one</li>

<li>two</li>

<li>three</li>

Positioning of the Bullets

CSS also provides a powerful feature of governing the placement of the bullets and how the text will be displayed around them. For instance, consider the following code segment and the associated output with it.

<ul style=”list-style-position: inside;”>

<li>one</li>

<li>two</li>

<li>three</li>

Combining it one the Go

You can also combine all the tags present into one tag and use it for your styling. Consider the code below and its output.

<ol style=”list-style: alpha inside none;”>

<li>one</li>

<li>two</li>

<li>three</li>

In this way, you can design your custom styled bullets and numbering using the powerful features of CSS.