CSS入門の段階でつまずきそうなところについて書きました。ケアレスミスが多いと思いますが、一つ一つ潰していきます。地道な作業かもしれませんが、下記の点に気を付けてCSSを楽しんでください。
スペルミスと入力ミス
CSSに限りませんが、英単語を入力していくのでスペルミスすることがあります。また、隣のキーを押して入力ミスすることもあります。「n」と「m」、「v」と「b」などの入力ミスです。形が似ている「n」と「m」は見分けがつきにくいので、特に注意が必要です。
全角スペースが入る
コードの途中に全角スペースが入ると動作しなくなります。また全角スペースは、見つけにくいので厄介です。高機能エディタには、全角スペースを分かりやすく表示する機能があります。そのような機能を活用して効率的にスタイルを記述していきましょう。※コメントの中の全角は、問題ありません。
閉じ括弧(})忘れ
}を忘れるとそれ以降のスタイルが無視されます。{と}はセットです。{と}は必ず同じ数あります。
コロン(:)とセミコロン(;)を間違える
コロンとセミコロンは形が似ているので見分けがつきにくいです。キーボードの隣同士でもあるので入力ミスしやすいです。h1{ color ; red; }のようにならないように注意が必要です。
idセレクタ(#)とクラスセレクタ(.)を間違える
idセレクタのところをクラスセレクタにしたり、その逆をすることがあります。「#」なのか「.」なのか確認してください。
CSSの優先度を理解していない
今まで挙げた項目は、ミスを見つけられれば簡単に対処できるものです。しかし、優先度を理解していないが故に起こるミスは、厄介なミスです。対処としては、セレクタの指定を書き直して優先度を変更すると言うことをします。言葉にすると簡単ですが、優先度を考えて書き換えるので少々頭を使います。
余談になりますが、質問サイトでCSSの質問を見かけることがあります。そこで稀に「回答のコードをコピペしたのに思ったように表示できません。」とコピペすれば何とかなると考えているような質問者さんがいらっしゃいます。
一概には言えませんが、これはCSSの優先度(書き方)を理解していないため、思ったように表示できないのだと推測します。新規ファイルに該当の箇所だけをコピペすれば問題ないと思いますが、質問者さんが作った既存のファイルにコードを追加したところで、必ずしも望むような表示結果が得られるとは限りません。思ったような表示結果が得られないのは、たまたま同じセレクタで既存のスタイルを上書きしたり、優先度の関係で上手くいっていないためだと考えます。
上手くCSSが適用されない場合は、既存のコードに合うようにCSSの優先度を考えて、修正する必要があります。
まとめ
CSS入門の段階でつまずくであろうことは以下です。
