Cool 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.

---

Software Required

Adobe Dreamwever (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.

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:

1. Setting the type attribute for the <ul> and <ol> tags.
2. 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: <style type="text/css"> <!-- .bullet {list-style-type: disc;} OR .bullet {list-style-image: url(/images/icons/bullet.gif);} --> </style> <ul class="bullet"><li>List Item 1</li></ul> 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.

We would love to hear your comments and any suggestions on future tutorials we can add to this section. Thanks!