Bullet Point Styles

When HTML first came into use in the early 1990s, all unordered lists looked the same because there was only the standard black dot symbol to use as a bullet point. With Cascading Style Sheets (CSS), so much more is possible. Lists can be styled with different shapes, a user-selected image or a combination of options.

Standard CSS Bullet Styles

The standard bullet styles you can choose in CSS include a disc, square or circle or a lower-roman, upper-roman, lower-alpha or upper alpha character. The code for a lower roman character looks like the following:

ul {

list-style-type: lower-roman;

}

To change one designated list to this style, create a class and give it the lower-roman attribute, as such:

.ul_new {

list-style-type: lower-roman;

}

The list code would appear in the body of your document, as such:

<ul style="ul_new">

<li>first bullet</li>

</ul>

Styling through bullet position

You also can change the position of the bullet, altering whether it's indented or outdented.

This code is now written:

.ul_new {

list-style-type: lower-roman;

list-style-position: inside;

}

This is useful when you want the bullet in line with other content (inside).

Changing the style with another image

A more controlled way to get the exact look of the bullet point is to use your own pre-designed bullet image. Make sure the image is small enough to be a bullet point, as larger images can throw the page formatting off. The code would look something like this:

ul {

list-style-image: URL(http://locationoffile/nameoffile.jpg);

}

The URL points to the location of the image on the server.

In HTML

If you want to directly alter the list in the HTML, specify the list style in each bullet point: