CSS Lists Styling
CSS Lists Styling with Programming Examples
In this tutorial we will learn how to style the HTML List using the lots of CSS properties. If you don’t learn the HTML List Tutorial
visit and learn the HTML Lists Tutorial, in that we covered all about the HTML List so, visit and learn HTML List Tutorial.
CSS List
In CSS there are a lot of option for styling the List element of HTML, through applying the CSS properties we can change the list’s colors, background, bullets, lists position and we also used the picture in the place of bullets.
If you learn the HTML List than you know how to make list in HTML document. Even if you haven’t read doesn’t matter, let’s have a quick review of HTML List. (Visit and Learn HTML List Full Tutorial)
We give you some basic information about the HTML List.
- <ul>: It is a unordered list, list items are marked with bullets.
- <ol>: It is an ordered list. List items are marked with numbers and letters.
- <li>: It is defining the List Items for both unordered and ordered lists.
Now we learn how to style the HTML List with different-different CSS properties.
And you also see the programming examples and source code.
CSS Lists Bullet Style and Types
We have lots of style to decorate the HTML Bullets, given below all the bullets styles, that we used in programming examples also.
For using bullets styles, we need to used list-style-type CSS property.
Valid value to style CSS List.
- circle: It make a hollow circle bullets style.
- square: It make a filled square bullets style.
- decimal: Decimal numbers of bullets e.g., 1,2,3.
- none: No bullets type.
- disc: A bullet like filled circle, it is default value of bullets.
- decimal-leading-zero: In this value decimal number with the leading zero, e.g., 01.02.03.
- upper-roman: Bullets is uppercase roman number, e.g., I, II, III.
- lower-roman: Bullets is lowercase roman number, e.g., i, ii, iii.
- upper-alpha: Bullets is uppercase letter e.g., A, B, C.
- lower-alpha: Bullets is lowercase letter e.g., a, b, c.
- armenian: Traditional Armenian number.
- arabic-indic: Traditional Arabic Indic number. Etc.
Ordered List
Programming Examples of Ordered List.
<!DOCTYPE html> <html lang="en"> <head> Â <title>Unordered list</title> Â <style type="text/css"> Â Â Â p{color: brown;} Â Â #decimal{list-style-type: decimal; color: blue;} Â Â #upper-alpha{list-style-type: upper-alpha;color: chocolate;} Â Â #lower-roman{list-style-type: lower-roman; color: crimson;} Â Â #lower-greek{list-style-type: lower-greek; color: darkgreen;} Â Â #decimal-0{list-style-type: decimal-leading-zero;} Â </style> <body> Â <p>Ordered List disc</p> Â <ol id="decimal"> Â Â Â <li>HTML</li> Â Â Â <li>CSS</li> Â Â Â <li>Javascript</li> Â </ol> Â <p>Ordered List circle</p> Â <ol id="upper-alpha"> Â Â Â <li>HTML</li> Â Â Â <li>CSS</li> Â Â Â <li>Javascript</li> Â </ol> Â <p>Ordered List square</p> Â <ol id="lower-roman"> Â Â Â <li>HTML</li> Â Â Â <li>CSS</li> Â Â Â <li>Javascript</li> Â </ol> Â <p>Ordered List square</p> Â <ol id="lower-greek"> Â Â Â <li>HTML</li> Â Â Â <li>CSS</li> Â Â Â <li>Javascript</li> Â </ol> Â <p>Ordered List square</p> Â <ol id="decimal-0"> Â Â Â <li>HTML</li> Â Â Â <li>CSS</li> Â Â Â <li>Javascript</li> Â </ol> </body> </html> |
Output of programming example.
Unordered List
Programming Example of Unordered List.
<!DOCTYPE html> <html lang="en"> <head> Â <title>Unordered list</title> Â <style type="text/css"> Â Â Â #disc{list-style-type: disc; color:blue} Â Â Â #circle{list-style-type: circle;color: red;} Â Â Â #square{list-style-type: square;color: green;} Â </style> <body> Â <p>Unordered List disc</p> Â <ul id="disc"> Â Â Â <li>HTML</li> Â Â Â <li>CSS</li> Â Â Â <li>Javascript</li> Â </ul> Â <p>Unordered List circle</p> Â <ul id="circle"> Â Â Â <li>HTML</li> Â Â Â <li>CSS</li> Â Â Â <li>Javascript</li> Â </ul> Â <p>Unordered List square</p> Â <ul id="square"> Â Â Â <li>HTML</li> Â Â Â <li>CSS</li> Â Â Â <li>Javascript</li> Â </ul> </body> </html> |
Output of programming example.
CSS List Bullet Position
We also changed the position of list bullets, it has also some valid value to change the position. The list-style-position CSS property sets the position of bullets.
Valid value are given;
- inside: It sets the bullets to sit inside the list items.
- outside: It sets the bullets to sit outside the list items.
Programming Example of Bullets Position.
<!DOCTYPE html> <html lang="en"> <head> Â <title>list Bullets Position</title> Â <style type="text/css"> Â #in{list-style-position: inside; color: blue;} Â #out{list-style-position: outside; color: blue;} Â </style> <body> Â <ul id="out"> Â <li>HTML & CSS is the best of web development.</li> Â <li>HTML & CSS is the best of web development.</li> Â <li>HTML & CSS is the best of web development.</li> Â <li>HTML & CSS is the best of web development.</li> Â </ul> Â <ul id="in"> Â Â Â <li>HTML & CSS is the best of web development.</li> Â Â Â <li>HTML & CSS is the best of web development.</li> Â Â Â <li>HTML & CSS is the best of web development.</li> Â Â Â <li>HTML & CSS is the best of web development.</li> Â Â </ul> Â Â </body> </html> |
Output of programming example.
Above you can see the output of programming one list bullets position is inside and one list bullets position is outside.
CSS List Bullet Image
In CSS we also insert image as a bullet, in the place of bullet we used the image. To use this, we need to use the list-style-image CSS property.
Example of Bullets Image.
<!DOCTYPE html> <html lang="en"> <head> Â <title>Unordered list</title> Â <style type="text/css"> Â Â Â ul,ol{list-style-type: none; Â Â Â padding-left: 20px;} Â ul li{padding-left: 20px ; Â background-image:url("star.png"); Â background-size: 20px 20px; Â background-position: top left; Â background-repeat: no-repeat;} Â ol li{padding-left: 30px ; Â background-image:url("whatsapp.png"); Â background-size: 20px 20px; Â background-position: top left; Â background-repeat: no-repeat;} Â </style> <body> Â <ul> Â <li>HTML</li> Â Â <li>CSS</li> Â <li>Java</li> Â <li>Python</li> Â </ul> Â <ol> Â Â Â <li>HTML & CSS is the best of web development.</li> Â Â Â <li>HTML & CSS is the best of web development.</li> Â Â Â <li>HTML & CSS is the best of web development.</li> Â Â Â <li>HTML & CSS is the best of web development.</li> Â </ol> Â </body> </html> |
Output of programming example.
Above you can see output, we used the image in the place of bullets, through using the background image property.
CSS List with Padding Margin and Color.
To make the list attractive and beautiful we can add padding, margin, and color in the list.
Programming Example.
<!DOCTYPE html> <html lang="en"> <head> Â <title>Unordered list</title> Â <style type="text/css"> Â Â Â ul li{background:lightseagreen; Â Â Â padding: 5px; Â Â Â margin-left: 30px;} Â Â Â ol li{ Â Â Â Â Â background:lightgreen ; Â Â Â Â Â padding: 5px; Â Â Â Â Â margin-left: 30px;} Â Â Â ol{ Â Â Â Â Â list-style-type: upper-alpha; Â Â Â Â Â color:blue; Â Â Â Â Â background: burlywood; Â Â Â Â Â padding: 15px;} Â Â Â ul{list-style-type:disc; Â Â Â Â Â color:darkred; Â Â Â Â Â background:dodgerblue; Â Â Â Â Â padding: 15px;} Â </style> <body> Â <ul> Â <li>HTML</li> Â <li>CSS</li> Â <li>Java</li> Â <li>Python</li> Â </ul> Â <ol> Â Â Â <li>HTML & CSS is the best of web development.</li> Â Â Â <li>HTML & CSS is the best of web development.</li> Â Â Â <li>HTML & CSS is the best of web development.</li> Â Â Â <li>HTML & CSS is the best of web development.</li> Â </ol> Â </body> </html> |
Output of programming example.
Above output of programming example, you can see the colorful list with padding and margin.
Changing and Coloring Bullets
We can personally style the bullets of our HTML list, you change the bullets icon of your own choice such any character, symbol etc. Just see the example below.
Programming Example.
<!DOCTYPE html> <html lang="en"> <head> Â <title>Unordered list</title> Â <style type="text/css"> Â Â Â li{ Â Â Â Â Â list-style-type: none;} Â Â Â ul li::before{content: "&"; Â Â Â color: green;} Â Â Â ol li::before{content: "@"; Â Â Â color: blue;} Â </style> <body> Â <ul> Â <li>HTML</li> Â <li>CSS</li> Â <li>Java</li> Â <li>Python</li> Â </ul> Â <ol> Â Â Â <li>HTML & CSS is the best of web development.</li> Â Â Â <li>HTML & CSS is the best of web development.</li> Â Â Â <li>HTML & CSS is the best of web development.</li> Â </ol> Â Â </body> </html> |
Output of programming example.
Above output of programming example, you can see some symbol in the place of bullets, that we used in the programming.
In this tutorial we learned how to style the bullets CSS of HTML List with different properties of CSS, here we used all the CSS properties to style the bullets with programming example. I hope you read this tutorial well and learn new something, if you have any doubt, you can ask in the comment section.
Read Also-
3 Comments
zoritoler imol · June 30, 2022 at 3:55 am
My brother recommended I might like this web site. He was entirely right. This post truly made my day. You can not imagine just how much time I had spent for this info! Thanks!
Jacquiline Magro · September 23, 2022 at 7:37 am
Thanks for this post, I am a big big fan of this site would like to go along updated.
gateio · May 26, 2023 at 12:12 am
I may need your help. I’ve been doing research on gate io recently, and I’ve tried a lot of different things. Later, I read your article, and I think your way of writing has given me some innovative ideas, thank you very much.