Tuesday, 12 April 2016

CSS Lists

The list properties used to control the presentation of list item markers.

Types of HTML Lists

There are three different types of list in HTML:
  • Unordered lists — A list of items, where every list items are marked with bullets.
  • Ordered lists — A list of items, where each list items are marked with numbers.
  • Definition list — A list of items, with a description of each item.

Styling Lists with CSS

CSS provides the several properties for styling the most commonly used unordered and ordered lists. These CSS list properties typically allow you to:
  • Control the shape or appearance of the marker.
  • Specify an image for the marker rather than a bullet point or number.
  • Set the distance between a marker and the text in the list.
  • Specify whether the marker or bullet would appear inside or outside of the box containing the unordered or ordered list items.
In the following section we'll discuss about the properties that can be used to style lists.

List Style Type

By default, items in an ordered list are numbered with Arabic numerals (1, 2, 3, etc.), whereas in an unordered list, items are marked with round bullets. But, you can change this default list marker type to any other type such as circle, square, roman numerals, latin letters, and so on using the list-style-type property.

Example

  • ul {
  •     list-style-type: square;
  • }
  • ol {
  •     list-style-type: upper-roman;
  • }

Changing the Position of List Markers

The list markers are positioned outside of the list item's boxes, by default. However, you can use the list-style-position property to specify whether the markers or bullet points appear inside or outside of the list item's principal block boxes.
This property takes the value inside or outside, with outside being the default. If the value inside is used, the lines will wrap under the marker instead of being indented.

Example

  • ul.in li {
  •     list-style-position: inside;
  • }
  • ul.out li {
  •     list-style-position: outside;
  • }

Using Images as List Markers

You can also set an image as a list marker using the list-style-image property.
The style rule in the following example assigns a transparent PNG image "arrow.png" as the list marker for all the items in the unordered list.

Example

  • ul li {
  •     list-style-image: url("arrow.png");
  • }
The example above does not produce the same output in all browsers. Internet Explorer and Opera will display the image-marker slightly higher than Firefox, Chrome, and Safari. See below, for the cross browser solution of this problem.

Cross Browser Solution for Image Marker

When using an image as bullet using the list-style-image property, the bullets does not line up to the text accurately across the browsers. As a work-around, you can properly align bullet images via the background-image CSS property. First, set the list to have no bullets. Then, define a non-repeating background image for the list element.
The following example displays the image markers equally in all browsers:

Example

  • ul {
  •     list-style-type: none;
  • }
  • ul li {
  •     background-image: url("arrow.png");
  •     background-position: 0px 5px;    /* X-pos Y-pos (from top-left) */
  •     background-repeat: no-repeat;
  •     padding-left: 20px;
  • }

The list-style Shorthand property

The list-style property is a shorthand property for defining all the three properties list-style-typelist-style-image, and list-style-position of a list in one place.
This style rule set the list marker for the ordered list items to be uppercase Latin letters that appear inside the list item's principal block boxes:

Example

  • ol {
  •     list-style: upper-latin inside;
  • }
Note:When using the shorthand property, the orders of the values are: list-style-type | list-style-position | list-style-image. It doesn't matter if one of the values above is missing, as long as the rest are in the specified order.

No comments:

Post a Comment