How to override external css?

css html overriding padding

64,403

Solution 1

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.

Solution 2

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

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

Solution 3

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.

64,403

Author by

Tasos

Updated on October 11, 2020

Comments

Tasos over 3 years
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;">
```
- SpYk3HH over 11 years
  
  Question needs more detail and possibly a code reference, this could be one of a million problems
- Dom over 11 years
  
  Can you provide code? Better yet, jsfiddle example?
- jamesplease over 11 years
  
  You're applying the padding:0; attribute to the body, not a div. Might that be your problem? Or was that just a typo?
Raphael almost 8 years

what if the above style has !important?
Nicholas Bourbaki over 3 years

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.