Making Lists/CSS

CSS allows you to customize lists that can be made with HTML. There are three styles in respect to lists: list-style-type: x;, list-style-position: x and list-style-image: x;.

In HTML you would use either <ul> or <ol> and the type of list you would like to use. When using CSS, you will only need to use the <ul> tag. You then simply enter the "list-style-type: x;" that you would like to use. Your choices include: "disc", "circle", "square", "decimal", "lower-roman", "upper-roman", "lower-alpha", "upper-alpha", "none", or choose an image url(x) Always specify a "list-style-type" property in case the image is unavailable. The position would include "inside" and "outside". You can also use a shorthand version: list-style: type position url(x);.

one
two
three

one
two
three

<ul style="list-style: disc inside;">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

<ul style="list-style: disc outside url(img/arrow_g.gif);">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

By adding the "color" attribute and using the <span> tag, you can make the bullets a different color.

one
two
three

<ul style="list-style-type: square; color: #ff6600;">
  <li><span style="color: #000000;">one</span></li>
  <li><span style="color: #000000;">two</span></li>
  <li><span style="color: #000000;">three</span></li>
</ul>

This is how the list-style-position: x (outside or inside) positions the bullet..

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean magna. In quis leo. Vestibulum quis metus. Vestibulum ut magna sed orci pharetra sodales. Quisque euismod ante ut risus.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean magna. In quis leo. Vestibulum quis metus. Vestibulum ut magna sed orci pharetra sodales. Quisque euismod ante ut risus.

<ul style="list-style: square outside;">
  <li class="list">Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean magna. In quis leo. Vestibulum quis metus. Vestibulum ut magna sed orci pharetra sodales. Quisque euismod ante ut risus.</li>
</ul>

<ul style="list-style: square inside;">
  <li class="list">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean magna. In quis leo. Vestibulum quis metus. Vestibulum ut magna sed orci pharetra sodales. Quisque euismod ante ut risus.</li>
</ul>

Making a Menu (Navigation) List

Move your mouse near a menu item, and the background color changes. The rollover is a simple and effective way to enhance a menu. We demonstrate how to design a rollover menu using only CSS and HTML. No Javascript required. The underlying structure of the menu is an unordered list so that it remains meaningful in browsers that don't fully use CSS for visual rendering (older browsers, text-only browsers).

<style type="text/css">
<!--
#navHorizontal ul {
  font-family: arial, helvetica, sans-serif;
  font-size: 11px;
  list-style-type: none;
  text-align: center;
}
#navHorizontal ul li {
  display: inline;
}
#navHorizontal ul li a {
  color: #000000;
  text-decoration: none;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 6px;
  padding-bottom: 6px;
  background-color: #bcc596;
}
#navHorizontal ul li a:hover {
  color: #000000;
  background-color: #d4dda6;
}
-->
</style>

<div align="center" id="navHorizontal">
<ul>
  <li><a href="#">Table of Contents</a></li>
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">JavaScript</a></li>
  <li><a href="#">ASP</a></li>
</ul>
</div>

<style type="text/css">
<!--
#navVertical ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}
#navVertical li {
  margin: 0px 0px 2px 0px;
  font-family: arial, helvetica, sans-serif;
  font-size: 11px;
}
#navVertical a {
  display: block;
  color: #000000;
  background-color: #bcc596;
  width: 150px;
  padding: 3px 6px;
  text-decoration: none;
}
#navVertical a:hover {
  background-color: #d4dda6;
  color: #000000;
}
-->
</style>

<div align="center" id="navVertical">
<ul>
  <li><a href="#">Table of Contents</a></li>
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">JavaScript</a></li>
  <li><a href="#">ASP</a></li>
</ul>
</div>

To Top TO TOP