HTML Lists – CSS Properties

      No Comments on HTML Lists – CSS Properties

HTML Lists – CSS Properties

HTML has basically two types of lists:

  • Unordered lists <ul>
  • Ordered Lists <ol>

The CSS Properties are :

  • Setting different list markers for unordered list.
  • Setting different list markers for ordered list.
  • Setting image as list markers.
  • Adding background color to list and list items.

HTML Lists – CSS Properties

Different List markers

The CSS property list-style-type specifies the type of list marker.

Here is an example:

  • Black
  • Blue
  • Red
  • Pink

<style>
.list_marker_change
{
list-style-type:circle;
}
</style>
<ul class="list_marker_change">
	<li>Black</li>
	<li>Blue</li>
	<li>Red</li>
	<li>Pink</li>
</ul>

Also Try:

    For <ul>

  • list-style-type: square;
  • list-style-type: none;
  • For <ol>

  • list-style-type: upper-roman;
  • list-style-type: lower-alpha;

Using images as list item markers

list-style-image property.

  • Black
  • Blue
  • Red
  • Pink

<style>
.list_marker_image
{
list-style-image:url('scanfcode111-e1488348944252.png');
}
</style>
<ul class="list_marker_image">
	<li>Black</li>
	<li>Blue</li>
	<li>Red</li>
	<li>Pink</li>
</ul>

List – Shorthand property

The list-style property is a shorthand property. It is used to set all the list properties in one declaration:

  • list-style-type (if a list-style-image is specified, the value of this property will be displayed if the image for some reason cannot be displayed)
  • list-style-position (specifies whether the list-item markers should appear inside or outside the content flow)
  • list-style-image (specifies an image as the list item marker)

Styling list with colors

  • Black
  • Blue
  • Red
  • Pink

Try it:

<style>
.list_colored 
{
background-color:#ff5050;
padding:20px;
}
.li_colored
{
background-color:#f2f2f2;
margin:10px;
}
</style>
<ul class="list_colored">
	<li class="li_colored">Black</li>
	<li class="li_colored">Blue</li>
	<li class="li_colored">Red</li>
	<li class="li_colored">Pink</li>
</ul>

Leave a Reply

Your email address will not be published. Required fields are marked *