Formatting Ordered lists so they look like an outline in Microsoft Word.

Posted November 14, 2004

Before I first started building this site I thought that lists were kind of a useless HTML tags <ul> <li>. But as I was reading up all of the different information about CSS and building my own CSS based site, I realized the built in capabilities of lists were very powerful. The main problem I had in the past, the same with header tags s<h1>, is my lack of knowledge in controlling the styling away from the default settings.

So what we are going to do here is show you how to style those elements and then how to do nested.

Also, as a sidebar. Another important design issue to address when making a CSS site, or any website with CSS styling is how you organize your stylesheet. The beauty of a stylesheet is that it is such condense markup that you may have a 8 page file that is only 7K that gets loaded once into the computer’s cache and never loaded again.

That said, 8 pages is a lot of crap to surf through and try to remember, so labeling your stylesheet is a good idea. But I wouldn’t over label however because the whole idea behind CSS is that you are condensing unnecessary code, and by adding comments that are beyond “basic explanations of out of the ordinary elements” are extraneous.

The format I use for smaller sites, (50 pages or less as that is all I have built so far) is to separate all of the block elements specific to the page into one section and then label that section. It’s looks something like this;

/* Start “Photo Diary” Page Selectors */

div.mainContent h3{

font-size:13px;

color:#6C6C6C;

padding:0px;

margin:0px;

text-align:center;

}

div.mainContent h3 span{

color:#3399CC;

font-size:13px;

font-style:normal;

font-weight:bold;

}

div#dashed{

width:186px;

border-bottom:1px #666666 dashed;

margin:0px 0px 0px 4px;

}

Then, when I need to find something, I can do a Ctrl+F in Dreamweaver and search for “Photo Diary” and boom I am in the section I need to be to edit or add addition styles.

Back to styling list selectors.

1) Open up your stylesheet.

2) Find the appropriate section where you are using the list selectors. I am going to use “Home Page” as my section in the example.

3) Type in this code

ul{

list-style-type: square;
font-size:12px;

color:#330033;

padding:0;

margin:0;

}

This code will set the font size of the list, change the color of the text, change the type of list marker in “list-style-type” and then take away the default browser padding and margin for each element so they stack right on top of each other.

(As a sidebar, when using a measurement of “0″, you do not need a size declaration because 0 is the same value no matter what measurement you use, and is just another small way to reduce your code.) See the results;

First List Item
Second List Item
Third List Item

Now, like a propositioned in the title, we can then use this styling knowledge to style selector specific styles for nested elements.

Here is the code you can enter;

ul ul{

list-style-type: disc;

color:#cc0099;

}

ul ul ol{

list-style-type: upper-roman;

}

In the first style I have specified when there is an “unordered list inside an unordered, use a disc” as the list style element. In the second style I have specified an even more specific instance when there is an “ordered list inside an unordered list inside an unordered, use upper-roman numerals”.

Note: Each of the properties will be inherited down in the nesting from the first established instance of the selector. So, your second set of unordered list information will retain the font, color, padding, and margin of the first list unless otherwise set. This is the result;

First List Item
Second List Item
Third List Item
- First List Item
- Second List Item
- Third List Item
  1. First List Item
  2. Second List Item
  3. Third List Item

Without getting too technical, that is a visual example of how to make nested lists. If you look at my code, I haven’t used an external stylesheet and linked it, instead for this example, put the styles inline which is easier to keep my information organized, but is much less portable and in the end defeats the purpose of efficient CSS code.

For more information on ordered and unordered lists, visit W3Schools.org. They list off all of the type of options for styling your lists with the appropriate marker or letter / numeral combinations for your needs. I hope this was helpful.