コードでデザインを表現することは複雑なので、まずは全体を把握していきましょう。
レイアウト
display
要素の法則を決めます。
‘block’にすると、その行を丸々使います。
‘inline’にすると、その要素の大きさ（長さや文字数）だけを使います。
‘flex’にすると、様々なことができます。
‘grid’にすると、様々なことができますが、flexより規則的です。position
要素を柔軟に配置します。
‘relative’にすると、px や % を使って柔軟な配置ができます。
‘absolute’にすると、relative を親として、自身の位置を相対的に決めることができます。
‘fixed’にすると、絶対位置と呼ばれる、スクロールしても常に同じ位置に配置されます。
‘sticky’にすると、一定位置から fixed になります。margin
要素の外側の余白を上下左右で設定します。padding
要素の内側の余白を上下左右で設定します。width,height
要素の幅と高さを設定します。
文字
color
文字の色を設定します。font-family
文字の種類を設定します。font-size
文字のサイズを設定します。font-weight
文字の太さを設定します。text-align
テキストの水平方向（横方向）の配置を設定します。
背景
background-color
要素の背景色を設定します。background-image
要素の背景画像を設定します。background-repeat
背景画像の繰り返し方法を設定します。background-position
背景画像の表示位置を設定します。
枠線
border
枠線の幅、スタイル、色をまとめて設定します。border-radius
枠線の角の丸みを設定します。