html - Several CSS classes with just one property that's different? -

this question has answer here:

• inherit class 4 answers

this simple question, don't know how search in web.

i have 3 css classes: .header, .cell, .footer. following:

.header {     display:table-cell;      vertical-align:middle;      width:130px;     height:20px;      background-color: yellow;      border: 1px solid silver; } .cell {     display:table-cell;      vertical-align:middle;      width:130px;     height:85px;      background-color: yellow;      border: 1px solid silver; } .footer {     display:table-cell;      vertical-align:middle;      width:130px;     height:40px;      background-color: yellow;      border: 1px solid silver; } 

the difference between these classes height property. how can simplify code?

thanks.

use , separate elements in selector list common properties:

.foo, .bar {    color: red; }  .foo {    font-size: 120%; }  .bar {    font-size: 80%; } 

this'll make both .foo , .bar red, have different text sizes.