All geek questions in one place

How to override external css?

I have an external css file that applies a 35px add-on to my div content. All my html pages load inside this div, but for one of them I want to use 0 padding-right.

I tried the built-in css, applying it directly on the body of this page, and also using! important, but nothing worked.

What 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;">
+4
source share
4 answers

Fluidbyte was right, I was stupid, trying to apply 0 additions to the wrong element. Adding

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

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

+1
source

To override the css parameter, you must use the important keyword.

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

CSS is read from top to bottom, so everything below in the code must be rewritten, see http://jsfiddle.net/PFx9h/

If something does not take effect, because there is another code redefining it. Use an element inspector such as Webkit Dev Tools or Firebug to find out which styles apply and how.

EDIT:

Since you posted your code, the body style will not apply to the div.

+5
source

Apply style="padding:0px;" to the contents of the inline div (not recommended) or load your style after loading the external stylesheet. Usage style="padding:0px;" to the body will only affect the body and does not extend to every element within it.

0
source

Source: https://habr.com/ru/post/1439008/

More articles:


All Articles