Formatting elements without formatting similar elements throughout entire site

Question

So I've been fiddling around with elements, or blocks around my site.

I find the element or item I want to change my right clicking it in my browser and clicking "Inspect Element". Then, I find where the CSS file is and head to that directory in my FTP client. When I find the class or styling section, I copy that to my theme's global.css file.

However, when I edit some class/header/basically anything, any other object in my site that uses the same titled class is affected.

If my descriptions aren't very clear, here's my attempt at clarification. So let's say www.example.org/home has a H1 class that I'd like to center to the left. But there's an element over at www.example.org/aboutus that also uses the H1 class style. If I copy and edit the H1 class into my global.css file, both of those elements are affected, when I only want the one at www.example.org/home to be changed.

Is there a way to go around this? Should I try renaming the class that the element in www.exmaple.org/home so that it doesn't end up using the same class as everything else?

Answer 1

while writing your css for any html element you need to be more specific. Suppose you are writing a css for an h1 tag which you want to get applied on that tag only , then be more specific by giving the h1 tag an id or class so that this css do not apply on other tags .More over you can alos filter your result as shown... eg you have a h1 tag in your header region eg.

<header>
<div id="first">
<h1> Hello There i am in header tag region 1</h1>
</div>
<div id="second">
<h1> Hello There i am in header tag region 2 </h1>
</div>
</header>    
<h1> How are you I am not in header tag</h1>
CSS 
h1 {                            for last h1
color :red;
}
header #first h1 {
color:green;
}
header #second h1 {
color:blue;
}

.. output

Hello There i am in header tag region 1 and i will be green

Hello There i am in header tag region 2 and i will be green

How are you , i will be red

................ now if you write your css in this way.. h1 { color : #262626 ; } then it will get applied to all the h1 tags...so you just need to be more specific you can also filter the tags by using pseudo classes... you can learn about the css specificity on these links...

http://www.youtube.com/watch?v=0ZOV-KTTI1E

http://www.youtube.com/results?search_query=css+specificity&oq=css+spe&gs_l=youtube.1.2.0l4.1505.7011.0.9461.7.7.0.0.0.0.247.1042.1j4j2.7.0...0.0...1ac.1._LOJTw6jxBA