How to override CSS style (list-style-type) set in main CSS file

Question

I am trying to override a CSS setting for lists in one of my pages. In my master CSS file, I have set the following rule:

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

I have one page, where I DO want to set the style of the list - I would also like to increase the spacing between those list items on that single page.

The page looks like this:

  <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 the style to the containing UL tag
• Adding the style BOTH to the containing UL tag and each LI tag

None has worked so far. Since I have over 1K pages referencing the main.css file, I do not want to change it. But how can I override the settings for the specific list items in my page?

Why am I not able to override the settings in my main.css if even I apply the style at the element itself?

Answer 1

Add this to your CSS file:

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

Use this markup:

<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>

Make sure that no other rules set ul list-style-type.