CSS Bullet List

Bullets Tips

How to create bullets in HTML and/or CSS with Dreamweaver

This article deals with how to use bullets in HTML or CSS with Dreamweaver (recommended). We can give images, shapes, alphabets, decimal and roman numerals properties to bullets by using the <ul> or <ol> tags, CSS Styles or tables.

Prerequisite Knowledge

This tutorial teaches you how to create bullets in HTML/CSS using Dreamweaver and thus assumes you are familiar with some design software, even if you are new to Adobe Dreamweaver. However be assured that our detailed instructions can be followed by even a total novice.

You Are Here ::: Home >> Free Tutorials >> Dreamweaver Tutorials >> Cool Bullets Tips

To summarize, bullets can be displayed in the following ways:

Setting the type attribute for the <ul> and <ol> tags.
Using CSS styles by specifying a class attribute to the <ul> or <ol> tags. The bullet type can be either the regular HTML types or an image.

Setting the type attribute for the <ul> and <ol> tags

Bullet Type	HTML Code	Example
Default (disc)	<ul><li>List Item 1</li></ul>	List Item 1
Square	<ul type="square"><li>List Item 1</li></ul>	List Item 1
Circle	<ul type="circle"><li>List Item 1</li></ul>	List Item 1
Numbers	<ol><li>List Item 1</li></ol>	List Item 1
Lower Roman	<ol type="i"><li>List Item 1</li></ol>	List Item 1
Upper Roman	<ol type="I"><li>List Item 1</li></ol>	List Item 1
Lower Alpha	<ol type="a"><li>List Item 1</li></ol>	List Item 1
Upper Alpha	<ol type="A"><li>List Item 1</li></ol>	List Item 1

Using CSS styles by specifying a class attribute to the <ul> or <ol> tags

Create a CSS style called bullet by using the HTML code below or by using Dreamweaver.

HTML Code:

Create Using Dreamweaver:

Open the CSS Styles pallet by clicking on Window > CSS Styles
Click the New CSS Style button and give the name of the style as .bullet. Define it for either only the current document or for a Style Sheet file.
In the CSS Style definition window, go to the List Category and set the type or bullet image and Save the style.
Create your list of items using the default bullet. To apply the style, select the <ul> or <ol> tag in the tag selector located at the bottom left of the Document window. Right Click and Set Class to bullet.

Change the list-style-type property to get the different bullets and the image property to give an image as the bullet.

Bullet Type	CSS Style Code	Example
Disc	.bullet {list-style-type: disc;}	List Item 1
Square	.bullet {list-style-type: square;}	List Item 1
Circle	.bullet {list-style-type: circle;}	List Item 1
Numbers	.bullet {list-style-type: decimal;}	List Item 1
Lower Roman	.bullet {list-style-type: lower-roman ;}	List Item 1
Upper Roman	.bullet {list-style-type: upper-roman;}	List Item 1
Lower Alpha	.bullet {list-style-type: lower-alpha;}	List Item 1
Upper Alpha	.bullet {list-style-type: upper-alpha;}	List Item 1
Image Bullet	.bullet {list-style-image: url(/images/icons/arrow.gif);}	List Item 1

Tip: For creating lists in smaller width areas of your web page - use CSS to set margins to zero for the ul tag and give the image bullet as background for the li tags.

Software Required

Adobe Dreamweaver (Macromedia Dreamweaver prior to version 8). Please check out the compatible versions listed in the box below. Since this tutorial series covers the core functions of Dreamweaver to create bullets in HTML/CSS using Dreamweaver, mostly any version of these software should be fine.

Compatible Versions of Dreamweaver for this Tutorial

Dreamweaver 4-8 | Dreamweaver CS3 | Dreamweaver CS4/CS5/CS6
Note: The instructions in this tutorial are same across all Dreamweaver versions listed above; Screenshot images (if any) may differ. Recommended Version: Dreamweaver CS6