CSS: List-style-type Property - TechOnTheNet

1. Home
2. CSS

CSS: list-style-type property

This CSS tutorial explains how to use the CSS property called list-style-type with syntax and examples.

Description

The CSS list-style-type property defines the appearance of a list item element.

Syntax

The syntax for the list-style-type CSS property is:

list-style-type: value;

Parameters or Arguments

value

The appearance of a list item element. It can be one of the following:

Value	Description
disc	Filled circle. This is the default. ul { list-style-type: disc; }
circle	Hollow circle ul { list-style-type: circle; }
square	Filled square ul { list-style-type: square; }
decimal	Decimal numbers starting with 1 ol { list-style-type: decimal; }
decimal-leading-zero	Decimal numbers starting with 1, padded with 0 at the front for numbers less than 10 ol { list-style-type: decimal-leading-zero; }
lower-roman	Lowercase roman numerals ol { list-style-type: lower-roman; }
upper-roman	Uppercase roman numerals ol { list-style-type: upper-roman; }
lower-greek	Lowercase Greek ol { list-style-type: lower-greek; }
lower-alpha	Lowercase ASCII letters ol { list-style-type: lower-alpha; }
lower-latin	Lowercase ASCII letters (not supported in IE7) ol { list-style-type: lower-latin; }
upper-alpha	Uppercase ASCII letters ol { list-style-type: upper-alpha; }
upper-latin	Uppercase ASCII letters (not supported in IE7) ol { list-style-type: upper-latin; }
armenian	Armenian numbering ol { list-style-type: armenian; }
georgian	Georgian numbering ol { list-style-type: georgian; }
none	No numbering or symbol will appear before each list item element ol { list-style-type: none; } ul { list-style-type: none; }
inherit	Element will inherit the list-style-type from its parent element ol { list-style-type: inherit; } ul { list-style-type: inherit; }

Note

• The list-style-type property can be applied to <ol>, <ul> or <li> tags.
• The list-style-type applies to elements with display: list-item.
• IE7 does not support lower-latin and upper-latin, instead use lower-alpha and upper-alpha.
• Alphabetical styles such as lower-alpha or upper-alpha will render undefined numbers after 26 items have been listed.
• See also the list-style, list-style-image, and list-style-position properties.

Browser Compatibility

The CSS list-style-type property has basic support with the following browsers:

• Chrome
• Android
• Firefox (Gecko)
• Firefox Mobile (Gecko)
• Internet Explorer (IE)
• IE Phone
• Opera
• Opera Mobile
• Safari (WebKit)
• Safari Mobile

Example

We will discuss the list-style-type property below, exploring examples of how to use this property in CSS.

With Ordered Lists

Let's look at a CSS list-style-type example where we apply the list-style-type to an ordered list.

The HTML would look like this:

<ol> <li>TechOnTheNet.com</li> <li>CheckYourMath.com</li> <li>BigActivities.com</li> </ol>

The CSS would look like this:

ol { list-style-type: upper-roman; }

The ordered list would look like this:

In this CSS list-style-type example, we have chosen to display uppercase roman numerals in front of each list item in the <ol> tag.

With Unordered Lists

Next, let's look at a CSS list-style-type example where we apply the list-style-type to an unordered list.

The HTML would look like this:

<ul> <li>TechOnTheNet.com</li> <li>CheckYourMath.com</li> <li>BigActivities.com</li> </ul>

The CSS would look like this:

ul { list-style-type: none; }

The unordered list would look like this:

In this CSS list-style-type example, we have removed the disc from the front of each list item in the <ul> tag. The list items will still indent (unless overriden with CSS) but there will be nothing appearing before each list item.

With List Items

Let's look at a CSS list-style-type example where we apply the list-style-type to a list item.

The HTML would look like this:

<ul> <li>TechOnTheNet.com</li> <li>CheckYourMath.com</li> <li>BigActivities.com</li> </ul>

The CSS would look like this:

li { list-style-type: square; }

In this CSS list-style-type example, we have chosen to display filled squares in front of every <li> element (instead of a disc for unordered lists).

This would also result in the list items appearing as follows (regardless of whether the list items are part of an ordered or unordered list):

NEXT: outline Share on:

Databases

• SQL
• Oracle / PLSQL
• SQL Server
• MySQL
• MariaDB
• PostgreSQL
• SQLite

MS Office

• Excel
• Access
• Word

Web Development

• HTML
• CSS
• JavaScript
• Color Picker

Programming

• C Language

More

• ASCII
• Unicode
• Linux
• UNIX
• Techie Humor

Font Properties

• font
• font-family
• font-size
• font-style
• font-variant
• font-weight
• line-height

Text Properties

• color
• letter-spacing
• text-align
• text-decoration
• text-indent
• text-shadow
• text-transform
• white-space
• word-spacing
• word-wrap

Background Properties

• background
• background-attachment
• background-color
• background-image
• background-position
• background-repeat

Positioning Properties

• bottom
• clear
• float
• left
• position
• right
• top

Box Model Properties

• box-shadow
• height
• margin
• margin-bottom
• margin-left
• margin-right
• margin-top
• max-height
• max-width
• min-height
• min-width
• overflow
• overflow-x
• overflow-y
• padding
• padding-bottom
• padding-left
• padding-right
• padding-top
• width

List Style Properties

• list-style
• list-style-image
• list-style-position
• list-style-type

Outline Properties

• outline
• outline-color
• outline-style
• outline-width

Table Properties

• border-collapse
• border-spacing
• caption-side
• table-layout
• vertical-align

Border Properties

• border
• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-color
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-radius
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-style
• border-top
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-width

Page Break Properties

• page-break-after
• page-break-before
• page-break-inside

Other Properties

• display
• opacity

CSS Selectors

• :active
• :after
• :before
• :first-child
• :first-letter
• :first-line
• :hover
• :last-child
• :link
• :nth-child
• :nth-last-child
• :only-child
• :visited
• child (>)
• descendant

Home | About Us | Contact Us | Testimonials | Donate

While using this site, you agree to have read and accepted our Terms of Service and Privacy Policy.

Copyright © 2003-2025 TechOnTheNet.com. All rights reserved.