Home / Articles / Programming languages / Markup languages / HTML & CSS / CSS: working with lists

CSS: working with lists

CSS: working with lists
 
CSS: working with lists
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


With CSS, you can create bulleted and numbered lists, and also use an image as a substitute for list item.

Table 1 gives a list of properties of the elements designed to create and edit lists.

Table 1. Properties of CSS to control lists.

Property

Value

Description

Example

list-style

disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none

Bulleting type. First three are used to create bulleted lists, and the rest for numbered.

LI {list-style: circle}

LI {list-style: upper-alpha}

list-style-image

none
URL

Assigns as a bulleted symbol any image file.

LI {list-style-image: url
(check.gif)}

list-style- position

outside
inside

Defines the position of the bulleted items relative to the block of text line.

LI {list-style-position: inside}

Since <LI> tag inherits the style properties of tag <OL> or <UL>, which act as parents, you can set the style for the selector UL, and for selector LI. In Example 1 selector UL is used, the style parameters are set for it.

Example 1. Creating bulleted list.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <style type="text/css">
      ul { 
        list-style: square; /* Square bullet items */
        list-style-position: outside; /* Items are positioned outside the text block */
        color: navy; /* Color of the text list */
      }
    </style>
  </head> 
  <body>
    <ul>
      <li>Header must have less than three lines.</li>
      <li>When the selecting the header, use well-established terms, such as guest book, chat, link, home page and others.</li>
      <li>Before using a specialized term or word, decide whether or not it understood by the reader.</li>
    <ul>
  </body>
</html>

In this example, you can see square items and their positioning relative to the external text. Color - dark blue.

  • Header must have less than three lines.
  • When the selecting the header, use well-established terms, such as guest book, chat, link, home page and others.
  • Before using a specialized term or word, decide whether or not it understood by the reader.

To select the desired image instead of usual items use the parameter list-style-image, as shown in Example 2.

Example 2. Using images as list items.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <style type="text/css">
      li { 
        list-style-image: url('images/check.gif'); /*Path to the file with item */
      }
    </style>
  </head> 
  <body>
    <ul>
      <li>Header must have less than three lines.</li>
      <li>When the selecting the header, use well-established terms, such as guest book, chat, link, home page and others. </li>
      <li>Before using a specialized term or word, decide whether or not it understood by the reader.</li>
    </ul>
  </body>
</html>

The result of this example is shown below. Instead of bullets a small image is used.

  • Header must have less than three lines.
  • When the selecting the header, use well-established terms, such as guest book, chat, link, home page and others.
  • Before using a specialized term or word, decide whether or not it understood by the reader.

Some examples of creating different bulleted lists are shown below in Table 2.

Table 2. Different list types.

HTML code

Example

<li style="list-style: disc">

What to consider when testing a web-site:

  • validity of all links
  • different browsers support
  • readers-friendly text

<li style="list-style: circle">

What to consider when testing a web-site:

  • validity of all links
  • different browsers support
  • readers-friendly text

<li style="list-style: square">

What to consider when testing a web-site:

  • validity of all links
  • different browsers support
  • readers-friendly text

<li style="list-style: decimal">

Numbered list with Arabic numerals:

  • text
  • text
  • text

<li style="list-style: lower-roman">

Numbered liNumberedst with lowercase Roman numerals:

  • text
  • text
  • text

<li style="list-style: upper-roman">

Numbered list with upper-case Roman numerals:

  • text
  • text
  • text

<li style="list-style: lower-alpha">

Numbered list with lowercase letters of Latin alphabet:

  • text
  • text
  • text

<li style="list-style: upper-alpha">

Numbered list with uppercase letters of the alphabet:

  • text
  • text
  • text

 

Read also

Conditional comments for IE

Conditional comments for IE

How to write in HTML

How to write in HTML

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation