cssコーディング中で「#index」を付けると反応しなくなってしまう

Question

前提・実現したいこと

コーディングを初めて３日目です。
「HTML＆cssとWEBデザインが１冊できちんと身に付く本」というのを参照しながら
HPコーディングに取り組んでいます。

本の指示でcssの中で「#index」をh1/p/footerの前に付けるというのがあるのですが
「#index」を付けるとcssが反応しなくなってしまい、反応させたいです

発生している問題・エラーメッセージ

例えば、h1の前に「#index h1」を付けるとCSSコーディングが上手く反応しません。
フォントサイズ・フォントカラーなど全てが反応しなくなってしまいます。

該当のソースコード

「#index h1 {
font-size: 100px;
line-height: 1;
color: #ffffff;
margin-bottom: 50px;
}

試したこと

index.htmlを作成するなどをしました

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

#index のCSSセレクタの意味は理解してますか。
<div id="index"> ・・・というようにidがついたHTML要素を指定するものです。

#index h1だと、下記のようにidが index を親要素にもつ h1 要素が対象になります。

<div id="index">
  <h1>〇〇〇〇</h1>
</div>

上記は一例ですが、このような親子関係になっていないということが、CSSが適用されない原因でしょう。

その辺の説明が本に書いてあるはずなので、前からもう一度読み直しましょう。