Bold rounded and colored listed items using html and css

In HTML, we have two types of lists (unordered lists and ordered lists). The unordered list items are denoted with bullets and use the ul tag. The ordered list items are denoted with numbers or letters. It uses the ol tag. 

We can also style lists with colors to make them look more interesting. We can declare margin as 1rem 0.25rem, line-height would be 40px, padding-left would be 3rem, display: inline-block, width: 40px, height: 40px, background: #6FB45D, and font-size: 24px.  

The CSS list properties allow you to  

• Set different items for ordered lists 
• Set different items for unordered lists 
• We can also set an image as the item marker in the list 
• Add background colors to list items 

Adding style to the ol tag reflects the entire list, while properties added to the li tag will work for the individual list items. The li tag is used to set each item present in the list. The counter-increment is a CSS property used to increase or decrease the value of a CSS counter by a given value. 

• ul tag- an unordered list 
• ol tag- an ordered list 
• li tag- a list item 
• dl tag- a description list 
• dt tag- a term in a description list 
• dd tag- the term in a description list 

Here is an example of how to do Bold, rounded, and colored listed items using HTML and CSS: 

Preview of the output that you will get on running this code from your IDE.

Code

Instructions

Follow the steps carefully to get the output easily.

1. Download and Install VS Code on your Desktop.
2. Open the VS Code and install Live Server from Extensions.
3. Open the new file and save it as filename.html.
4. Copy the code using the "Copy" button above, and paste it into your HTML file ( Paste CSS code within the style tag ).
5. Click the Go live button in the bottom right corner to get the output.

I hope you found this useful. I have added version information in the following sections.

I found this code snippet by searching for ' Bold rounded and colored listed items using html and css ' in kandi. You can try any such use case!

Environment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

1. The solution is created in VS Code 1.73.1 version.
2. Live Server v5.7.9

Using this solution, we are able to do Bold rounded, and colored listed items using html and css with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to do Bold rounded, and colored listed items using html and css.

Support

1. For any support on kandi solution kits, please use the chat
2. For further learning resources, visit the Open Weaver Community learning page