スタイルの指定は、セレクタを用いて次のように記述します。
「セレクタ名」 {
←半角中カッコ開始
ここに
--- プロパティ:値; ---
の形でスタイルを記述
} ←半角中カッコ閉じる
すると、「セレクタ名」の全てのタグに対して、 記述されたスタイルが適用されます。
・ タグの場合は、タグ名が「セレクタ名」になります。
・ クラスの場合は、.(半角ピリオド)「class 名」が「セレクタ名」になります。
・ IDの場合は、#「id 名」が「セレクタ名」になります。
例
半角スペースで区切ってセレクタを並べ、
新たなセレクタ(複合セレクタ)が得られます。例えば、
p .myclass
は、p タグ内にある、クラス名 myclass のタグ
<p * * * > * *
<span class="myclass">
作用する部分 </span> * * </p>
に作用するセレクタとなります。
(注意) p タグのクラス名が myclass
<p class="myclass" * * * > * * * </p>
ではダメ です。
スタイル指定の「セレクタ名」部分に複数のセレクタを 半角カンマ「 , 」で区切って並べると、 それらのセレクタで指定されたタグ全部にスタイルが適用されます。 例
head 部分に style タグとして記述します。 例
スタイルファイルを新たに作成し、そこにスタイル指定を記述します。
記述は、スタイル指定を並べて書いていきます。
例
ファイル名は半角英数字で自由に付けて構いません。
が、拡張子は css(半角文字)とします。
置き場所は、どこでも構いません。
html ファイルと同じフォルダでもいいし、
新たなフォルダを作成し、そこに置いても構いません。
(フォルダ名は、半角英数字)
(注意) 新たなフォルダを作成する場合、フォルダ名は、
スタイルファイルが置かれていることが分かる名前(例えば、css とか)
にするのが良いと思います。
html ファイルの head 部分に、link タグを用いて次の形で記述します。
<link rel="stylesheet" href= "「スタイルファイルのURL」" type="text/css">
「スタイルファイルの URL」部分を、リンク先 URL の相対指定に書き換えます。