CSS Lists

Used before category names. CSS

Lists

Unordered List

<ul>
   <li>One</li>
   <li>Two</li>
</ul>

Ordered List

<ol>
   <li>One</li>
   <li>Two</li>
</ol>
  • List Style : The list-style CSS shorthand property allows you to set all the list-style properties at once.(list-style: disc|circle|square|decimal|decimal-leading-zero|lower-roman|upper-roman|lower-greek|lower-latin|upper-latin|armenian|georgian|lower-alpha|upper-alpha|none;)
ul{
   list-style: disc;   
}
  • List Item Markers: This property specifies the type of list item marker.

Example:    list-style-type, list-style-image, list-style-position

  • Image as The List Item Marker: The list-style-image specifies an image for the marker rather than a bullet point or number.
ul {
   list-style-image: url(imges/img.jpg);  
}
  • Position The List Item Markers: The list-style-position specifies whether a long point that wraps to a second line should align with the first line or start underneath the start of the marker.
ul {
   list-style-position: inside | outside;
   padding: 0;
   border-left: solid 2px red;
}
  • Remove Default Settings: That this property can also be used to remove the markers/bullets. Note that the list also has default margin and padding.
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
  • List – Shorthand: This is shorthand sets three individual CSS lists styling properties in one.
ul {
   list-style: square outside url(images/img.jpg);  
}