いまさらながらですが，ちゃんとHTML，CSS3とか見たことがなかったので，体系立てて少し見てみました．
用語，仕様が複雑ですね… ベンダープレフィックスとか…

▼ レイアウトの変遷

1. テーブルレイアウト
2. float
3. Flexbox
4. Grid Layout

レイアウトには流行廃りがあって，上記のような感じらしい．
プログラマであれば，今後は bootstrap4 あたりをチェックすれば良いと思う．
でも結局なんとなく全部把握しておく必要があるかも…

参考: CSSレイアウトにfloatは古い! 初心者でも始められるFlexbox入門

日本語対応！CSS Flexboxのチートシートを作ったので配布します

▼ ブラウザ間の差分をなくす方法

html 各要素のブラウザ毎に異なる差異をなくしてスタイルをリセットするスタイルシートを適用すれば良い．
sanitize.css

リセットCSS，ノーマライズCSS，サニタイズCSSなど初心者には区別が付けにくい言葉があったので，ついでに調べておく．

【サンプルあり】リセット・ノーマライズ・サニタイズCSSの違いと使い方

▼ html ファイルから css ファイルの指定方法

1

<link href="css/base.css" rel="stylesheet" type="text/css">

▼ css セレクタ

より後から読み込まれたスタイルが適用される．
・要素の状態によって適用できるセレクタに擬似クラスがある．
・全ての要素に適用する「*」．
・擬似要素 :first-letter / :before / :after

参考: CSS 複数のセレクタを指定する/絞り込むサンプル
参考: CSSのセレクタとは？覚えておきたい25種類と書き方
参考: cssを書く人がブクマしておきたいジェネレーターサイト8選

▼ css ショートハンド

margin プロパティなどの数字の指定方法は以下の通り．

指定しない場合，デフォルトになる

参考: 余白については以下の記事が良かった．

CSSのmarginとは？paddingとは？余白の指定方法まとめ

▼ 特殊文字

1
2
3
4
5

               ノーブレークスペース（前後で自動改行しないスペース）
"    "    "    クォーテーション（引用符）
&    &    &    アンパサンド
<    &lt;    &#60;    小なり
>    &gt;    &#62;    大なり

&#以降はUnicodeのコード番号

▼ レスポンシブ対応の仕組み

css で以下のようにメディアクエリを記述し，スクリーンサイズで処理を分岐する．

1
2
3
4
5
6
7
8

@media screen and (min-width:480px) {
    /*　画面サイズが480pxからはここを読み込む　*/
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    /*　画面サイズが768pxから1024pxまではここを読み込む　*/
}
@media screen and (min-width:1024px) {
    /*　画面サイズが1024pxからはここを読み込む　*/