Styling CSS and HTML Unordered Lists

HTML List items are multi-functional and provide a lot of options for customizing and designing your HTML document. They are also very important to your mark up because they designate meaning within your HTML code and provide emphasis to specific list elements by embedding them into proper HTML elements. In this article, I will discuss the essential methods of HTML and CSS list item design, how to format your HTML and CSS list items and multiple ways of designing your HTML and CSS lists.

Lists are used for many reasons within a web page. They can provide structure for web page link navigation, product lists and descriptions, song lists, article lists and basically any other type of list you might use for your web page design. It is very important to use the proper HTML format when constructing lists because of many reasons. First of all, search engines recognize list items as part of the hierarchy of significance. By placing important elements of your page within list item tags, you are easing search engines through your site more fluidly and more efficiently. Also, it is standard to structure HTML and CSS so that your content is functional. By this I mean that it is more comprehensive to have list items defined by list HTML markup, it creates structure within your page and the source is more readable. It also provides you with a more broad availability of CSS style options when you are attempting to change, edit or enhance the look and feel of your site.

A simple unordered list will look like this:

• 
  
• List item 1
• 
  
• List item 2
• 
  
• List item 3
• 
  
• List item 4
• 
  

The

tag encloses the entire list, and marks the beginning of an unordered list.

The tag encloses each individual list item.

Both of these tags can have a CSS style attached to it. They can also be defined by a specific div in case you want the first, last, or individual items to have different styles.

The list items, enclosed by the tag, automatically create bullets to the left of each item. While the bullets are present in any browser that views your list, the way in which these bullets are created differ between browsers.

Internet Explorer and Opera create this bullet using a left margin, while Safari and Firefox create the bullet using left padding. This is important to note, because if you plan on adding extra padding, margins, customized bullets, or background images within your list items, the browsers will handle the elements differently. A simple fix for your list bullet inconsistently is to take the margin and padding down to 0, take out the default bullets and make your own bullets using background images.

ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}

li {
background: url(custombullet.gif) no-repeat 0 50%;
padding-left: 20px;
}

This CSS mark up works because it makes the image you choose as a background image within your element and positions it in the middle of the text and to the left of it. When creating your custom bullet, you should try and make it smaller than the text you are using, and also have it coincide with the rest of your site as far as color and design.

One of the most common purposes of a list is to provide structure for the navigation bars within your web page. A simple navigation bar using lists will look like this:

• 
  
• Home
• 
  
• About Us
• 
  
• Products
• 
  
• Contact Us
• 
  

This list within your HTML document, provides you with three separate elements to work with within your CSS design.

• 
  
• 
  

• All three of these elements can be style differently and creatively so that your list is unique to your site, simple and clean. Here is an example of list style design:

  ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  }

  li {
  background: url(custombullet.gif) no-repeat 0 50%;
  padding-left: 20px;
  font-family: verdana;
  font-size: 11px;
  font-weight: bold;
  color: red;
  }

  li a {
  text-decoration: none;
  color: red;
  }
  

  NOTE: By default all tags automatically make the text a bright blue color and underline it. This is because most links look this way within browsers, and it lets the user know that, "hey, here's a link." But, you will probably have your own idea of what you want links to look like, so it is essential that you set your "text-decoration" attribute to "none" so that you can decide how to custom design your links.

  This is a very simple example of how to design an HTML list with your web page. Lists can perform all kind of functions in and of themselves by using simple CSS. I will be providing tutorials on CSS rollovers and creative use of background images in your list items.