CSSで見出し・リスト・箇条書き・引用を装飾

CSS/HTMLの知識が全くない。
というか、こういうコーディングって大嫌いｗ
でも、ブログを管理していく上で避けては通れないCSS/HTML。
よく使う書式（見出し、リスト等）をCSSで弄ってみたので、コードを紹介。
ブログを書くツールだと自動で作ってくれるけど、
見た目がショボいのでCSSで装飾。

参考サイト

例によって大いに参考にしたサイト。
ほとんど丸パクリしたｗ
Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える | Webクリエイターボックス

見出し

これだけは上記サイトから拝借していない。
CSSコード

h5{
font-size: 16px;
margin: 5px 0;
padding: 5px 0 5px 10px;
border-left: 8px #00BFFF solid;
}

"h5"ってのが、HTMLでのヘッダに相当。
h1～h6までが見出しに相当していて、
自身のブログのHTMLを確認したらh1～h4まで使っていたので、h5を指定。

HTMLコード

<h5>
"見出し"
</h5>

見た目。

こんな感じ

リスト

1. その１
2. その２

みたいなやつ。

CSSコード

#ol1 li{
color: #3cf;
font-size:200%;
list-style: decimal inside;
}
    #ol1 li span{
    color: #000000;
    font-size:12px;
    font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Osaka,'ＭＳ Ｐゴシック',sans-serif;
    }

HTMLコード

<ol id="ol1">
  <li><span>その１</span></li>
  <li><span>その２</span></li>
</ol>

見た目。

1. その１
2. その２

箇条書き

• ああああ
• いいいい

みたいなやつ。

CSSコード

#ul1 li{
list-style: square outside;
color:#3cf;
list-style-image:none;
}
    #ul1 li span{
    color:#000000;
    }

HTMLコード

<ul id="ul1">
  <li><span>ああああ</span></li>
  <li><span>いいいい</span></li>
</ul>

見た目

• ああああ
• いいいい

引用

フヒヒヒヒヒｗｗｗｗｗｗ

みたいなやつ。

CSSコード

#bq1{
border-left:5px solid #03ACEA;
background: #CEECF5;
padding: 10px;
}

HTMLコード

<blockquote id="bq1">フヒヒヒヒヒｗｗｗｗｗｗ</blockquote>

見た目。

フヒヒヒヒヒｗｗｗｗｗｗ

と、まあこんな感じ(´ー`)