Scribd
Upload
7 views

Unit-3 Topic CSS Lists

Uploaded by

20131A5327 KONDETI SHIVA NARASIMHA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

Unit-3 Topic CSS Lists

Uploaded by

20131A5327 KONDETI SHIVA NARASIMHA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

Unit-3 Topic CSS Lists

CSS Lists

The List in CSS specifies the listing of the contents or items in a particular manner i.e., it
can either be organized orderly or unorder way, which helps to make a clean webpage. It
can be used to arrange the huge with a variety of content as they are flexible and easy to
manage. The default style for the list is borderless. The list can be categorized into 2 types:
● Unordered List: In unordered lists, the list items are marked with bullets i.e
small black circles by default.
● Ordered List: In ordered lists, the list items are marked with numbers and an
alphabet.

List Item Marker: This property specifies the type of item marker i.e. unordered list or
ordered. The list-style-type property specifies the appearance of the list item marker (such
as a disc, character, or custom counter style) of a list item element. Its default value is a
disc.
Syntax:
list-style-type:value;
The following value can be used:
● circle
● decimal , eg :1,2,3,etc
● decimal-leading-zeroes , eg :01,02,03,04,etc
● lower-roman
● upper-roman
● lower-alpha, eg : a,b,c,etc
● upper-alpha, eg : A,B,C,etc
● square

Example: This example describes the CSS List with the various list-style-type where the
values are set to square & lower-alpha.
<!DOCTYPE html>
<html>

<head>
<style>
ul.a {
list-style-type: decimal;
list-style-position: inside
}

ul.b{
list-style-type:circle;
}

ol.c {
list-style-type: upper-alpha;
}
</style>
</head>

<body>
<h2>
GeeksforGeeks
</h2>

<p> Unordered lists </p>

<ul class="a">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<ul class="b">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>

<p> Ordered Lists </p>


<ol class="c">
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
<ol class="d">
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
</body>

</html>

Output:
Image as List Marker: This property specifies the image as a list item marker. The
list-style-image property is used to sets an image to be used as the list item marker. Its
default value is “none”.
Syntax:
list-style-image: url;
Example: This example describes the CSS List with the various list-style-image where the
values are set to url of the image.

Example to put images as bullets in lists

<!DOCTYPE html>
<html>

<head>
<title> CSS list-style-image Property </title>
<style>
ul {
list-style-image: url("jj.png");
}
</style>
</head>

<body>
<h1>
GeeksforGeeks
</h1>

<p> Unordered lists </p>

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>

</html>

Output:
List Marker Position: This property specifies the position of the list item marker. The
list-style-position property is used to sets the position of the marker relative to a list item.
Its default value is “outside”.
There are 2 types of position markers:
● list-style-position: outside; In this, the bullet points will be outside the list item.
The start of each line of the list will be aligned vertically.

Syntax:
list-style-position: outside;
Example: This example describes the CSS List with the various list-style-position where the
value is set to outside for some set of items and some .

<!DOCTYPE html>
<html>
<head>
<title> CSS list-style position maker </title>
<style>
ul.k{
list-style-position: outside;
}
ul.m{
list-style-position: inside;
}
</style>
</head>

<body>

<h2>A Nested List</h2>


<p>Lists can be nested (list inside list):</p>

<ul>
<li>Coffee</li>
<li>Tea
<ul class="k">
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
<p>Lists with style position inside</p>

<ul>
<li>Coffee</li>
<li>Tea
<ul class="m">
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>

Output

list-style-position: inside; In this, the bullet points will be inside the list. The line along with
the bullet points will be aligned vertically.
Syntax:
list-style-position: inside;
Example: This example describes the CSS List with the various list-style-position where the
value is set to inside.
<!DOCTYPE html>
<html>

<head>
<style>
ul.a {
list-style-position: inside;
}
</style>
</head>

<body>
<h2>
GeeksforGeeks
</h2>

<p> Unordered lists </p>

<ul class="a">
<li>one
<br>
In this the bullet points will be inside the list item.</li>
<li>two
<br>
The line along with the bullet points will be aligned vertically.. </li>
<li>three</li>
</ul>
</body>

</html>

OUTPUT:

Shorthand Property: This property allows us to set all the list properties in one command.
The order of property is a type, position, and image. If any of the properties is missing, the
default value is inserted.
Example: This example describes the CSS List using the shorthand property.
● HTML

<!DOCTYPE html>
<html>

<head>
<style>
ul.a {
list-style: square inside;
}
</style>
</head>

<body>
<h2>
GeeksforGeeks
</h2>

<p> Unordered lists </p>

<ul class="a">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</body>

</html>

OUTPUT

You might also like