Wednesday, 11 December 2013

CSS » List

As You know You can create lists in HTML, but in CSS You can set different list item markers for ordered lists(the list items are marked with bullets), different list item markers for unordered lists(the list items are marked with numbers or letters), and image as the list item marker.

Creating Different Lists Markers

» EXAMPLE:


<html>
<head>
<style>
#list1 {
list-style: square;
}
#list2 {
list-style: circle;
}
#list3 {
list-style: disk;
}
#list4 {
list-style: upper-roman;
}
#list5 {
list-style: lower-alpha;
}
#list6 {
list-style-type: decimal;
}
#list7 {
list-style-type: decimal-leading-zero;
}
</style>
</head>
<body>
<p>Unordered lists:</p>

<ul id="list1">
  <li>HTML</li>
  <li>CSS</li>
  <li>PHP</li>
  <li>Java Script</li>
</ul>

<ul id="list2">
  <li>HTML</li>
  <li>CSS</li>
  <li>PHP</li>
  <li>Java Script</li>
</ul>

<ul id="list3">
  <li>HTML</li>
  <li>CSS</li>
  <li>PHP</li>
  <li>Java Script</li>
</ul>

<p>Ordered lists:</p>

<ol id="list4">
  <li>HTML</li>
  <li>CSS</li>
  <li>PHP</li>
  <li>Java Script</li>
</ol>

<ol id="list5">
  <li>HTML</li>
  <li>CSS</li>
  <li>PHP</li>
  <li>Java Script</li>
</ol>

<ol id="list6">
  <li>HTML</li>
  <li>CSS</li>
  <li>PHP</li>
  <li>Java Script</li>
</ol>

<ol id="list7">
  <li>HTML</li>
  <li>CSS</li>
  <li>PHP</li>
  <li>Java Script</li>
</ol>

</body>
</html>


» Result:

Unordered lists:
  • HTML
  • CSS
  • PHP
  • Java Script
  • HTML
  • CSS
  • PHP
  • Java Script
  • HTML
  • CSS
  • PHP
  • Java Script
Ordered lists:
  1. HTML
  2. CSS
  3. PHP
  4. Java Script
  1. HTML
  2. CSS
  3. PHP
  4. Java Script
  1. HTML
  2. CSS
  3. PHP
  4. Java Script
  1. HTML
  2. CSS
  3. PHP
  4. Java Script



An Image as The List Item Marker


» EXAMPLE:

<html>
<head>
<style>
ul
{
padding: 0px;
margin: 0px;
list-style-type: none;
}
ul li
{
background-image:url(arrow-icon.png)
background-repeat:no-repeat;
padding-left:25px;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>
</body>
</html>


» Result:


  • HTML
  • CSS
  • PHP