LIST STYLES
LIST STYLES
upper-roman
none
disc
circle
square
01 02 03
A B C
a b c
i. ii.
I II III
1 2 3
lower-alpha
decimal-leading-zero
decimal
lower-roman
upper-alpha
U
N
O
R
D
E
R
E
D
O
R
D
E
R
E
D
ol {list-style-type: lower-roman;}
LIST-STYLE-TYPE
none, disc (•), circle (°), square, decimal (1), decimal-leading-
zero (01), lower alpha (a), upper-alpha (A), lower-latin (a), upper-
latin (A), lower-roman (iv), upper-roman (IV), lower-greek (ß)
ul { list-style-image: url("star.png");}li {margin: 10px 0px 0px 0px;}
LIST-STYLE-IMAGE
Images for bullets
ul {width: 250px;}
li {margin: 10px;}
ul.illuminations {list-style-position: outside;}
ul.season {list-style-position: inside;}
LIST-STYLE-POSITION
Positioning the marker
inside, outside
ul {width: 250px;}
li {margin: 10px;}
ul.illuminations {list-style-position: outside;
}
ul.season {list-style-position: inside;}
LIST-STYLE-POSITION
Positioning the marker
ul {width: 250px;}
li {margin: 10px;}
ul.illuminations {list-style-position: outside;}
ul.season {list-style-position: inside;
}
LIST-STYLE-POSITION
Positioning the marker
ul {list-style: inside circle;
width: 300px;}
li {margin: 10px 0px 0px 0px;}
LIST-STYLE SHORTHAND
position, type, image
ul {list-style:
inside
circle;
width: 300px;}
li {margin: 10px 0px 0px 0px;}
LIST-STYLE SHORTHAND
list-style-position
ul {list-style: inside
circle;
width: 300px;}
li {margin: 10px 0px 0px 0px;}
LIST-STYLE SHORTHAND
list-style-type
Fade in: selected possible values
In this detailed guide, we delve into different list styles in CSS, covering unordered and ordered lists with various styles like decimal, disc, circle, square, and more. Explore the nuances of list style image, position, shorthand properties, and learn how to implement them effectively in your web projects.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
LIST STYLES UNORDERED ORDERED decimal 1 2 3 none decimal-leading-zero 01 02 03 disc lower-alpha a b c circle upper-alpha A B C square lower-roman i. ii. upper-roman I II III
LIST-STYLE-TYPE none, disc ( ), circle ( ), square, decimal (1), decimal-leading-zero (01), lower alpha (a), upper-alpha (A), lower-latin (a), upper-latin (A), lower-roman (iv), upper-roman (IV), lower-greek ( ) CSS ol { list-style-type: lower-roman;}
LIST-STYLE-IMAGE Images for bullets CSS ul { list-style-image: url("star.png");} li { margin: 10px 0px 0px 0px;}
LIST-STYLE-POSITION Positioning the marker inside, outside CSS ul { width: 250px;} li { margin: 10px;} ul.illuminations { list-style-position: outside;} ul.season { list-style-position: inside;}
LIST-STYLE-POSITION Positioning the marker CSS ul { width: 250px;} li { margin: 10px;} ul.illuminations { list-style-position: outside;} ul.season { list-style-position: inside;}
LIST-STYLE-POSITION Positioning the marker CSS ul { width: 250px;} li { margin: 10px;} ul.illuminations { list-style-position: outside;} ul.season { list-style-position: inside;}
LIST-STYLE SHORTHAND position, type, image CSS ul { list-style: inside circle; width: 300px;} li { margin: 10px 0px 0px 0px;}
LIST-STYLE SHORTHAND list-style-position CSS ul { list-style: inside circle; width: 300px;} li { margin: 10px 0px 0px 0px;}
LIST-STYLE SHORTHAND list-style-type CSS ul { list-style: inside circle; width: 300px;} li { margin: 10px 0px 0px 0px;}
