How to Override Certain CSS

Hey All - I have a site that's working fine, but am introducing a new section with a separate CSS file. The original CSS file is also being referenced and this section is blowing up the new stuff I'm working on:


* {
font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Verdana,Arial,sans-serif;
font-size: 11px;
}


I can't remove it from the original and I need to override it at the same time. I've tried simply adding inline CSS to tweak the above attributes, but that hasn't been working.

Is there a good way to do this?

Thanks in advance.

Hello kraftomatic,
Putting a font and font-size on everything by using the * doesn't seem like a good idea at all, but if you're stuck with it you just need to be more specific. Specificity (http://www.htmldog.com/guides/cssadvanced/specificity/) can be a little difficult to figure out sometimes but it's the answer to your question.
Some will suggest the !important property but I don't like using it.

See this article (http://james.padolsey.com/usability/dont-use-important/) on the subject.

any reference should be more specific than that one - try specifying the tag name or a class or id and it will override that generic one.

You can use the same rule (i. e. * {…}) to override that one, as long as it comes after the original one.