How to override the CSS style (list style type) specified in the main CSS file

Question

I am trying to override the CSS option for lists on one of my pages. In my main CSS file, I set the following rule:

ul, li {list-style-type: none; }

I have one page where I want to set the list style. I would also like to increase the distance between these list items on this single page.

The page is as follows:

  <div><h3 style="color:#023467;">Hello</h3>
        <ul style="color:#006699; list-style-type:circle;"> <!-- has no effect -->
            <li>line 1</li>
            <li>line 2</li>
            <li>line 3</li>
            <li>line 4</li>
        </ul>
    </div>

So far I have tried the following:

• Adding Style to a Containing UL Tag
• Adding a BOTH Style to the Containing UL Tag and Each LI Tag

Nothing is working yet. Since I have more than 1 thousand pages that link to the main.css file, I do not want to change it. But how can I override the parameters for specific list items on my page?

main.css, ?

Answer 1

CSS:

ul.circle, ul.circle > li { list-style-type: circle; }

:

<div><h3 style="color:#023467;">Hello</h3>
        <ul class="circle" style="color:#006699;">
            <li>line 1</li>
            <li>line 2</li>
            <li>line 3</li>
            <li>line 4</li>
        </ul>
    </div>

, list-style.