purge previous css

Question

i am styling the tag twice in my css file. i need to use different style but both the styles are actually conflicting.

#cat_header h3 {
        font-family: Arial, Helvetica, calibri;
        font-size: 90px;
        text-decoration: none;
        font-weight: 100;
        letter-spacing: -2px;
        text-align: left;
        margin-left: 20px;
        margin-top: 10px;
        margin-bottom: 10px;    
}

.lightbox .head h3{
    font-family: Calibri, Helvetica, Arial;
    font-size: 28px;
    letter-spacing: -1px; word-spacing: -1px;
    font-weight: bold;
    color: #fff;
    margin: 5px 0 0 8px;

}

Answer 1

You can't "purge" you can override by making the rule more specific

#content .lightbox .head h3 { }

Or use !important

.lightbox .head h3 { font-family:Calibri !important; }

Answer 2

When you specify styles by ID (with a #) as opposed to by class (with a .), the style rules from the ID override those from the class. You can see the whole precedence rules here: http://www.w3.org/TR/CSS2/cascade.html

Answer 3

Basically, you could just a third rule which is more specific than either of the two rules you have now.

I don't know what your document structure is, but here's an example bit of CSS which would be even more specific. I'm totally guessing as to what your document struture is, so your actual code will vary.

#cat_header.head h3{
    color:red;
}