複数のdivを設けた際のCSSの記載方法。。。

Question

前提・実現したいこと

下のソースコード部分のfont-weight:normal;をWhere to Get Started!の部分に反映させたいです。
なぜ.headings{ではなく、.headings h2{へ書かなければいけないのかがわからず困っております。
.headingsへ指示すれば、そのまま.headings h2{にも反映されるのでは。。。？と思っていたのですが。

宜しくお願い致します。

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

超初心者でHTML/CSSをProgateにて勉強し始めました。
複数のdivを設けた際に、どのようにCSSを記載すれば、どの部分に反映されるかがわからず困っております。

該当のソースコード

ソースコード

HTML
 <div class="lesson-wrapper">
    <div class="container">
     <div class="lessons">
      <div class="headings">
        <h2>Learn Where to Get Started!</h2>
      </div>

CSS
.headings{
  margin-top:80px;
  margin-bottom:50px;
  color:#5f5d60;
}

.headings h2{
   font-weight:normal;
}

Comments

[m.ts10806]

コードは
```
で囲う必要があります。
投稿前にプレビュー確認してください

Answer 1

なぜ.headings{ではなく、.headings h2{へ書かなければいけないのかがわからず困っております。

h2にはブラウザのデフォルトスタイルシートがかかっていますので、h2自体のfont-weightを制御するには、外側ではなく直接h2要素にかけるようなスタイルが必要となります。

Comments

[takaboy]

簡潔明瞭かつ迅速なご回答ありがとうございます！
h２にデフォルトスタイルシートがかかっているということを知りませんでした！
解決です⭐️