Adding CSS to HTML Lists

CSS properties can control the appearance of HTML elements. Such properties can add backgrounds to parts or to all of your webpage. The CSS properties can put borders around some of your content, or change the style of bullet points.

If you have a HTML list you want to style with CSS, you can do something like the following:

(HTML code)
<h1>Favorite Music Groups</h1>
<ol>
<li>Rascal Flatts</li>
<li>Little Big Town</li>
li>Restless Heart</li>
<li>Little Feat</li>
<li>The Beatles</li>
<li>Lady A</li>
</ol>

It would look like this:

Favorite Music Groups

1. Rascal Flatts
2. Little Big Town
3. Restless Heart
4. Little Feat
5. The Beatles
6. Lady A

Now add CSS.

ol {
list-style-type: lower-roman;}

It would look like this:

Favorite Music Groups

i. Rascal Flatts
ii. Little Big Town
iii. Restless Heart
iv. Little Feat
v. The Beatles
vi. Lady A

There are a lot of CSS properties to choose from to change the style of your HTML elements!

Happy Coding!