<!-- green background, bold text, small margin, large padding -->
<p class="bg-g tx-b mr-s pd-l">
  Lorem ipsum
</p>

<!-- red background, thin text, medium margin, medium padding -->
<p class="bg-r tx-t mr-m pd-m">
  Lorem ipsum
</p>

<!-- blue background, normal text, large margin, small padding -->
<p class="bg-b tx-m mr-l pd-s">
  Lorem ipsum
</p>
/*red background*/
.bg-r{
  background-color: #eb4034;
}

/*green background*/
.bg-g{
  background-color: #34eb59;
}

/*blue background*/
.bg-b{
  background-color: #349ceb;
}

/*small margin*/
.mr-s{
  margin: 10px;
}

/*medium margin*/
.mr-m{
  margin: 20px;
}

/*large margin*/
.mr-l{
  margin: 30px;
}

/*small padding*/
.pd-s{
  padding: 10px;
}

/*medium padding*/
.pd-m{
  padding: 20px;
}

/*large padding*/
.pd-l{
  padding: 30px;
}


/*thin text*/
.tx-t{
  font-weight: 300;
}

/*normal text*/
.tx-n{
  font-weight: 400;
}

/*bold text*/
.tx-b{
  font-weight: 600;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.