From what you've put in your post, it sounds like the original css is a rather poorly laid out.
Referencing a class that is also part of another class is highly inefficient.
If it's a one off item in your page, you're far better off, and getting cleaner code if you combine an "id" and a "class" together, rather than redefine all the css that applies to it.
Rewriting code would make no sense if it already has css applied from elsewhere, you're doing the same work twice.
It's irritating that W3Schools haven't really touched on the usage of id's other than in the syntax as I am a big fan of their site.
( good example here:
http://creativebits.org/webdev/div_id_vs_div_class )
Using this site above as an example.. I've rewritten the code to show you what I mean:
Code:
<html>
<!--CSS part:-->
<style type="text/css">
#myspecialtitle {color:green; text-decoration:underline}
.title {color:red; font: italic small-caps 900 1em arial}
.mylessefficienttitle {color:blue; font: italic small-caps 900 1em arial; text-decoration:underline}
</style>
<!--HTML part:-->
<body>
<p class="title">my normal title</p>
<p class="mylessefficienttitle">my special title with everything duplicated</p>
<p id="myspecialtitle" class="title">my ID values override any conflicting inherited values</p>
</body>
</html>
Copy and paste this code over everything existing here:
http://www.w3schools.com/css/tryit.a...me=trycss_font if you want to try it out.
Join CF
You are here: 
