HTMLでページの大まかな構造を書いたら、スタイルシート(=CSS)で見栄えを整えるためにHTMLの中に目印を付けます。
cssは「このページのこの場所を白色にする」というように、見栄え(=スタイル)を指定するのですが、cssを読み取って画面の表示に反映させるのはブラウザであり、ブラウザは私たち人間のように「このページのこの場所」と言われでもどこのことだかわかりません。
そのため、HTMLに目印を付けて「HTMLにこの目印が付いている場所を白色にする」というように、ブラウザが理解できる形をとるのです。
なぜなら、ブラウザはcssを読み込む時点ですでにHTMLを読み込み終えているので、HTMLに付けた目印とcssを結びつけるのが最も効率的で理にかなっているからです。
HTMLに付ける目印には「タグ名」「id」「class(クラス)」の3種類があります。
HTMLに目印を付けたら、テキストエディタを使って1つ1つの目印にcssの構文を使って見栄え(=スタイル)の定義を書いていきます。
作ったファイルは「style.css」のように拡張子”.css”を付けて保存します。