CodeAve.com CodeAve.com - CSS - Text Display
ASP
JavaScript
CSS
·Basics
·Page Display
·Text Display
·Script Writers
·Contents
·What's New?
HTML
Maps
Links
Mail List
Search
Sitemap

 

List Style
In HTML there are a couple of different ways in which you can display lists. CSS takes from that and expands from the three or four available in HTML and expand the possibilities to include lists in a variety of styles disc, circle, square, decimal, lower-alpha, circle, lower-roman and upper-roman. The following example will utilize each of these styles and can be used to give your pages a slightly different look from ordinary HTML lists.
•View the Output
•Text View
•Print View
•Mail this Link
•Download the Code

<html>
<head>
<title>CodeAve.com/CSS - List Styles</title>
</head>
<body bgcolor="#FFFFFF">

<ul style="list-style-type: disc">
<b>disc</b>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Five</li>
</ul>

<ul style="list-style-type: circle">
<b>circle</b>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Five</li>
</ul>

<ul style="list-style-type: square">
<b>square</b>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Five</li>
</ul>

<ul style="list-style-type: decimal">
<b>decimal</b>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Five</li>
</ul>

<ul style="list-style-type: lower-alpha">
<b>lower-alpha</b>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Five</li>
</ul>

<ul style="list-style-type: upper-alpha">
<b>upper-alpha</b>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Five</li>
</ul>

<ul style="list-style-type: lower-roman">
<b>lower-roman</b>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Five</li>
</ul>

<ul style="list-style-type: upper-roman">
<b>upper-roman</b>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Five</li>
</ul>

</body>
</html>

 

 

 


 ASP: What's New? | Articles | Script Writers | Database Display | Read/Write
Server Variables | Response Objects | Random Events | Miscellaneous
HTML: Forms | Hyperlinks | Headers | Tables | Hyperlinks | Headers | Text Display
JavaScript: Document Info | Forms | Images | Navigation | Script Writers
CSS: Basics | Page Display | Text Display | Script Writers | Miscellaneous
Links | Search Engine db |  Privacy Statement |  Advertising Rates |  Email

CodeAve.com is hosted by MyHosting.com
Donate Food Online with a Mouse Click at TheHungerSite.com
Donate Land Online with a Mouse Click at TheRainForestSite.com
© 1999 - 2010 CodeAve.com
All Rights Reserved