This is very difficult to explain, but I’m trying to minimise the amount of CSS coding to create the same output.
In the example I have 3 divs, all that are identical except the colour. How can I make the 3rd section use the same css rule as one of the other sections but have a red background? I know how to do it using text (e.g. p class = rule1, or p class = rule 2) but not with divs.
I hope I’ve explained the problem clearly. Thank you.
.central-section{
background:#9C3;
width:960px;
height:auto;
margin:0 auto;
margin: 10px 0 10px 0;
}
.central-section-2{
background:#ff0;
width:960px;
height:auto;
margin:0 auto;
margin: 10px 0 10px 0;
}
<div class="central-section">
<h1>Header 1</h1>
<h2>Header 2</h2>
<p>Exact same section but green background</p>
</div>
<div class="central-section-2">
<h1>Header 1</h1>
<h2>Header 2</h2>
<p>Exact same section but yellow background</p>
</div>
<div class="central-section">
<h1>Header 1</h1>
<h2>Header 2</h2>
<p>Exact same section but I want a red background without having to create another huge css section</p>
</div>