CSSとは何か、HTMLページにどう接続するのか、そして最初のルールをどう書くのかを学びましょう。
このレッスンを Kodokon で開くHTML はWebページのコンテンツ、つまり見出し、段落、画像を記述します。CSS（Cascading Style Sheets の略）はその見た目、つまり色、大きさ、余白を記述します。家を思い浮かべてください。HTMLは壁や部屋であり、CSSは塗装、家具、装飾です。CSSがなければ、どのWebページも同じ見た目、つまり白い背景に黒い文字になってしまうでしょう。
CSSルール は3つの部分でできています。まず来るのがセレクタです。これはページ上のどの要素が影響を受けるかを示します（たとえば、すべての段落）。次に、波かっこ { } の間に、1つ以上の宣言が来ます。それぞれの宣言は、プロパティ（変えたいもの、たとえば色）と値（あなたが選ぶもの、たとえば赤）をコロン : で結び、セミコロン ; で終えます。
p {
color: red;
font-size: 18px;
}このルールを1語ずつ読んでみましょう。p はセレクタで、ページ上のすべての <p> 要素、つまり段落を対象にします。color は文字の色を設定するプロパティで、red はその値です。font-size は文字の大きさを設定し、ここでは 18px（18ピクセル。画面を測るのに使う単位です）です。このCSSをHTMLページに接続する方法は3つあります。おすすめの方法は外部ファイルです。CSSは styles.css のような独自のファイルに置き、<head> の中に置いた <link> タグでHTMLに差し込みます。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This text will be red.</p>
</body>
</html>2つ目の方法は内部CSSです。ルールをHTMLの中に直接、<head> に置いた <style> タグの中に書きます。手早くテストするには便利ですが、スタイルはそのページ1つにしか適用されません。3つ目の方法はインラインCSSです。宣言をタグに直接、style 属性の中に書きます。スタイルがそのタグだけに適用されるため、セレクタも波かっこもないことに注目してください。
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p style="color: blue;">I am blue.</p>
<p>I am red.</p>
</body>p { color: red; } において、color は何ですか？