h2 タイトル（見出し）の文字の装飾を例にデザインの要素（エレメント）の説明をします。

文字に装飾を入れる

h2見出しを画像を使わず、border-leftプロパティのみで実装します。
分かりやすくするため、左ボーダーの線を青色(#0066CC)に、他の枠の線をピンク色(#FF99CC)にした場合が下記です。

HTML

<div class="headline1">
  <h2>h2見出しのサンプル</h2>
</div>

CSS

/* 左ボーダーの線:青色(#0066CC)  他の枠の線: ピンク色(#FF99CC)*/
.headline1 h2 {
	margin:0;
	padding:0 0 0 20px;
	border:1px solid #FF99CC;
	border-left:5px solid #0066CC;
	font-size:14px;
}

 
height プロパティで見出し枠の高さを指定
見出しの枠の高さを広げるため、CSS に「height:43px; 」を追記すると下記のように文字が枠内の上側に寄って表示されます。

CSS

/* 左ボーダーの線:青色(#0066CC)  他の枠の線: ピンク色(#FF99CC)*/
.headline1 h2 {
	margin:0; padding:0 0 0 20px;
	height:43px;
	border:1px solid #FF99CC;
	border-left:5px solid #0066CC;
	font-size:14px;
}

line-height プロパティで見出し枠内の上下中央に指定
CSSの line-height プロパティで高さを決めると要素の大きさはline-heightの値になり、中心から上下に値の半分が割り当てられます。
文字が見出し枠内の上側に寄って寄っているのを上下中央に指定するため、CSSに「line-height: 43px;」を追記すると下記のように表示されます。

CSS

/* 左ボーダーの線:青色(#0066CC)  他の枠の線: ピンク色(#FF99CC)*/
.headline1 h2 {
	margin:0;
	padding:0 0 0 20px;
	height:43px;
	line-height: 43px;
	border:1px solid #FF99CC;
	border-left:5px solid #0066CC;
	font-size:14px;
}