<div>
<p class="title1">見出しテキスト</p>
<p class="title2">見出しテキスト</p>
<p class="title3">見出しテキスト</p>
<p class="title4">見出しテキスト</p>
<p class="title5">見出しテキスト</p>
</div>
/*配置（装飾に関係ないところ）*/
div{
  width:90%;
  margin:0 auto;
}
p{
  margin:50px 0;
}
/*各タイトル装飾*/
.title1{
  font-weight:bold;
  color:#f30;
}
.title2{
  border-bottom:1px solid #a34;
  color:#a34;
}
.title3{
  border-left:2px solid #65f;
  padding:5px 10px;
  color:#65f;
}
.title4{
  background:#da0;
  padding:5px 10px;
  color:#fff;
}
.title5 {
  background: linear-gradient(transparent 60%, #8df 40%);
  background: -webkit-linear-gradient(transparent 60%, #8df 40%);
  padding:0 10px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.