How to override external css?

I have an external css file which applies 35px padding to my content div. All my html pages are loaded inside that div but for one of them I want to use 0 padding-right.

I tried inline css, applying it directly on the body of that page and also using !important but nothing worked.

What I am I doing wrong?

index.html:

<div id="content"><?php include "page.html"?></div>

main.css:

#content{
    margin-top: 303px;
    padding: 35px;
    z-index:1;
}

page.html:

<body style="padding:0px;">

To override a css setting you must use the keyword important.

<body style="padding:0px ! important;">

CSS reads top-down, therefore anything lower in the code should be overwritten, see: http://jsfiddle.net/PFx9h/

If something isn't taking effect it's because there's some other code overriding it. Use an element inspector such as Webkit Dev Tools or Firebug to see what styles are being applied and how.

EDIT:

Since you posted your code, body styling won't apply to a div.

Fluidbyte was right, I was being stupid trying to apply 0 padding on the wrong element. Adding

<style>
#content{
    padding-right:0px;  
}
</style>

on page.html worked fine, overrides the external css.

Either apply the style="padding:0px;" on the content div inline (not recommended), or load your style after you load your external style sheet. Applying style="padding:0px;" to the body will only affect the body, and not apply to every element within it.

来源：https://stackoverflow.com/questions/12828327/how-to-override-external-css

标签

css

html

overriding

padding