WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS Lists


The CSS list attribute works as follows:

  • Mark different list items as ordered lists
  • Mark different list items as unordered lists
  • Set list items as images


List

In HTML, there are two types of lists:

  • Unordered list-special graphics (such as small black dots, small boxes, etc.) for list item tags
  • Ordered list-list items are labeled with numbers or letters

With CSS, you can list further styles and mark up list items with images.


Different list item tags

The list-style-type attribute specifies the type of the list item tag:

Example

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;}
Try it yourself »

Some values are unordered lists, and some are ordered lists.


Image tagged as a list item

To specify the image of the list item tag, use the list style image attribute:

Example

ul { list-style-image: url('sqpurple.gif'); }
Try it yourself »

The above example is not the same in all browsers. IE and Opera display image tags a little higher than Firefox, Chrome and Safari.

If you want to place the same image logo in all browsers, you should use a browser compatibility solution, the process is as follows


Browser compatibility solution

Also in all browsers, the following example will display the image tag:

Example

ul { list-style-type: none; padding: 0px; margin: 0px; } ul li { background-image: url(sqpurple.gif); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 14px; }
Try it yourself »

List - Shorthand property

You can specify all list attributes in a single attribute. This is called the shorthand attribute.

Use shorthand attributes for the list, set the list style attributes as follows:

Example

ul { list-style: square url("sqpurple.gif"); }
Try it yourself »

The following attributes can be set in order:

  • list-style-type
  • list-style-position (for instructions, see the CSS property sheet below)
  • list-style-image

If one of the above values is missing and the rest are still in the order specified, it doesn't matter.


Styling List With Colors

We can likewise style records with hues, to make them look somewhat more interesting.

Anything added to the <ol> or <ul> tag, influences the whole rundown, while properties added to the <li> label will influence the individual rundown items:

Example

ol { background: #ff9999;
    padding: 20px;
    } ul { background: #3399ff;
    padding: 20px;
    } ol li { background: #ffe5e5;
    padding: 5px;
    margin-left: 35px;
    } ul li { background: #cce5ff;
    margin: 5px;
    }

Result:

  1. English
  2. Chinese
  3. Spanish
  4. Hindi
  • Arabic
  • Portuguese
  • Russian
Try it yourself »



The CSS list properties enable us to set diverse rundown item

  1. English
  2. Chinese
  3. Spanish
  4. Hindi
  • Arabic
  • Portuguese
  • Russian

HTML Lists and CSS List Properties

In HTML, there are two fundamental sorts of lists:

  • unordered records (<ul>) - the rundown things are set apart with bullets
  • ordered records (<ol>) - the rundown things are set apart with numbers or letters

The CSS list properties permit you to:

  • Set diverse rundown thing markers for requested lists
  • Set distinctive rundown thing markers for unordered lists
  • Set a picture as the rundown thing marker
  • Add foundation hues to records and rundown items

Different List Item Markers

The list-style-type property determines the sort of rundown thing marker.

The following model demonstrates a portion of the accessible rundown thing markers:

Example

ul {
    list-style-type: circle;
}

ul{
    list-style-type: square;
}


ol{
    list-style-type: lower-alpha;
}
Try it yourself »

Note: Some of the qualities are for unordered records, and some for requested lists.


An Image as The List Item Marker

The list-style-image determines a picture to be utilized as the rundown thing marker:

Example

ul {
    list-style-picture: url('welookups.gif');
}
Try it yourself »

Position The List Item Markers

The list-style-position property determines whether the rundown thing markers ought to show up inside or outside the substance flow:

Example

ul.a {list-style-position:inside;}
ul.b {list-style-position:outside;}
Try it yourself »

List - Shorthand property

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

Example

ul { list-style: square inside url("welookups.gif"); }
Try it yourself »

When utilizing the shorthand property, the request of the property estimations are:

  • list-style-type (if a rundown style-picture is determined, the estimation of this property will be shown if the picture for reasons unknown can't be displayed)
  • list-style-position (indicates whether the rundown thing markers ought to show up inside or outside the substance flow)
  • list-style-image (determines a picture as the rundown thing marker)

If one of the property estimations above are feeling the loss of, the default an incentive for the missing property will be embedded, if any.


Styling List With Colors

We can likewise style records with hues, to make them look somewhat more interesting.

Anything added to the <ol> or <ul> tag, influences the whole rundown, while properties added to the <li> label will influence the individual rundown items:

Example

ol { background: #ff9999;
    padding: 20px;
    } ul { background: #3399ff;
    padding: 20px;
    } ol li { background: #ffe5e5;
    padding: 5px;
    margin-left: 35px;
    } ul li { background: #cce5ff;
    margin: 5px;
    }

Result:

  1. English
  2. Chinese
  3. Spanish
  4. Hindi
  • Arabic
  • Portuguese
  • Russian
Try it yourself »