CSS

■要素の縦の長さを指定する

height: Xpx;

■要素の横の長さを指定する

width: Xpx;

■背景画像を表示する

background-image: url(URL); 

■背景画像を画面いっぱいに表示する

background-size: cover;

■画像などの透明度を設定する

opacity: X;

■文字の間隔を空ける

letter-spacing: Xpx;

■要素の横の長さを文字列長に合わせる

display:inline-block;

■外側に余白(margin)作る

余白をまとめて指定

margin: 10%;

上下左右の余白をそれぞれ指定

margin-top: 10%;
margin-left: 10%;
margin-right: 10%;
margin-bottom: 10%;

■内側に余白(margin)作る

padding: Xpx/X%;

■要素の角を丸くする

border-radius: Xpx;

ボタンを作成した時とかに使える。

■フォントの種類を指定する

font-family: "Avenir Next";

■div要素を横並びにする
そもそもdiv要素は縦に並ぶ仕様になっている。だから下記のプロパティを使って横並びにする。
また、親要素に指定する必要がある。
親要素に指定したとき、一つ下の子要素のみに適用される。

display: flex;

■div要素を左から横並びにする

float: left;

■div要素を右から横並びにする

float: right;

■div要素を右端に寄せる

position: absolute;
  right: 0;

■

で表示される黒点を消す

list-style-type: none

■指定して要素にのみCSSを適用する
.[クラス名] [タグ]{
}

<!--ヘッダーの<li>にのみcolorが適用される-->
.header li {
color: #fff
}

■枠線(border)をつける
border: [太さ][種類][色];

border: 3px solid green;

■1行入力用の入力欄
<input>要素

■複数行入力の入力欄
<textarea>要素

■文字の位置を調整する

文字を中央に位置させる

text-align:center;

■cssのclassを複数適用する

boostrapなどのclassを追加したけど、他のclassもdivなどの要素に反映させたいときに使える。

<div class="classA classB">

■開発者ツールでリアルタイムで見た目を変える

毎回、「cssのソースコード修正→コミット」をするのは面倒。
そこで、開発者ツールの「Element」>「X.css」を選択し、
そこに表示されているソースコードを修正するとブラウザ上で見た目の変化を確認できる。
満足いく見た目になったらソースコードをコピーして、ローカルにある元のX.cssに変更部分をペーストすれば何度もコミットしなくて済む。