How to reuse styles?

Question

Back in the past I learned a lot about CSS but now I can\'t remember how to reuse styles.

Example:

I have some tabs with class tab and I can switch

Answer 1

Do this. Combine the styles and separate with a comma. Then add other rules targeting the differences.

.tab, .active {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 0 15px 0;
    border: solid thin #CCC;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    color: #272F42;
}

.tab{
    cursor: pointer;
    background-color: white;
}

.active {
    cursor: default;
    background-color: #FFCF75;
}

EDIT

Based on your comment

I'm currently switching the tabs by adding .active style to the class attribute.

this is what I would do:

HTML

CSS

.tab {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 0 15px 0;
    border: solid thin #CCC;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    color: #272F42;
    cursor: pointer;
    background-color: white;
}

.active {
    cursor: default;
    background-color: #FFCF75;
}

Then just add or remove the .active class, leaving the .tab as is.

As long as .active is lower down in the stylesheet, it will overwrite the necessary bits.