CSS（Cascading Style Sheets）は、HTML文書の外観を制御するスタイルシート言語です。CSSを使うと、文字サイズや色、配置、背景色、ボーダー、マージンなど、HTMLで表示される要素のデザインを制御することができます。
__TOC__
以下は、CSSの基礎的な構文やルールを紹介する簡単なチュートリアルです。
CSSは、HTML文書のSTYLE要素内に記述するか、外部の.cssファイルに記述して、HTML文書から読み込むことができます。
セレクタ {
    プロパティ: 値;
    プロパティ: 値;
}
セレクタ: CSSで変更したいHTML要素を選択するための記述です。
プロパティ: HTML要素に対して変更するスタイルの種類を指定します。
値: プロパティに対する具体的な値を指定します。
例えば、以下のCSSコードは、h1タグ内の文字色を赤色にするスタイルシートです。
 
h1 {
    color: red;
}
CSSを外部ファイルに保存して、HTML文書から読み込むこともできます。外部ファイルを読み込むには、以下のような記述をHEAD要素に追加します。
 
"style.css"というファイルを読み込んでいます。読み込むファイル名やパスは、自分が作成したファイル名に合わせて変更してください。
CSSのセレクタは、HTML要素を選択するための記述です。セレクタによって、選択したHTML要素に対してスタイルを変更することができます。
以下にいくつかの例を示します。
タイプセレクター(Type Selector)は、HTML要素のタイプに基づいて要素を選択します。例えば、次のように記述します。
h1 {
  color: red;
}
すべての要素に対して、赤いテキスト色を指定します。
IDセレクター(ID Selector)は、HTML要素のID属性に基づいて要素を選択します。例えば、次のように記述します。
  background-color: gray;
}
id="header"属性を持つ要素に対して、グレーの背景色を指定します。
クラスセレクター(Class Selector)は、HTML要素のクラス属性に基づいて要素を選択します。例えば、次のように記述します。
.button {
  border: 1px solid black;
  background-color: white;
}
class="button"属性を持つ要素に対して、1ピクセルの黒い線で囲まれ、白い背景色を指定します。
属性セレクター(Attribute Selector)は、HTML要素の属性に基づいて要素を選択します。例えば、次のように記述します。
a[href^="https://"] {
  color: blue;
}
href属性の値がhttps://で始まるすべての要素に対して、青いテキスト色を指定します。
擬似クラス(Pseudo-Class)は、HTML要素の状態に基づいて要素を選択します。例えば、hover状態にある要素にスタイルを適用するには、次のように記述します。
a:hover {
  text-decoration: underline;
}
マウスが要素の上にあるときに、テキストに下線を表示します。
擬似要素(Pseudo-Element)は、HTML要素の一部分にスタイルを適用するために使用されます。例えば、::before擬似要素を使用して、要素の前に内容を挿入することができます。
p::before {
  content: ">> ";
  font-weight: bold;
}
すべての要素の前に、>> というテキストを挿入します。
以下は、よく使用されるCSSプロパティの一覧です。プロパティ名をアルファベット順に並べました。
これは一般的なCSSプロパティの一部であり、すべてを網羅するものではありません。また、各プロパティには多くのオプションがあり、それらはすべてここに記載することはできません。