I have a list of css whose combination gives me the desired outcome. However, I find myself repeating this 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 to be able to do it as 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 a combination of bootstrap provided class (muted-text & text-center) as well as my own cursive-text which is also used elsewhere by itself.

How can I achieve what I need in the css file?

Thanks for your help.