title: How to override CSS style (list-style-type) set in main CSS file
body: <p>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:</p>
  
  <p>ul, li { list-style-type: none; }</p>
  
  <p>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.</p>
  
  <p>The page looks like this:</p>
  
  <pre><code>  &lt;div&gt;&lt;h3 style="color:#023467;"&gt;Hello&lt;/h3&gt;
          &lt;ul style="color:#006699; list-style-type:circle;"&gt; &lt;!-- has no effect --&gt;
              &lt;li&gt;line 1&lt;/li&gt;
              &lt;li&gt;line 2&lt;/li&gt;
              &lt;li&gt;line 3&lt;/li&gt;
              &lt;li&gt;line 4&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>So far I have tried the following:</p>
  
  <ul>
  <li>Adding the style to the containing UL tag</li>
  <li>Adding the style BOTH to the containing UL tag and each LI tag</li>
  </ul>
  
  <p>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?</p>
  
  <p>Why am I not able to override the settings in my main.css if even I apply the style at the element itself?</p>