Simple List With Circle Bullets

Other type of listing is using css styling. In order to do this, usually a separated two files for HTML file and CSS file is created.

For this example, we will show you how to make simple list style with circle bullets.

You may use any web editor application (we recommend Dreamweaver).

Example:

HTML

<div id=”navcontainer”>
<ul id=”navlist”>
<li id=”active”><a href=”#” id=”current”>Item one</a></li>
<li><a href=”#”>Item two</a></li>
<li><a href=”#”>Item three</a></li>
<li><a href=”#”>Item four</a></li>
<li><a href=”#”>Item five</a></li>
</ul>
</div>

CSS

#navlist li { list-style-type: circle; }

Instructions:

• Copy and paste the above HTML codes to your desired web editor application (eg: Dreamweaver). Save it as any name.

• Then create one file with your desired name. Eg: circle.css . The file must be saved with .css extension.

• Also do not forget to add <link href=”circle.css” rel=”stylesheet” type=”text/css” /> before your </head> on your HTML file.

Output:

See example here

Popularity: 31% [?]