Posts
CSS allows you to customize the lists that can be made
with HTML to the extent that even images can be used as bullet points for unordered lists.
CSS List Style Type
If you want to use something different from the default numbering of ordered lists, or the bullets/discs of unordered lists, then all you have to do is choose a different style for your lists. CSS allows you to select from a wide variety of different list item shapes.
Unordered list styles: square, circle, disc (default), and none
Ordered list styles: upper-alpha, lower-alpha, upper-roman, lower-roman, decimal (default), and none
Code:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style type=”text/css”>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
Output:
CSS Lists With Images
As we stated in the introduction, CSS lists allow you to insert an image in place of the normal bullets. A good choice for a bullet image would be one that is smaller than the height of your text and is a relatively simple/plain graphic.
Code
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style type=”text/css”>
ul { list-style-image: url(“listArrow1.gif”); }
ol { list-style-image: url(“listArrow2.gif”); }
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul >
<li>Apple</li>
<li>Banana</li>
<li>Stawberry</li>
</ul>
<p>Example of ordered lists:</p>
<ol >
<li>Apple</li>
<li>Banana</li>
<li>Stawberry</li>
</ol>
</body>
</html>
Output
Required images
CSS List Position
With CSS, it is possible to alter the indentation that takes place with your list items. See the example below for the trick of indenting your lists.
Code:
<html >
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style type=”text/css”>
ul { list-style-position: inside; }
ol { list-style-position: outside; }
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul >
<li>Apple</li>
<li>Banana</li>
<li>Stawberry</li>
</ul>
<p>Example of ordered lists:</p>
<ol >
<li>Apple</li>
<li>Banana</li>
<li>Stawberry</li>
</ol>
</body>
</html>
Output
with HTML to the extent that even images can be used as bullet points for unordered lists.
CSS List Style Type
If you want to use something different from the default numbering of ordered lists, or the bullets/discs of unordered lists, then all you have to do is choose a different style for your lists. CSS allows you to select from a wide variety of different list item shapes.
Unordered list styles: square, circle, disc (default), and none
Ordered list styles: upper-alpha, lower-alpha, upper-roman, lower-roman, decimal (default), and none
Code:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style type=”text/css”>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
Output:
CSS Lists With Images
As we stated in the introduction, CSS lists allow you to insert an image in place of the normal bullets. A good choice for a bullet image would be one that is smaller than the height of your text and is a relatively simple/plain graphic.
Code
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style type=”text/css”>
ul { list-style-image: url(“listArrow1.gif”); }
ol { list-style-image: url(“listArrow2.gif”); }
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul >
<li>Apple</li>
<li>Banana</li>
<li>Stawberry</li>
</ul>
<p>Example of ordered lists:</p>
<ol >
<li>Apple</li>
<li>Banana</li>
<li>Stawberry</li>
</ol>
</body>
</html>
Output
Required images
CSS List Position
With CSS, it is possible to alter the indentation that takes place with your list items. See the example below for the trick of indenting your lists.
Code:
<html >
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style type=”text/css”>
ul { list-style-position: inside; }
ol { list-style-position: outside; }
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul >
<li>Apple</li>
<li>Banana</li>
<li>Stawberry</li>
</ul>
<p>Example of ordered lists:</p>
<ol >
<li>Apple</li>
<li>Banana</li>
<li>Stawberry</li>
</ol>
</body>
</html>
Output
No comments:
Post a Comment