Question

Ok so in my Chrome developer tools I am checking out some css rules that are overriding my p tags styles.

The css rules below is what is overriding my inner content rules.

media="screen"
#jobcopy p {
    color: black;
    margin: 0;
    min-height: 13px;
    _height: 13px;
}

So the html would look like this.

<div id="jobcopy">
    <table class="myclass">
        <p></p>
    </table>
</div>

My css class:

media="screen"
.myclass p {
    margin:10px;
}

My main problem is that I don’t want #jobcopy p {} to be applied to any p tags in the table. I have tried to specify in my table class a generic margin, like 10px. However, when I look at the code in chrome it shows it being marked out and #jobcopy overrules it.

Is there anyway for me to tell a specific section not to use the css surrounding this content. The other issue is that I have no control over the #jobcopy css. It is being applied by another company.

Thanks!

Answer 1

You can add !important to the CSS rule you don’t want to be overridden. So if you want to override the margin in #jobcopy p you’ll have to do something like this:

.myclass p {
    margin:10px !important;
}

See more: http://css-tricks.com/when-using-important-is-the-right-choice/