HTMLに直接CSSを書き込む場合、style属性を使用して要素ごとにスタイルを指定することができます。以下は、例としてh1要素に赤い文字色と太字を指定する場合のコードです。
Hello World!
このように、要素の開始タグにstyle属性を追加し、値としてスタイルを指定します。複数のスタイルを指定する場合は、セミコロン（;）で区切って指定します。
複数の要素に同じスタイルを適用する場合は、style要素を使用してCSSを記述することもできます。以下は、全てのh1要素に赤い文字色と太字を指定する場合のコードです。
Example
Hello World!
Welcome to my website
このように、head要素内にstyle要素を記述し、その中にセレクタとスタイルを記述します。
この例では、h1セレクタに対してcolorプロパティとfont-weightプロパティを指定しています。このCSSは、全てのh1要素に適用されます。
外部スタイルシートを使う場合は、HTMLファイルとは別にCSSファイルを作成し、それをHTMLファイルから呼び出します。これにより、同じCSSスタイルを複数のHTMLファイルで使い回すことができるため、メンテナンス性やスタイルの統一性が向上します。
まず、CSSファイルを作成します。拡張子は.cssです。以下の例では、style.cssという名前で保存しています。
style.css:
body {
  background-color: lightblue;
}
h1 {
  color: navy;
  margin-left: 20px;
}
 
次に、HTMLファイルからCSSファイルを呼び出します。以下の例では、index.htmlという名前で保存しています。
 
index.html:
外部スタイルシートを使う例
見出し
本文のテキストです。
link要素にrel="stylesheet"とtype="text/css"を指定し、href属性にCSSファイルのパスを指定します。上記の例では、CSSファイルのパスが同じディレクトリ内にあるので、style.cssというファイル名のみを指定しています。もしCSSファイルが別のディレクトリにある場合は、そのパスを正確に指定する必要があります。
このように外部スタイルシートを使うことで、HTMLファイルとCSSファイルを分離することができ、メンテナンス性やスタイルの統一性が向上するとともに、HTMLファイルの読み込み速度も向上します。
CSSでは、どの要素にスタイルを適用するかを指定するために、セレクターと呼ばれるものを使用します。セレクターは、HTML要素の要素名、クラス、ID、属性などを指定して、スタイルを適用する要素を指定します。以下に、セレクターについての詳細を説明します。
要素名セレクターは、HTML要素の要素名を指定してスタイルを適用するものです。例えば、以下のようにP要素にスタイルを適用する場合、pを要素名セレクターとして指定します。
p {
  color: blue;
}
 
This text will be blue.
 
クラスセレクターは、CSSでクラスを定義し、HTML要素にクラス属性を設定して、スタイルを適用するものです。クラスセレクターは、.で始まるクラス名を指定します。例えば、以下のように.red-textクラスを定義して、P要素にスタイルを適用する場合、.red-textをクラスセレクターとして指定します。
.red-text {
  color: red;
}
 
This text will be red.
 
IDセレクターは、HTML要素にID属性を設定して、スタイルを適用するものです。IDセレクターは、#で始まるID名を指定します。例えば、以下のように#header IDを指定して、H1要素にスタイルを適用する場合、#headerをIDセレクターとして指定します。
  background-color: blue;
}
 
This is a header.
 
子孫セレクターは、セレクターを階層的に指定して、スタイルを適用するものです。例えば、以下のようにdiv要素の中のp要素にスタイルを適用する場合、div pを子孫セレクターとして指定します。
div p {
  color: green;
}
 
This text will be green.
 
直接子セレクターは、「>」を用いて親要素と直接的に子要素を指定する方法です。このセレクターは、指定した親要素の直下にある子要素のみを選択します。
例えば、以下のようにHTMLがあったとします。
タイトル
項目1
項目2
 
この場合、直接子セレクターを使用して、DIV要素の直下にあるH2要素を選択する場合は、以下のように記述します。
.parent > h2 {
  color: red;
}
 
相対セレクターは、他の要素を基準にして指定する方法です。一つの要素が別の要素に関連している場合に有効なセレクターです。
例えば、以下のようにHTMLがあったとします。
項目1
項目2
項目3
項目4
項目5
 
この場合、相対セレクターを使用して、LI要素の4つ目の要素を選択し、背景色を変える場合は、以下のように記述します。
.active ~ li {
  background-color: gray;
}
 
擬似クラスは、要素の状態を指定するためのセレクターです。例えば、リンクが訪問済みかどうか、マウスが要素の上にあるかどうかなどの状態を指定することができます。
例えば、以下のようにHTMLがあったとします。
リンク
 
この場合、リンクを訪問済みの状態で表示する場合は、以下のように記述します。
a:visited {
  color: gray;
}
 
以下は、CSSのセレクターの種類を名前、書式、説明に分けてまとめた表です。
注意：上記表には、全てのセレクター種類が含まれているわけではありません。また、複数のセレクターを組み合わせることで、より複雑な選択を行うことができます。