Simple List With Square Bullets

If you realized, when you make css styling from common web editor application like Dreamweaver, after you type #”any name” { lis (without ” “), automatically they will generate a list of style selection for user ease. Isn’t that great!

This example is how to create simple list with square bullets.

Again, you use any web editor application (we recommend Dreamweaver; you should test it and see the great features).

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: square; }

Instructions:

Using the same method, copy the above HTML codes into the web editor. Create another file with .css extension (let say here xoxo.css) and filled it with above css codes.

Also, when using css styling do not forget to add <link href=”xoxo.css” rel=”stylesheet” type=”text/css” /> before your </head> on your HTML file. Saying that your HTML will call upon external css code to guide its “navlist” using CSS codes.

Output:

See example here

To make you more expert and gain more knowledge on this, try another type of styles such as inside, outside, armenian, circle, cjk-ideographic, decimal, decimal-leading-zero, disc, georgian, hebrew, hiragana, hiragana-iroha, inherit etc that you may find. These feature may already embedded on your web editor application. We believe you could gain more knowledge on these terms by refering from Cascading Style Sheets and Google. As a result from that, you will become more expert in style listing using CSS style for example to create your own css for your wordpress, joomla or blogger template or theme. Good Luck!

Popularity: 36% [?]