CSSとは

CSS（カスケーディングスタイルシート）は見た目を装飾するための言語です。
セレクタ、プロパティ、値の3つの要素が組み合わさって、HTML要素にスタイルを適用します。

Google Chrome などのブラウザはUser Agent Stylesheet（ユーザーエージェントスタイルシート）と呼ばれる基本的なCSSを持っているので何も設定しなくても見出しなどは自動的にブラウザ毎に異なる固有の設定（User Agent Stylesheet）が適用されます。
User Agent Stylesheetが制作の邪魔にならないようにreset.css、normalize.css、sanitize.cssなどで一度解除してから新たにCSSを設定します。
（reset.css、normalize.css、sanitize.cssについてはWebクリエイター能力認定試験（知識編）で説明しているので確認しておいてください。）

前述したようにブラウザ毎に異なるCSSが設定されているので、本来制作者は複数のブラウザで確認をしながら制作を行います。複数のブラウザで表示確認する事をクロスブラウザチェックといいます。
スクールのPC環境では[Google Chrome]と[Safari]しかインストールされていませんが、[Microsoft Edge]、[Mozilla Firefox]、[Opera]、[Brave]、[Vivaldi]などでもチェックを行います。また、レスポンシブコーディングではスマホ版の各種ブラウザでもチェックを行う必要があります。
参考：NetMarketShare：Browser Market Share

①セレクタ[要素に]{②プロパティ（属性）[何を]：③値[どうする]；}

1.セレクタ（Selector）

スタイルを適用する対象のHTML要素を指定するもので、どの要素にスタイルを適用するかを決定します。

1. 要素セレクタ：h1, p, div
   特定のHTML要素を指定します。この例ではすべての<h1>、<p>、<div>要素にスタイルを適用します。
2. クラスセレクタ： <button class="button">,<p class=”button”>,<div class=”button”>
   クラス属性を付与した要素を指定します。この例ではすべての.buttonを付与した要素にスタイルを適用します。
3. IDセレクタ：<header id=”header“>,<p id=”textbox”>,<div id=”top”>
   特定のID属性を持つ要素を指定します。IDは一意でなければならないため、ページ内で同じIDを複数の要素に使用できません。
4. 子孫セレクタ：header div p
   特定の要素内にあるすべての指定された子孫要素を指定します。この例では< header >要素内にある<div>要素内の全ての<p>要素にスタイルを適用します。
5. 隣接セレクタ：h1 + p
   特定の要素の直後にある同じ階層の要素を指定します。この例では<h1>のすぐ後に続く<p>要素だけにスタイルを適用します。
6. 一致セレクタ：h1 ~ p
   特定の要素の後に続くすべての同じ階層の要素を指定します。例として、h1 ~ pは<h1>の後に続くすべての<p>要素にスタイルを適用します。
7. 属性セレクタ：[type="text"]
   特定の属性値を持つ要素を指定します。例として、[type="text"]はtype属性がtextの要素にスタイルを適用します。
8. 擬似クラス：:hover, :focus
   特定の状態にある要素を指定します。例えば、:hoverはマウスカーソルが要素上にあるときに適用されます。
9. 擬似要素： ::before, ::after
   要素の特定の部分に対してスタイルを適用します。例えば、::beforeは要素の前にコンテンツを追加する際などに使用します。

要素セレクタの例

セレクタ、プロパティ、値の3つの要素を組み合わせることで、HTML要素に具体的なスタイルを適用することができます。

h1 {
  color: blue; /* 文字色を青色にする */
  font-size: 24px; /* 文字の大きさを24pxにする */
  font-weight: bold; /* 文字を太字にする */
}

この例では、h1要素に対して、文字色を青色、文字の大きさを24px、文字を太字にするスタイルが適用されます。

子孫セレクタの例：header div p

    <header>
        <div class="section">
            <h1>メインタイトル</h1>
            <p>この段落は、header内のdiv内にあります。</p>
            <div class="sub-section">
                <p>この段落も、header内のdiv内にあります。</p>
            </div>
        </div>
        <div>
            <p>この段落はheader内のdiv内にあります。</p>
        </div>
    </header>
    <div class="another-section">
        <p>この段落はheader内にはありません。</p>
    </div>

header div p {
    background-color: yellow; /* 背景色を黄色に設定 */
}

この例では、header内のdiv内のP要素に対して背景色を黄色にするスタイルが適用されます。

隣接セレクタの例：h1 + p

<h1>タイトル</h1>
<p>この段落がスタイルされます。</p>
<p>この段落はスタイルされません。</p>

h1 + p{
   text-decoration:underline; /* 文字に下線をつける */
}

この例では、h1 要素のすぐ後に続く p 要素のみにテキストに下線スタイルが適用されます。

一致セレクタの例：h1 ~ p

<header>
        <h1>見出し1</h1>
        <p class="apply-style">この段落は、h1の後に続く兄弟のp要素です。スタイルが適用されます。</p>
        <p class="apply-style">この段落も、h1の後に続く兄弟のp要素です。スタイルが適用されます。</p>
        <div>
            <p class="no-style">この段落は、h1の後に続く兄弟のp要素ではなく、div内にあります。スタイルは適用されません。</p>
        </div>
    </header>
    <section>
        <h2>見出し2</h2>
        <p class="apply-style">この段落は、h2の後に続く兄弟のp要素です。スタイルは適用されません。</p>
    </section>
    <footer>
        <h1>見出し1 in Footer</h1>
        <p class="apply-style">この段落は、footer内のh1の後に続く兄弟のp要素です。スタイルが適用されます。</p>
        <p class="apply-style">この段落も、footer内のh1の後に続く兄弟のp要素です。スタイルが適用されます。</p>
    </footer>

h1 ~ p {
    font-family: Arial, sans-serif; /* フォントをArialに設定 */
}

この例では、h1の後に続くすべての兄弟p要素にフォントの種類をArialにするスタイルが適用されます。

2. プロパティ（Property）

スタイルの種類や属性を指定します。プロパティは、どの属性を変更するかを決定します。

例: color, font-size, margin

例文: colorは、文字の色を指定します。

3. 値（Value）

値は、プロパティに具体的な設定を与えるものです。プロパティの種類によって、使用できる値の種類が異なります。
例えば、colorプロパティには、#FF0000のような16進数カラーコードや、redのような色名などを指定できます。

まとめ

CSSのセレクタ、プロパティ、値は、Webページの見た目を装飾するための基本的な要素です。これらの要素を理解することで、より自由度の高いデザインを作成することができます。
下記URLのサンプルがわかりやすいのでブックマークをしておく事をおすすめします。

参考：CSSセレクタのチートシート｜37パターンを一覧で解説