Cascade Style Sheet (CSS)

Cascade Style Sheet(CSS)
CSS List-Style Properties

We can design unordered lists and ordered lists using HTML4 tag <ul> and
<ol> respectively.
HTML <ul>tag marked unordered lists with bullet symbol disc or square or
circle .
HTML <ol>tag marked ordered lists with number(1,2,3) or roman(I,II,III) or

alphabet(a,b,c) symbol.
The CSS list properties allow us to:

• Set different list item markers for ordered lists
• Set different list item markers for unordered lists
• Set an image as the list item marker
• Add background colors to lists and list items
The list-style property is a shorthand property. It is used to set all the list
properties in one declaration. This property consist with list-style-type, list-
style-position, list-style-image.
Syntax :
list-style : list-style-type list-style-position list-style-image;
When using the shorthand property, the order of the property values are:
• list-style-type : This property defines labels of unordered or ordered list

item. Values are Disc| square| Circle |Number |Decimal | Decimal leading
zero | Lower Roman | Upper Roman. This property is not required
whether list-style-image is specified.
• list-style-position : This property specifies whether the list-item markers
should appear inside or outside the list. Values are inside | outside.
• list-style-image : This property specifies graphic image as the list item
marker. We can specify url of an image, preferable GIF file.
If one of the property values above are missing, the default value for the
missing property will be inserted. list-style-image property is not required
whether list-style-type is specified.
Example of list-style property in a single statement :
Source Code :
Page 1
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style:decimal inside;
background : yellow;
}
</style>
</head>
<body>
<h1>List Style</h1>
<ul>
<li>List1</li>
<li>List2</li>
<li>List3</li>
</ul>
</body>
</html>
In above example defined in internal style sheet. <ul> tag used as selector of
style rule. list-style property of style rule defines
Output :
Page 2
List-style-type property
List-style-type property can define in style rule different type of list item
markers. Such as circle, square, upper-roman, lower-roman, decimal etc.
Example of list-style-type property –

Source Code :
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {list-style-type: circle;background : cyan;}
ul.b {list-style-type: square;background : pink;}
ol.c {list-style-type: upper-roman;background : #345678;}
ol.d {list-style-type: decimal;background : #87654;}
</style>
</head>
<body>
<h1>The list-style-type Property</h1>
<p>Example of unordered lists:</p>
<p><h2>Long Term Courses</h2></p>
<ul class="a">
<li>B Level</li>
<li>A Level</li>
<li>O Level</li>
</ul>
<p><h2>Short Term Courses</h2></p>
<ul class="b">
<li>Java, Oracle</li>
<li>C,C++</li>
<li>Financial Accounting</li>
</ul>
<p>Example of ordered lists:</p>

<p><h2>Latest IT Courses</h2></p>
<ol class="c">
<li>Blockchain</li>
<li>Big Data</li>
<li>Image Processing</li>
Page 3
</ol>
<ol class="d">
<li>Blockchain</li>
<li>Big Data</li>
</ol>
</body>
</html>
Note :
Above HTML page is example of different CSS list-style-type. Class selector
‘a’, ‘b’ defines style rule of unorder list and ‘c’, ‘d’ defines style rule of order
list using list-style-type property of CSS.
Output:
List-style-position property
Example of list-style-position Property –
Source Code :
<!DOCTYPE html>
<html>
<head>
Page 4
<style>
ul.a {list-style-type: circle;list-style-position:inside;background : cyan;}
ol.b {list-style-type: decimal;list-style-position:outside;background : pink;}

</style>
</head>
<body>
<h1>The list-style-position Property</h1>
<h2>list-style-position : inside </h2>
<ul class="a">
<li>B Level</li>
<li>A Level</li>
<li>O Level</li>
</ul>
<h2>list-style-position : outside </h2>
<ol class="b">
<li>Blockchain</li>
<li>Big Data</li>
</ol>
</body>
</html>
Output :
Page 5
List-style-image property
An Image as The List Item Marker
The list-style-image property specifies a graphical image as the list item marker
makes the page more attractive. list-style-image property specify the url of an
image(gif)file.
Whether the image file is not available in picture folder in that case
download .gif file by Google search engine.
Example of list-style-image property –

Source Code :
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {list-style-image: url(boy.gif);background : cyan;}
ul.b {list-style-image: url(leaf.gif);background : pink;}
ul.c {list-style-image: url(boy.gif);background : #345678;}
</style>
</head>
<body>
<h1>The list-style-image Property</h1>
<p>Example of unordered lists:</p>
<ul class="a">
<li>B Level</li>
<li>A Level</li>
<li>O Level</li>
</ul>
<p><h2>Short Term Courses</h2></p>
<ul class="b">
<li>Java, Oracle</li>
<li>C,C++</li>
<li>Financial Accounting</li>
</ul>
<p>Example of ordered lists:</p>
Page 6
<ul class="c">
<li>Blockchain</li>
<li>Big Data</li>
</ul>
</body></html>
Note : In above example a , b & c class of ul tag define in style rules image as
list marker. Above three classes(a,b,c) are only applicable for <ul> tag. This is
an example of sub selector.
Output :
Page 7

Cascade Style Sheet (CSS)

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Cascade Style Sheet (CSS)

Uploaded by

Copyright:

Available Formats

Cascade Style Sheet(CSS)

CSS List-Style Properties

HTML <ol>tag marked ordered lists with number(1,2,3) or roman(I,II,III) or

The CSS list properties allow us to:

• list-style-type : This property defines labels of unordered or ordered list

Example of list-style property in a single statement :

Example of list-style-type property –

<p>Example of ordered lists:</p>

ol.b {list-style-type: decimal;list-style-position:outside;background : pink;}

An Image as The List Item Marker

Example of list-style-image property –

You might also like