レイアウトデザイン

要素の高さと幅を指定する　height, width

通常はpxで指定するが、レスポンシブデザインの場合は%で指定する。
使える単位は auto, px, %, em, など
高さ　height
幅　width

div{
    height: 100px;
    width: 100px;
}

要素の外側の余白サイズ　margin

例えばdivで箱を作っている場合など、その周囲にmarginで余白を作ることが出来る。
使える単位は px, %, em, など

p {
    margin: 20px;
}

margin: 20px
上下左右全てに20pxの余白ができる

margin: 10px 20px
上下に10px、左右に20pxの余白ができる

margin: 10px 20px 30px 40px
上、右、下、左、の順で設定される

個別設定
margin-top: 20px
margin-right: 20px
margin-bottom: 20px
margin-left: 20px

要素の内側の余白サイズ　padding

例えばdivで箱を作っている場合は、その内側にpaddingで余白を作ることが出来る。
使える単位は px, %, em, など

p {
    padding: 20px;
}

padding: 20px
上下左右全てに20pxの余白ができる

padding: 10px 20px
上下に10px、左右に20pxの余白ができる

padding: 10px 20px 30px 40px
上、右、下、左、の順で設定される

個別設定
padding-top: 20px
padding-right: 20px
padding-bottom: 20px
padding-left: 20px

テキスト、画像などの垂直方向の位置揃え指定　vertical-align

img {
    vertical-align:bottom;
}

値
baseline　親要素のベースラインに揃える（初期値）
top　上端揃え
bottom　下端揃え
middle　中央揃え
px, %, em
など

テキストに下線、上線、打ち消し線の装飾　text-decoration

p{
    text-decoration: underline;
}

none 装飾なし（初期値）
underline 下線
overline 上線
line-through 打ち消し線
blink 点滅

擬似クラス

要素がどういった状態にあるか、指定するためのもの。
要素:状態

通常リンク
a{
    color:red;
}

訪問済みリンク
a:visited{
    color: blue;
}

マウスカーソルが乗っている時
a:hover{
    text-decoration: underline;
}

等。

参考
セレクタの種類HTMLクイックリファレンス

疑似要素

要素の前後や、特定の箇所にテキストや画像などを指定することが出来る。

要素::状態

コロンは一つでもいいが、IE8など古いブラウザが対応していない。
そもそもIE8はHTML5にも対応していないので、バッサリ切ってしまう。
擬似クラスと疑似要素の区別が付きやすいようにコロンは2つがいい。

要素の前に追加する
before, afterではcontent属性が必須。不要な場合は "" とだけしておく。
h1::before{
    content: "";
}

要素の後に追加する
h1::after{
    content: "";
}

参考
セレクタの種類HTMLクイックリファレンス

clearfix

float要素を使用すると、親要素に高さが無くなる。
floatによる回り込みを解除しつつ、親要素に高さを与えるclearfixというテクニックがある。

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

floatを利用する要素が入った親グループ(sectionやdivでグループ化しておく)に対して上記クラスを設定する。