Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>What you are describing with your CSS is inheritance, and essentially it will 'stack' your css definitions, so as you made the example of body { color: blue } , body { font-weight: bold; } you will end up with both values for body via inheritance (not overriding!)</p> <p>To counter the inheritance, you would need to zero out, or elminate the primary css sheets defnition.</p> <p>so if you had the example:</p> <pre><code>body { padding: 5px; color: red } </code></pre> <p>and you wanted to have a 3px margin with font color blue in your 2ndary sheet you would do the following to counter the inheritance</p> <pre><code>body {padding: 0px; margin: 3px; color: blue } </code></pre> <p>That way you would zero out the padding (to 0, if you so wished, effectively canceling it out). Color would be overwritten, and margin would be the new value added.</p> <p>I would suggest (if you already don't) to use Firefox with firebug enabled (dual screens help here greatly, but not needed). Firebug will show you which lines are canceled out due to inheritance and in essence are overwritten.</p> <p>You could also utilize your own classes, and double (or more) up on the class definition like so:</p> <pre><code>.red { color: red; } .center { text-align: center; } .w500px { width: 500px; } &lt;div class="red center w500px"&gt;This text is red and centered&lt;/div&gt; </code></pre> <p>This way you just combine the values into one. Might give you another idea on how to go about something differently.</p> <p>Hope that helps.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload