How to override external css?

Question

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;">

Question needs more detail and possibly a code reference, this could be one of a million problems — SpYk3HH, Oct 10 '12 at 21:07
You're applying the `padding:0;` attribute to the `body`, not a `div`. Might that be your problem? Or was that just a typo? — jamesplease, Oct 10 '12 at 21:12

score 22 · Answer 1 · answered Oct 10 '12 at 21:19

22

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

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

answered Oct 10 '12 at 21:19

Armando Peña

415
2
6

5

what if the above style has !important? – Raphael Sep 22 '16 at 14:27
There should be no need to add that in a css file. Thus you can use the console to find the css file and then delete that keyword in it. – Nicholas Bourbaki Jan 03 '21 at 18:03

score 8 · Answer 2 · answered Oct 10 '12 at 21:12

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.

score 3 · Accepted Answer · answered Oct 10 '12 at 21:16

3

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.

answered Oct 10 '12 at 21:16

Tasos

1,622
4
28
47

score 0 · Answer 4 · answered Oct 10 '12 at 21:11

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.

How to override external css?

4 Answers4

Linked