How do I use the inline css over the css from a wrapping class or use another class entirely?

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!

Have you tried using !important on certain elements to avoid the styles being overridden further down the sheet (or in the style you have no control over)? — Alan Shortis
– Alan Shortis, Commented Sep 21, 2012 at 14:34

prototype · Accepted Answer · 2012-09-21 14:33:23Z

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/

answered Sep 21, 2012 at 14:33

prototype

3,3232 gold badges31 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Steven Combs Over a year ago

Ok ok ok awesome! This fixes my problem. My other problem now lies in the fact that I would like the entire table to behave as if there was no margin property specified altogether. My reasoning behind this is that when I uncheck the css rule for margin:0; my entire table looks as it should.

prototype Over a year ago

Well you can set the default value of everything in the table to 0 - Try this: .tableclass { margin:0 !important; padding:0 !important; } and .tableclass tr { margin:0 !important; padding:0 !important; } and .tableclass tr td { margin:0 !important; padding:0 !important; }. Now everything in the table should be without margin or padding. (tableclass is the class of the table you want to style)

Steven Combs Over a year ago

Well I did make an attempt to do this however that didn't fix it. What I found was that the original layout has p tags with a margin-bottom:14px and margin-top:14px or rather appears in that fashion. Basically when I removed the margin:0; from #jobcopy it spaced everything proper. The only way for me to achieve that same appearance was to add the margin-top and margin-bottom, and after trial and error I found that it was 14px. On our websites the document looks correct and doesn't need to be modified at all. So my guess is there is some other business going on with this other company.

Steven Combs Over a year ago

!important was the key piece though that I was missing.

Collectives™ on Stack Overflow

How do I use the inline css over the css from a wrapping class or use another class entirely?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related