Web-Development-Tutorials Home

Web Development Tutorials
HTML Tutorials
CSS Tutorials
Javascript Tutorials
PHP Tutorials

Web-Development-Tutorials.com

Web Development Tutorials and Resources for Web Developers
from Beginners to Professionals

CSS List Tutorial

CSS allows you to customize the lists that can be made with HTML using one of the following properties: list-style-image, list-style-position and list-style-type.

list-style-type defines the look of the bullets used in the list.

list-style-image allows you to use custom images in place of the bullets.

list-style-position allows you to specify whether the list item marker should be placed on the inside or outside of the list.


Setting different list-item markers in unordered lists

The following CSS code example shows the different list-item markers in CSS.

<html>
<head>
<style type="text/css">
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}

</style>
</head>
<body>
<ul class="disc">
<li>CSS</li>
<li>Tutorial</li>
</ul>

<ul class="circle">
<li>CSS</li>
<li>Tutorial</li>
</ul>

<ul class="square">
<li>CSS</li>
<li>Tutorial</li>
</ul>

<ul class="none">
<li>CSS</li>
<li>Tutorial</li>
</ul>
</body>
</html>

Click on CSS List Example to view the web page the above code produces.


Setting different list-item markers in ordered lists

The following CSS code example shows the different list-item markers in CSS.

<html>
<head>
<style type="text/css">
ol.decimal {list-style-type: decimal}
ol.lower-roman {list-style-type: lower-roman}
ol.upper-roman {list-style-type: upper-roman}
ol.lower-alpha {list-style-type: lower-alpha}
ol.upper-alpha {list-style-type: upper-alpha}

</style>
</head>
<body>
<ol class="decimal">
<li>CSS</li>
<li>Tutorial</li>
</ol>

<ol class="lower-roman">
<li>CSS</li>
<li>Tutorial</li>
</ol>

<ol class="upper-roman">
<li>CSS</li>
<li>Tutorial</li>
</ol>

<ul class="lower-alpha">
<li>CSS</li>
<li>Tutorial</li>
</ol>

<ol class="upper-alpha">
<li>CSS</li>
<li>Tutorial</li>
</ol>
</body>
</html>

Click on CSS List Example to view the web page the above code produces.


Setting an image as the list-item marker

The following CSS code example shows how to set an image as the list-item marker.

<html>
<head>
<style type="text/css">
ul {list-style-image: url('smilieface.gif')}
</style>
</head>
<body>
<ul>
<li>CSS</li>
<li>Tutorial</li>
</ul>
</body>
</html>

Click on CSS List Example to view the web page the above code produces.


Placing the list-item marker

The following CSS code example shows where to place the list-item marker.

<html>
<head>
<style type="text/css">
ul.insideposition {list-style-position: inside}
ul.outsideposition {list-style-position: outside}

</style>
</head>
<body>
<p>
The following list has a list-style-position with a value of "inside"
</p>
<ul class="insideposition">
<li>CSS</li>
<li>Tutorial</li>
</ul>

<p>
The following list has a list-style-position with a value of "outside"
</p>
<ul class="outsideposition">
<li>CSS</li>
<li>Tutorial</li>
</ul>
</body>
</html>

Click on CSS List Example to view the web page the above code produces.

Web Development Resources

Free Hit Counters
Free Music and
Online Radio Stations

Free SEO Tools
Free Page Rank Checker
Free Back Link Checker
Free Google Banned Checker
Free Keyword Density Checker
Free Link Popularity Checker
Free Search Engine Keyword Position Checker
Free Search Engines Lisitings Preview
Free Link Extractor
Free Source Code Viewer
Free Domain Tools
Free Domain Name Availability Tool
Free Domain Whois Lookup
Free Ping Test
Free Reverse/IP Lookup
Misc Free Web Development Resources View Web Browser Details