Width（幅）
要素の横幅を指定するプロパティ。
CSS
width: 100px;/* 100ピクセルの幅 */ width: 50%;/* 親要素の50%の幅 */

Height（高さ）
要素の縦の高さを指定するプロパティ。
CSS
height: 200px;/* 200ピクセルの高さ */ height: auto;/* 内容に応じた高さ */

Margin（外側の余白）
要素の外側の余白を設定する。
CSS
margin: 10px;/* すべての辺に10px */ margin: 10px 20px;/* 上下10px、左右20px */

Padding（内側の余白）
要素の内側の余白を設定する。
CSS

padding: 10px;/* すべての辺に10px */ padding: 10px 20px;/* 上下10px、左右20px */

Border（境界線）
要素の境界線を設定する。
CSS
border: 1px solid black;/* 黒色の1pxの実線 */

box-sizingによる高さ広さの計算値の違い
CSS
box-sizing: content-box;/* デフォルト（widthとheightにpaddingとborderは含まれない） */ box-sizing: border-box;/* widthとheightにpaddingとborderが含まれる */

Background Color（背景色）
CSS
background-color: lightblue;

Background Image（背景画像）
CSS
background-image: url(‘image.jpg’); background-size: cover;/* 画面いっぱいに表示 */

Color（文字色）
CSS
color: red; color: #ff0000;

Box-Shadow（ボックスの影）
CSS
box-shadow: 5px 5px 10px gray;

Font-size（フォントサイズ）
CSS
font-size: 16px; font-size: 1.2em;

MDN Web Docs
CSS Tricks

例
1. CSSで三角タグ作成する
CSS
.triangle { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 20px solid black; }

2. inline box-shadow と box-shadowで凸凹ボタンを作る
CSS
.button { background: linear-gradient(to bottom, #f0f0f0, #ccc); border: 1px solid #999; box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2), 2px 2px 5px rgba(0,0,0,0.1); }

3. 固定背景で3D効果を作る
CSS
.parallax { background-image: url(‘background.jpg’); background-attachment: fixed; background-size: cover; }