CSS Best Practice - Multiple td's with only 1 difference

Hello everyone!

I was wondering if there was a way to clean up my code.

Right now I have multiple separate td classes, here is a snippet:

td.POApproveViewButtonHeader {
	width:			100px;
	background-color:	#CE1F3A;
	color:				#FFFFFF;
}

td.POApprovePONumberHeader {
	width:			150px;
	background-color:	#CE1F3A;
	color:				#FFFFFF;
}

td.POApproveViewButtonContent {
	width:			100px;
	background-color:	#EEEEEE;
	color:				#000000;
}

td.POApprovePONumberContent {
	width:			150px;
	background-color:	#EEEEEE;
	color:				#000000;
}

td.POApproveViewButtonContentNotify {
	width:			100px;
	background-color:	#FFFF00;
	color:				#000000;
}

td.POApprovePONumberContentNotify {
	width:			150px;
	background-color:	#FFFF00;
	color:				#000000;
}

Code (markup):

And there is much more than that. Basically, I have three "sets" of TD tags, a header set, a content set, and then a "notify" set which is basically the same as the content set except with a bright yellow background color. The only differences between all of them are the background-color, the font color, and the width. However, what I've actually done is created 20 or 30 separate TD classes which I'm guessing is grossly inefficient. I'm not well-versed enough with CSS to understand how to use it gracefully to solve this problem.

Can anyone help?

Thanks in advance!
- Vince

 

Well you can combine the classes for things which they are the same as (also the latter while override). Plus I would say shorten the class names. For example:

td.first, td.second{
width: 100px;
background-color: #FFFF00;
color: #000000;
}

td.second{
width:150px
}

 

Those are good suggestions. Could you explain the bit about the "override", though? How does CSS interpret your code above? When it comes across a "td.second," how does it know whether to use the first instance or the second? This is where my knowledge of CSS is incomplete.

 

As far as I remember it the later instance overrides. Also a neat trick I often use it to do the following which makes it override:

.tester{
height:120 !important;
}

The !important makes it prioritized.