Skip to main content

CSS List

By
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

 

Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

MySQL Connection

By
Connection with MySQL Database Before accessing database, you must create a connection to the database Syntax: mysql_connect(servername,username,password); where, servername specifies the server to connect to. Default value is “localhost” username specifies the username to log in with. Default value is the name of the user that owns the server process. To connect offline we use username “root”. password specifies the password to log in with. Default is “” Code : Creating connection to the database and selecting the required database <?php $con = mysql_connect(“localhost”,”root”,”"); if (!$con) { die(‘Could not connect: ‘ . mysql_error()); } else{ mysql_select_db(“test”, $con) }; ?> Here, we have store connection in a variable called $con and trap error using die function. Closing connection The connection will be closed automatically when the script ends. To close the connection before, use the mysql_close() function: <?php $con = mysql_conne...
Post a Comment
Read more

Join in MySQL

By
Join clause is used to combine rows from two or more tables depending upon common field between them. There are different kinds of Joins. The most common and useful Join is Inner Join. Inner Join: It will return all rows from multiple tables where the condition is met.
Post a Comment
Read more

Div and span

By
Div: Div <div> tag is that it divides the HTML document into sections. Proper usage of the <div> tag is fundamental to good HTML coding, the <div> tag is one of the most powerful tools available to a web developer. Span: Span <span> is  in-line level elements, they only span across small amounts of content, typically words or phrases. For example: a <span> tag might be used to make a word red in color or to give it an underline.
Post a Comment
Read more