CSSは（Cascading Style Sheets）の略で、HTMLのレイアウトや色や文字の修飾などのスタイルを記述する言語です。単にスタイルシートとも呼ばれます。HTMLで構造的な記述をしCSSでスタイルを記述するという役割分担がされています。
ここではHTMLファイルにCSSをどうやって記述するか説明します。
外部にCSSファイルを作り参照する場合は、HEADタグ内に
<link rel = "stylesheet" href = "XXX.css"TYPE="text/css">
と記述します。
HTMLファイルに書く場合は
<STYLE>
p {
color:bisque;
}
</STYLE>
のようにSTYLEタグ内に記述します。CSSファイルを参照する場合はこのタグ内の内容を記述します。語句としては、
セレクタ｛
プロパティ：値；
｝
となります。
タグに直接に書く場合は、
<p style = "color:bisque;">
のように記述します。
上に記述したスタイルシートを指定するとこのようになります。
いずれも指定した要素すべてを指定するものです。これを要素型セレクタと言います。ほかにもいつくかのセレクターがあります。
クラスセレクタ
CSSは.クラス名 { スタイルプロパティ }と記述し、HTMLには<要素 class = "クラス名；">と記述します。同じスタイルを別の要素で使えます。
.bisque{
color:bisque;
}
<p class = "bisque;">
IDセレクタ
CSSは#ID名 { スタイルプロパティ }と記述し、HTMLには<要素 id = "ID名；">と記述します。クラスセレクタと違い一つの文書に一か所しか使えません。
#bisque{
color:bisque;
}
<p id = "bisque;">
属性セレクタ
CSSは[属性]{ スタイルプロパティ }と記述し大括弧[]内の条件に合っている要素のスタイルを変更します。
[title] {color: black;}[href*="CSS_Selectors"] {color: green;}
[href$="Attribute_selectors"] {color: blue;}
<p><a href = "https://amamiya-lab.net/" title = "ホームページ">雨宮勇徒の研究室</a></p>
<p><a href = "https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Selectors">MDN Web Docs</a></p>
<p>詳細は<a href = "https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors">（MDN）属性セレクタ</a></p>
詳細は（MDN）属性セレクタ
擬似クラス
選択された要素に対して特定の状態を指定します。
書式は、要素：疑似クラス｛スタイルプロパティ｝となります。
a:hover {background-color:#ffdddd; color:red; }
疑似要素
セレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。
書式は、要素：：疑似要素｛スタイルプロパティ｝となります。
::selection { color: gold; background-color: red; }::first-line { color: red; font-weight: bold; }
この文章をドラッグするとほかの場所の文章とは別の背景色、文字色になります。段落の最初の行だけフォントの色が変わり、太字になっています。
グループ化セレクタ
要素１,要素２｛スタイルプロパティ｝は要素１と２ともにスタイルが適応されます。
要素１ 要素２｛スタイルプロパティ｝は要素１の中にある要素２すべてに適応されます。
要素１＞要素２｛スタイルプロパティ｝は要素１の内側に直接ネストされた要素２すべてに適応されます。
要素１〜要素２｛スタイルプロパティ｝は要素１の後にある要素２すべてに適応されます。
要素１＋要素２｛スタイルプロパティ｝は要素１の直後にある要素２に適応されます。