Tidy up CSS on four page website

I have a very simple four page site that shares one CSS file. I want to reduce the repetition in the CSS and the number of classes in the HTML by separating the common and different elements of the site. The project is described below. I will only respond to Freelancers who indicate they have read the documentation below in the proposal section. The job is very small and requires less than an hour to execute once the solution is agreed on. I have offered one solution but would prefer a more elegant one. Reduce number of tags and repetition by separating elements common between top and bottom straps on LECturer and STUdent pages Common elements include size, font family and position Different elements include Color, background-color and min-height For example, the classes .cerise , .slate ,umber, .raiforest, .form all feature: .<class> { width : 950px; height : 110px; background-color : #2ce040; color : #ea6611; font-size : 64pt; font-family : Franklin Gothic Medium, sans, arial, helvetica; } Only the color needs to change. The form class also has a min-height element that may be redundant. Nested divs is one way to achieve this – if you have a better solutions use it on one page and get me to approve it. <div class=”strap”> <div class=”top”> content</div></div> <div class=”strap”> <div class=”bottom”> content</div></div> .strap { width : 950px; height : 110px; font-size : 64pt; font-family : Franklin Gothic Medium, sans, arial, helvetica; } .top { background-color : #2ce040; color : #ea6611; } .bottom { background-color : # ea6611; color : #2ce040; }