html - How to create a CSS class that includes other class to prevent repeating multiple css class? -

i have list of css combination gives me desired outcome. however, find myself repeating lists. e.g.

<div id="div1"><h4 class="muted-text text-center cursive text"> text 1</h4></div> <div id="div2"><h4 class="muted-text text-center cursive text"> text 2 </h4></div> <div id="div3"><h4 class="muted-text text-center cursive text"> text 3</h4></div> <div id="div4"><h4 class="muted-text text-center cursive text"> text 4</h4></div> 

i want able such:

<div id="div1"><h4 class="portfolio-title"> text 1</h4></div> <div id="div2"><h4 class="portfolio-title"> text 2</h4></div> <div id="div3"><h4 class="portfolio-title"> text 3</h4></div> <div id="div4"><h4 class="portfolio-title"> text 4</h4></div> 

i'm using combination of bootstrap provided class (muted-text & text-center) own cursive-text used elsewhere itself.

how can achieve need in css file?

thanks help.

just make own class.

.portfolio-title {   color: #dddddd;   text-align: center;   font-family: cursive; } 

or use sass. you'd want use placeholder here, if use base class repeatedly

%title {   color: #dddddd;   text-align: center;   font-family: cursive; }  .portfolio-title {   @extend %title }  .other-class {   @extend %title } 

the output like:

.portfolio-title, .other-class {   color: #dddddd;   text-align: center;   font-family: cursive; }