CSS List

Common ways of manipulating font properties in CSS include the following:

list-style-type

list-style-position

list-style-image

list-styleEach is described in detail below:

list-style-type

The list-style-type property lets you specify a different type of marker than the default disc. The most commonly used list-style-types are:

none

disc

circle

squareOne may also wish to use ordered character sets. Common ones are:

upper-latin

lower-latin

upper-roman

lower-roman

upper-alpha

lower-alphaSome examples below:
Example 1:

<ul style='list-style-type:upper-roman;'>   <li>item 1</li>   <li>item 2</li> </ul>

Result:

• item 1
• item 2

Example 2:

<ul style='list-style-type:square;'>   <li>square item 1</li>   <li>square item 2</li> </ul>

Result:

• square item 1
• square item 2

list-style-position

The list-style-position property offers a way for the user to specify whether the marker should be treated as part of the regular text when it comes to formatting. The possible values are 'inside' and 'outside'. 'Outside' is the default value.
Below are examples to illustrate the difference between the two (notice the indentation and how the lines align):
Example 3:

<ul style='list-style-position:inside;'>   <li>First one<br>second line   <li>Second one </ul>

Result:

• First one
  second line
• Second one

Example 4:

<ul style='list-style-position:outside;'>   <li>First one<br>second line   <li>Second one </ul>

Result:

• First one
  second line
• Second one

list-style-image

The list-style-image property is used to specify an image to use for the market. The syntax is
list-style-image:url([image_url]);
For example, if our CSS code is

ul {   list-style-image:url("circle.gif"); }

the following HTML code

<ul>   <li>First list for custom marker.   <li>Second list for custom marker. </ul>

renders

• First list for custom marker.
• Second list for custom marker.

list-style

All 3 properties above (list-style-type, list-style-position, and list-style-image) can be combined into a single list-style property. This is called a shortcut, and the order does not matter. For example:

ul {   list-style: url("circle.gif") none inside; }

the following HTML code

<ul>   <li>First list for combined list marker.   <li>Second list for combined list marker. </ul>

renders

• First list for combined list marker.
• Second list for combined list marker.

Dont Miss Another Post Connect With Us ! Enter your email address:

Tweet

Posted in: CSS Tutorial