Cascading Style Sheets (CSS) とは、ウェブサイトのデザインを記述するための言語です。
HTMLタグのstyle属性にCSSプロパティを指定する。セミコロンで区切って、複数のプロパティを指定することもできる。
<h2 style="font-size:large; color:red;">スタイルシート</h2>スタイルシートを外部ファイルで定義した場合は、HTMLの LINK要素タイプでその外部ファイルのスタイルシートを参照するように指定します。
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
</html>外部ファイル stylesheet.css の中でスタイルシートの定義を行います。
h2 {
font-size: large;
color: red;
}/* と */ に囲まれた部分はコメント（注釈）となる。コメントは複数行にわたってもよい。ただし、入れ子（ネスト）にすることはできない。
他の言語にあるような // や # といった単一行コメントは、CSSには無い。
h1 {
/* 背景は赤色 */
background-color: red;
}a:active は、アクティブになっている要素を表す擬似クラスである。
a:hover は、ホバーになった要素を表す擬似クラスである。
:first-child は、親の最初の子供である要素を表す擬似クラスである。
:empty疑似クラスは子を持たない要素を表す。たとえば、次のような要素である。
<p></p>:focus は、フォーカスを得た要素を表す擬似クラスである。
:lang(lang) は、言語が lang である要素を表す擬似クラスである。
:last-child は、親の最後の子供である要素を表す擬似クラスである。
:link は、ハイパーリンクのアンカーであり、かつ、そのハイパーリンクのターゲットにまだ訪れていない要素を表す擬似クラスである。
擬似クラスは次の順番で指定する必要がある。
最初の子要素以外
li:not(:first-child) {
padding-top: 1rem;
}最後の子要素以外
li:not(:last-child) {
padding-bottom: 1rem;
}:visited は、ハイパーリンクのアンカーであり、かつ、そのハイパーリンクのターゲットへ既に訪れている要素を表す擬似クラスである。
:root 疑似クラスは、HTMLツリーのルート要素であるhtml要素を選択するセレクタです。つまり、html 要素セレクタと同じです。
おもに、グローバルのCSS変数を宣言するのに使われます。
:root {
/* 変数の宣言 */
--color-primary: blue;
}CSSでは変数を使うことができます。
CSS変数にはスコープ（有効範囲）があり、CSS変数を定義したCSSセレクタ内でのみ有効です。
div.primary {
/* 変数の宣言 */
--color-primary: blue;
/* 変数の参照 */
color: var(--color-primary);
}ただし、:root 疑似クラス内で定義したCSS変数はグローバルとなり、どこからでも参照することができます。
:root {
/* 変数の宣言 */
--color-primary: blue;
}
div.primary {
color: var(--color-primary);
}
span.primary {
color: var(--color-primary);
}変数の宣言で値を変えれば、変数を参照しているすべての箇所をいっぺんに変更することができます。
World Wide Web Consortium (2021) CSS Backgrounds and Borders Module Level 3