Overwriting CSS Rules

Guest · 1 Overwriting CSS Rules Mon Dec 13, 2010 4:05 am

Guest

Overwriting CSS Rules
Overwriting CSS Rules in your stylesheet

Hey there

Today we are going to see something that sounds easy,however it can seem quite challenging.

If you’re building a website that has a lot of divs and CSS, then this way of looking at things will be a great solution for you.

Okay,so thats an example of a markup you might have:

Code:: <!DOCTYPE HTML> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Markup</title> </head> <body class="home internal contact"> <div id="main-container"> <div id="content-holder"> <div id="content"> <div class="left-content"> <h1>Title</h1> <p>Your content goes here...</p> <h2>Sub heading</h2> <p class="bold">More content goes here...</p> </div> <div class="right-content"> <h2>Sidebar</h2> <p>Your content goes here...</p> </div> </div> </div> </div> </body> </html>

heres a little bit of the css so that you get the general idea:

Code:: <style type="text/css"> body { font-size: 62.5%; color: #000; } p { font-size: 1.2em; padding: 0 0 10px; } #main-container { width:900px; height:auto; overflow:hidden; margin:0 auto; background:#f6f6f6; } #content-holder { width:860px; height:auto; overflow:hidden; margin:10px; background:#fff; border:1px solid #f7f7f7; } #content { width: 830px; height:auto; overflow:hidden; margin: 10px; padding: 5px; #content p { font-size:1.2em; padding: 0 0 20px; } .left-content { width:500px; height:auto; overflow:hidden; float:left; margin: 0 5px 0 0; } .right-content { width:325px; height:auto; overflow:hidden; float:left; } .bold { font-weight:bold; } </style>

Problem
So we have a problem, what we have set up in our CSS for the main structure of our site, is being overwritten in our content area. They’ll be lots of different scenarios for this problem, this is just a basic example. The more divs and CSS rules you set up, the bigger the problem could become.

Solution

Here’s great little technique, it’s really simple but really effective. Firstly we need to assign 3 main categories for our CSS rule structure. The 3 categories are:

* Nodename’s(this includes elements like p, h1, h2, ul, li etc )
* Classes (self explanatory)
* ID’s (self explanatory)

Next we are going to assign a specific value to each of the categories above. The first category (nodenames) we will assign the value – 2. The second category (classes) we will assign the value of 10. Lastly, the third category (ID’s) we will assign the value of 100.For instance:

Code:: #content p { font-size:1.2em; padding: 0 0 20px; }

We can split this rule into the 3 main categories and give them the values we assigned 30 seconds ago. So #content is an ID which gets the value of 100, p is a nodename so gets the value of 2. This makes a total of 102.
So if for whatever reason we wanted to change the style of the p on an internal page for instance, we would need to make a new CSS rule which overwrites the previous one, but only on internal pages. We could assign the body tag a class only on internal pages called ‘.internal’. So to overwrite our CSS rule, all we need to do is make a new CSS rule that adds up to more than the value of our previous one (102). If we were to add a class on the front like so:

Code:: .internal #content p { font-size:1.2em; padding: 0 0 20px; }

We have added an extra value which is a class worth 10 making this rule add up to 112. This means that our new rule will overwrite our previous rule.

This does look long winded I know, but it really is a quick and easy way to remember once you get your head around it. You would use it in much more complicated situations than the one I’ve used above, but if you remember this technique then you’ll be alright! Very Happy

Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.

Guest · 2 Re: Overwriting CSS Rules Mon Dec 13, 2010 8:48 am

Guest

This is an interesting way of looking at CSS, but unfortunately it has a few problems. For example, using your method...

html #content p adds up to 104

.internal #content p adds up to 112

The first rule will ALWAYS take precedence over the second, because HTML is higher up the DOM hierarchy than the .internal class. You somehow need to incorporate a priority based on where the element is in the DOM hierarchy.

To confound matters, had I left off the #content selector, the second rule would take precedence even though HTML is higher up the DOM hierarchy...IDs take precedence over hierarchy.

You also have the issue of Internet Explorer, which marches to the beat of a different drummer when it comes to DOM hierarchy. And inline styles can take precedence over all CSS rules, no matter how high you make that number...as long as no rule pulls out the !important trump card. Very Happy

If it all sounds confusing, well, it is. Wink