Which values can be specified to list-style-type property for ordered list write any 4 values )?

list-style-type

The list-style-type CSS property sets the marker (such as a disc, character, or custom counter style) of a list item element.

Table of Contents Show

list-style-type
CSS list-style-type Property
CSS Basic Properties
SpecificityEdit
CSS | list-style-type Property

The color of the marker will be the same as the computed color of the element it applies to.

Only a few elements (<li> and <summary>) have a default value of display: list-item. However, the list-style-type property may be applied to any element whose display value is set to list-item. Moreover, because this property is inherited, it can be set on a parent element (commonly <ol> or <ul>) to make it apply to all list items.

CSS list-style-type Property

❮ Previous Complete CSS Reference Next ❯

Example

Set some different list styles:

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 »

More "Try it Yourself" examples below.

10 Lists

Contents

Introduction to lists
Unordered lists (UL), ordered lists (OL), and list items (LI)
Definition lists: the DL, DT, and DD elements
1. Visual rendering of lists
The DIR and MENU elements

16 Lists

Contents

Visual formatting of lists
1. List properties: 'list-style-type', 'list-style-image', 'list-style-position', and 'list-style'

CSS Basic Properties

Here are some basic CSS properties to work with.

Text Properties
List Properties
Border Properties
Font Properties

Chapter 1.

Using CSS, the same element can be coded using style properties instead of HTML presentational attributes:

Chapter 1.

The advantages of this may not be immediately clear but the power of CSS becomes more apparent when the style properties are placed in an internal style element or, even better, an external CSS file. For example, suppose the document contains the style element:

All h2 elements in the document will then automatically become red without requiring any explicit code. If the author later wanted to make h2 elements blue instead, this could be done by changing the style element to:

rather than by laboriously going through the document and changing the color for each individual h2 element.

The styles can also be placed in an external CSS file, as described below, and loaded using syntax similar to:

This further decouples the styling from the HTML document and makes it possible to restyle multiple documents by simply editing a shared external CSS file.

CSS information can be provided from various sources. These sources can be the web browser, the user, and the author. The information from the author can be further classified into inline, media type, importance, selector specificity, rule order, inheritance, and property definition. CSS style information can be in a separate document, or it can be embedded into an HTML document. Multiple style sheets can be imported. Different styles can be applied depending on the output device being used; for example, the screen version can be quite different from the printed version, so that authors can tailor the presentation appropriately for each medium.

The style sheet with the highest priority controls the content display. Declarations not set in the highest priority source are passed on to a source of lower priority, such as the user agent style. The process is called cascading.

One of the goals of CSS is to allow users greater control over presentation. Someone who finds red italic headings difficult to read may apply a different style sheet. Depending on the browser and the web site, a user may choose from various style sheets provided by the designers, or may remove all added styles and view the site using the browser's default styling, or may override just the red italic heading style without altering other attributes.

CSS priority scheme (highest to lowest)

Priority	CSS source type	Description
1	Importance	The "!important" annotation overwrites the previous priority types
2	Inline	A style applied to an HTML element via HTML "style" attribute
3	Media Type	A property definition applies to all media types, unless a media specific CSS is defined
4	User defined	Most browsers have the accessibility feature: a user defined CSS
5	Selector specificity	A specific contextual selector (#heading p) overwrites generic definition
6	Rule order	Last rule declaration has a higher priority
7	Parent inheritance	If a property is not specified, it is inherited from a parent element
8	CSS property definition in HTML document	CSS rule or CSS inline style overwrites a default browser value
9	Browser default	The lowest priority: browser default value is determined by W3C initial value specifications

SpecificityEdit

Specificity refers to the relative weights of various rules.[16] It determines which styles apply to an element when more than one rule could apply. Based on specification, a simple selector (e.g. H1) has a specificity of 1, class selectors have a specificity of 1,0, and ID selectors a specificity of 1,0,0. Because the specificity values do not carry over as in the decimal system, commas are used to separate the "digits"[17] (a CSS rule having 11 elements and 11 classes would have a specificity of 11,11, not 121).

Thus the following rules selectors result in the indicated specificity:

Selectors	Specificity
h2 {color: white;}	0, 0, 0, 1
p em {color: green;}	0, 0, 0, 2
.grape {color: red;}	0, 0, 1, 0
p.bright {color: blue;}	0, 0, 1, 1
p.bright em.dark {color: yellow;}	0, 0, 2, 2
#id218 {color: brown;}	0, 1, 0, 0
style=" "	1, 0, 0, 0

ExamplesEdit

Consider this HTML fragment:

To demonstrate specificity

In the above example, the declaration in the style attribute overrides the one in the

CSS | list-style-type Property

The list-style-type property in CSS specifies the appearance of the list item marker (such as a disc, character, or custom counter style) if ‘list-style-image’ has the value ‘none’.

Syntax:

Property values:

disc:This is the default value. The marker is a filled circle.
Syntax: list-style-type: disc;

Example:

<!DOCTYPE html> 

<html>

<head>

<title>CSS list-style-type Property</title>

<style>

.geek1 {

list-style-type: disc;

}

</style>

</head>

<body>

<h2 style = "text-align: center; color: green">

list-style-type: disc;

</h2>

<p>Sorting Algorithms</p>

<ul class="geek1">

<li>Bubble Sort </li>

<li>Merge Sort</li>

<li>Insertion Sort</li>

</ul>

</body>

</html>

Output:

circle:The marker is a hollow circle.
Syntax: list-style-type: circle;

Example:

<!DOCTYPE html> 

<html>

<head>

<title>CSS list-style-type Property</title>

<style>

.geek1 {

list-style-type: circle;

}

</style>

</head>

<body>

<h2 style = "text-align: center; color: green">

list-style-type: circle;

</h2>

<p>Sorting Algorithms</p>

<ul class="geek1">

<li>Bubble Sort </li>

<li>Merge Sort</li>

<li>Insertion Sort</li>

</ul>

</body>

</html>

Output:

square:The marker is a square.
Syntax: list-style-type: square;

Example:

<!DOCTYPE html> 

<html>

<head>

<title>CSS list-style-type Property</title>

<style>

.geek1 {

list-style-type: square;

}

</style>

</head>

<body>

<h2 style = "text-align: center; color: green">

list-style-type: square;

</h2>

<p>Sorting Algorithms</p>

<ul class="geek1">

<li>Bubble Sort </li>

<li>Merge Sort</li>

<li>Insertion Sort</li>

</ul>

</body>

</html>

Output:

decimal:The marker is a decimal numbers, beginning with 1.
Syntax: list-style-type: decimal;

Example:

<!DOCTYPE html> 

<html>

<head>

<title>CSS list-style-type Property</title>

<style>

.geek1 {

list-style-type: decimal;

}

</style>

</head>

<body>

<h2 style = "text-align: center; color: green">

list-style-type: decimal;

</h2>

<p>Sorting Algorithms</p>

<ul class="geek1">

<li>Bubble Sort </li>

<li>Merge Sort</li>

<li>Insertion Sort</li>

</ul>

</body>

</html>

Output:

lower-roman:The marker is a lowercase roman numerals (i, ii, iii, iv, v, etc.).

Syntax:

list-style-type: lower-roman;

Example:

<!DOCTYPE html> 

<html>

<head>

<title>CSS list-style-type Property</title>

<style>

.geek1 {

list-style-type: lower-roman;

}

</style>

</head>

<body>

<h2 style = "text-align: center; color: green">

list-style-type: lower-roman;

</h2>

<p>Sorting Algorithms</p>

<ul class="geek1">

<li>Bubble Sort </li>

<li>Merge Sort</li>

<li>Insertion Sort</li>

</ul>

</body>

</html>

Output:

upper-roman:The marker is a uppercase roman numerals (I, II, III, IV, V, etc.).

Syntax:

list-style-type: upper-roman;

Example:

<!DOCTYPE html> 

<html>

<head>

<title>CSS list-style-type Property</title>

<style>

.geek1 {

list-style-type: upper-roman;

}

</style>

</head>

<body>

<h2 style = "text-align: center; color: green">

list-style-type: upper-roman;

</h2>

<p>Sorting Algorithms</p>

<ul class="geek1">

<li>Bubble Sort </li>

<li>Merge Sort</li>

<li>Insertion Sort</li>

</ul>

</body>

</html>

Output:

lower-greek:The marker is a lowercase classical Greek alpha, beta, gamma, … (?, ?, ?, …).

Syntax:

list-style-type: lower-greek;

Example:

<!DOCTYPE html> 

<html>

<head>

<title>CSS list-style-type Property</title>

<style>

.geek1 {

list-style-type: lower-greek;

}

</style>

</head>

<body>

<h2 style = "text-align: center; color: green">

list-style-type: lower-greek;

</h2>

<p>Sorting Algorithms</p>

<ul class="geek1">

<li>Bubble Sort </li>

<li>Merge Sort</li>

<li>Insertion Sort</li>

</ul>

</body>

</html>

Output:

lower-latin:The marker is a lowercase ascii letters (a, b, c, … z).

Syntax:

list-style-type: lower-latin;

Example:

<!DOCTYPE html> 

<html>

<head>

<title>CSS list-style-type Property</title>

<style>

.geek1 {

list-style-type: lower-latin;

}

</style>

</head>

<body>

<h2 style = "text-align: center; color: green">

list-style-type: lower-latin;

</h2>

<p>Sorting Algorithms</p>

<ul class="geek1">

<li>Bubble Sort </li>

<li>Merge Sort</li>

<li>Insertion Sort</li>

</ul>

</body>

</html>

Output:

upper-latin:The marker is a uppercase ascii letters (A, B, C, … Z).

Syntax:

list-style-type: upper-latin;

Example:

<!DOCTYPE html> 

<html>

<head>

<title>CSS list-style-type Property</title>

<style>

.geek1 {

list-style-type: upper-latin;

}

</style>

</head>

<body>

<h2 style = "text-align: center; color: green">

list-style-type: upper-latin;

</h2>

<p>Sorting Algorithms</p>

<ul class="geek1">

<li>Bubble Sort </li>

<li>Merge Sort</li>

<li>Insertion Sort</li>

</ul>

</body>

</html>

Output:

none:No marker is shown in this mode.
Syntax: list-style-type: none;

Example:

<!DOCTYPE html> 

<html>

<head>

<title>CSS list-style-type Property</title>

<style>

.geek1 {

list-style-type: none;

}

</style>

</head>

<body>

<h2 style = "text-align: center; color: green">

list-style-type: none;

</h2>

<p>Sorting Algorithms</p>

<ul class="geek1">

<li>Bubble Sort </li>

<li>Merge Sort</li>

<li>Insertion Sort</li>

</ul>

</body>

</html>

Output:

Note: lower-alpha and upper-alpha are same as lower-latin and upper-latin respectively.
Supported Browsers: The browser supported by list-style-type property are listed below: