見出し中、見出し小、などに利用すると良いかもしれませんね。
見出し大に共通した縦方向のバーをつけます
ありがちな見出し1
CSSを書きます。
以下のコードを下のタグの貼り付け方に沿って貼り付けます。
※すでに<style></style>が存在していた場合は、赤い文字の部分だけをその中に入れます。
保存したあと、ページの再読み込みをしてください。（キーボードのF5ボタンを押す）
<style type="text/css">
#content_area h1{
box-shadow: 0 2px 0 #FFF,0 4px 6px rgba(0,0,0,0.3); background: linear-gradient(#fff 2px,#f7f7f7
20%,#e5e5e5,98%,#fff 100%);
border-bottom: 5px groove #C00;
padding: 20px 1em;
border-top: 3px double #ccc;
font-size: 24px; color: #333;
text-shadow: none;
box-sizing: border-box;
}
</style>
▼ タグの貼り付け方はここ マウスを当てると画像が開きます。
※見出し中に設定したい時は、h1をh2に、見出し小に設定したい時は、h1をh3にそれぞれ変更して保存すれば実現できます。バーのカラーは、ホームページで利用しているカンパニーカラーにすると配色ミスは避けられます。
青色のバリエーション
緑色のバリエーションと線種変更（凸型の線）
text-shadow:1px 1px 0 #FFF; ← 追加
下線はホームページのコンセプトカラーを使用されると絞まりが出て良いと思います。
色のことで悩んだら原色大辞典をオススメします。
原色大辞典 → http://www.colordic.org/
線種の参考資料
以下の線種の指定方法 ⇒ border:10px #b0c4de 線種指定;
solid
実線
double
二重の線
groove
谷型の線
ridge
山型の線
inset
凹型の線
outset
凸型の線
dotted
点線
dashed
破線
コメントをお書きください