セレクター
#id1
id
.class1
class
.class1,.class2
セレクタ複数選択（OR）
.class1.class2
セレクタ複数選択（AND）
例: .class1.class2
.class1 .class2
セレクタの子（n階層）要素のセレクタ
.class1 > .class2
セレクタの直接の子（1階層）要素のセレクタ
.class1[attr1][attr2]
属性で絞り込み（AND）
例: a[href][title]
特定の要素の次にある要素, 特定の要素以降の要素など他にもたくさんある
省略
https://itsakura.com/css-multi-selector 参照
.class1:nth-child(n)
セレクタにヒットする要素群のn番目の要素
.class1::before / .class1::after
要素の直前もしくは直後のスタイルを指定する。
.class1:link
リンクのスタイルを指定する。
.class1:visited
既に訪れたリンクのスタイルを指定する。
.class1:hover
マウスカーソルが上に乗った時のスタイルを指定する。
プロパティ
display
要素の種類を指定する。
詳細はこちら。
font-size
フォントサイズを指定する。単位はrem。
color
色を指定する。
font-color
フォントカラーを指定する。
text-align
テキストのアライメントを指定する。
・left
左寄せ
・right
右寄せ
・center
中央揃え
・justify
均等
position
ボックスの配置方法を指定する。
・static
位置を指定できなくする（ブラウザに任せる）。
・relative
何もプロパティを設定しなければ、staticと同じ。
top, right, bottom, leftを指定することで、staticでの位置からずらすことができる。
・fixed
viewportに対する相対位置で配置される。
つまり、ページがスクロールされても、いつでも同じ場所に配置される。
relative同様、top, right, bottom, leftプロパティが使われる。
・absolute
fixedとほぼ同等だが、viewportからの相対位置の代わりに、位置指定有効かつ最も近い世代の祖先要素からの相対位置に配置される。
位置指定有効な要素の祖先を持たなければ、absoluteな要素はdocumentのbodyからの相対位置に配置されるし、ページスクロールで動きもする。
"位置指定有効な"要素はstatic以外のいずれかの値が指定された場合であったことを思い出してほしい。
z-index
ボックスの重なりの順序を指定する。
positionにstatic以外が指定されている時のみ有効。
・auto（初期値）
親要素と同じ階層になる。
・数値
0を基準として、値が大きいものほど上になる。
margin
自分の周りの大きさを指定する。
ショートハンド：http://css-happylife.com/archives/2007/0113_1955.php
padding
自分の大きさを指定する。
ショートハンド：http://css-happylife.com/archives/2007/0113_1955.php
top/left
上/左からの距離を指定する。
top: 50%;
left: 50%;
と書くと中央になる。
margin-top/margin-bottom/margin-left/margin-right
上下左右のマージンを個別に指定する。
left: 50%;
margin-left: -330px;
と書くと中央から330pxだけ左にずれる。
（左辺から-330px分左にスペース生成）
left: calc(50% - 330px);
と書いても同じ意味になる。
（中央よりも330px左の位置に配置）
width/height
幅/高さを指定する。
widthを%指定すると、その左からその%分だけ表示される（width: 50%だと左半分表示）。
heightでも同様。
min-width/min-height
幅/高さの最小値を指定する。
使い道はこちら。
background-color
背景色を指定する。
border
枠のフォーマットを指定する。
指定方法の詳細はこちら。
border-radius
borderの丸みを指定する。
50%で円になる。
指定方法の詳細はこちら。
box-shadow
ボックスに影を付ける。
詳細はこちら。
overflow
ボックスの範囲内に内容が入りきらない場合のはみ出た部分の表示の仕方を指定する。
・visible（初期値）
ボックスからはみ出して表示。
・scroll
入りきらない内容はスクロールして見られるようになる。
・hidden
はみ出た部分は非表示。
・auto
ブラウザ依存（大抵scroll同様の動きになる）。
content
before/afterセレクター指定時のみ指定可能。
要素の直前または直後に文字列や画像などのコンテンツを挿入する。
background-size
背景画像のサイズを指定する。
・auto（初期値）
よしなに
・contain
背景領域に収まる最大サイズ（比率保持）
・cover
背景領域に収まる最小サイズ（比率保持）
・長さ
背景画像の幅・高さを指定する
・%
背景領域に対する背景画像の幅・高さのパーセンテージを指定する
background-position
背景画像の表示開始位置を指定する。
・%
背景画像が表示される領域の左上からの距離を、横方向と縦方向の順で、％で指定する。
例えば、background-position: 20% 40%;と指定した場合、表示される領域の左端から20％、上端から40％の位置が背景画像の表示開始位置になる。
・left,center,right/top,center,bottom
それぞれ0%, 50%, 100%と指定してるのと同じ
・px
背景画像が表示される領域の左上からの距離を、横方向と縦方向の順で指定する。
background-image
背景画像を指定する。
・none（初期値）
背景画像を指定しない。
・url([image-URL])
背景画像に[image-URL]を使用する。
opacity
1で不透明、0で透明。
小技
縦を中央揃え
display: flex;
align-items: center;
justify-content: center;
注釈
viewport
viewport（ビューポート）とは、日本語に訳すと「表示領域」という言葉がしっくりくると思います。
例えば、デスクトップ環境（PCなど）のブラウザなどでは、ブラウザウインドウの表示領域がviewportになります。