Styling Elements of Nested HTML Lists - Polish the look of nested HTML lists with CSS styles
(Page 3 of 4 )
In the section that you just read, I discussed in detail how to build a few basic nested HTML lists. As I stated in that segment, it’s necessary to improve the visual appearance of these web page elements, since in their current state they look rather primitive.
With that idea in mind, I’m going to define a brand new (X)HTML file. It will assign some CSS styles to a nested list that has one level of nesting. The file looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example on building multiple nested HTML lists (styled version)</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
/* style lists */
ul{
list-style: outside;
margin: 0 15px 10px 0;
}
/* item lists */
li{
font: bold 10pt Arial, Helvetica, sans-serif;
color: #000;
}
/* sub items */
li li{
font: normal 10pt Arial, Helvetica, sans-serif;
color: #666;
margin: 0 0 5px 0;
}
</style>
</head>
<body>
<h1>Example on building multiple nested HTML lists</h1>
<ul>
<li>List Item 1
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>
</li>
<li>List Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>
</li>
<li>List Item 3
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>
</li>
<li>List Item 4
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>
</li>
<li>List Item 5
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>
</li>
<li>List Item 6
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>
</li>
<li>List Item 7
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>
</li>
<li>List Item 8
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>
</li>
<li>List Item 9
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>
</li>
<li>List Item 10
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>
</li>
</ul>
</body>
</html>
As you can see, the previous code sample is very simple to follow. All it does is assign some CSS styles to the <ul> and <li> elements of each nested list. Probably the most complex rule coded here is the one that styles items within the sub lists, represented by the following declaration:
li li{
font: normal 10pt Arial, Helvetica, sans-serif;
color: #666;
margin: 0 0 5px 0;
}
However, the way the sub lists have been styled is pretty intuitive, since it uses an approach that doesn’t differ too much from what you’ve done hundreds of times before.
Of course, the previous example code would be rather incomplete if I didn't show you how this sample nested list looks after applying to it the pertinent CSS styles. So, here’s a screen shot that shows how the list is displayed on the browser:
You should now understand how to style HTML lists that have one level of nesting. Next, I’m going to discuss how to achieve this same styling process to build a hierarchical navigation bar.
This topic will be discussed in depth in the final section of this article. Thus, to learn more about it, click on the link that appears below and keep reading.
Next: Building a hierarchical navigational system >>
More HTML Articles
More By Alejandro Gervasio
