Unable to remove CSS bullets from list

Question

I'm fighting with CSS and can't figure out how to remove bullets. Yeah, I know this sounds easy, but hear me out. I have another external CSS file from our corporate office that has styles that are getting in the way and I can't for the life of me figure out how to override them. I've tried the !important token and it doesn't work either. I'm using chrome and the inspector hasn't yet helped me figure out what's causing it. Anyway, here's my code which works great stand-alone, but once I put the corporate CSS file in there, the stupid bullets come back. Ugh!

    <ul style="list-style-type:none;">
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
    </ul>

Answer 1

This sounds like more of an issue with CSS specificity. You can't "override" the other styles, per se, you can merely create additional styles which are more specific. Without knowing what the other CSS looks like, there are generally three ways to do this:

Inline styles

Exactly like you have in your example. These are most specific, so they're guaranteed to work, but they're also guaranteed to be a pain in the neck to work with. Generally, if you're using these, something needs to be fixed.

Add an id attribute to the unordered list,

Then use the id as a selector in your CSS. Using an id as a selector is more specific than using a class or an element type. It's a useful tool for cutting through a bunch of styling that you might be inheriting from somewhere else.

<ul id="the-one">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ul>

ul#the-one {
  list-style-type: none;
}

Wrap all of your HTML in a div with the id attribute set.

This is what I usually do. It allows me to use that div with it's id in my CSS styles to make sure my styles always take precedence. Plus, it means I only have to choose one meaningful id name, then I can just style the rest of my HTML as I normally would. Here's an example:

<div id="wrapper">
  <ul>
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
  </ul>
  <p>Some text goes here</p>
</div>

div#wrapper ul {
  list-style-type: none;
}

div#wrapper p {
  text-align: center;
}

Using that technique is a pretty good way to make sure that you spend most of your time working on your own styles and not trying to debug somebody else's. Of course, you have to put div#wrapper at the beginning of each of your styles, but that's what SASS is for.