Style Sheets for a Useful Links Page - Style Sheet 1 - Unordered List type
(Page 2 of 4 )
First, a style sheet is needed to customize the headers being used. Here is an example of that. Of course, it can be edited according to the needs of any site. Remember that the <style> tags go inside the <HEAD> tags at the top of your web page and not in the main body <BODY>.
<style type="text/css">
<!--
BODY { font-family:arial; background-color:ffffff; foreground-
color:000000; font-size:11; }
P { font-family:arial; color:000000; font-size:11; }
A { text-decoration:none; color:0000cc; font-size:11; font-
weight:bold; } A:visited { text-decoration:none; color:0000cc;
font-size:11; }
A:hover { text-decoration:underline; color:0066cc; font-size:12;
font-weight:bold; }
UL { list-style-type:circle; }
H1 { text-decoration:underline; color:000000; font-size:14; font-
weight:bold; }
H2 { color:000000; font-size:12; font-weight:bold; }
H3 { color:000000; font-size:11; font-weight:bold; } -->
</style>
The tags for the first list below are <UL> and </UL>. The <LI> tag is used to list the items inside the unordered list. There are many ways to use this, particularly when performing a laundry list of items on an a web page. For useful links, a laundry list is exactly what you may need.
Here is a sample of an unordered list in HTML:
<UL>
<LI>Good Guys
<LI>Bad Guys
<LI>Nobody cares
</UL>
Here is the page resulting from the code:
Good Guys
Bad Guys
Nobody cares
Do not forget to close the list with the </UL>. If a different shape to the bullet is needed, then there is an easy way to do that in the <UL> tag. The attributes tell the browser what shape should be displayed. For example:
<UL type="square">
<LI>PSP
<LI>iPod
<LI>iPhone
</UL>
The browser window will display the list as:
So changing the shape of the tag is very easy and quick. You can choose between several different shapes for the tag:
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
Okay, so what if an image is needed rather than plain simple shapes? This is no problem. A simple change to the code and an image is placed:
ul
{
list-style-image: url('shape.gif')
}
The same principle can apply to changing the text font attributes like this when it becomes necessary to mix both ordered and unordered lists:
ul li { font-size:24px; }
In that way, if both unordered and ordered lists are used on the web page, the style sheet will customize just one type of list. In the above example that is the unordered list.
Here is another common example that can be customized easily:
<html>
<body>
<h2>Example of A Nested List</h2>
<ul>
<li>Action</li>
<li>Sci-Fi</li>
<li>Comedy</li>
<li>Fantasy</li>
<li>Horror</li>
<ul>
<li>Halloween</li>
<li>Hills have Eyes</li>
<li>The Number 23</li>
<li>The Howling</li>
<ul>
<li>The Howling 2</li>
<li>The Howling 3</li>
</ul>
</li>
</ul>
</li>
<li>Romance</li>
</ul>
</body>
</html>
Next I will cover the ordered type of list for a web page.
Next: Style Sheet 2 - Ordered List type >>
More Style Sheets Articles
More By Stephen Davies
