CSSでfont-weightの調整を、クラス名だけの指定では実行できない理由

Question

前提・実現したいこと

プログラミングをプロゲートで学び始め、現在HTMLとCSSについて、勉強しています。
なぜ自分の考えたコードで実行できなかったのか、その理由が知りたいです。

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

　　

HTMLに以下のコードを入力し、この文字の太さをfont-weightをCSSで調節したいのですが、自分が考えるCSSのコードでは実行できませんでした。

該当のソースコード

<div class="lesson-title">
      <h2>Learn Where to Get Started</h2>
　　</div>

試したこと

CSSで

.lesson-title{
font-weight:normal;
}

では、（↑自分の考えは）実行できませんでしたが

.lesson-title{
font-weight:normal;
}

この下のコードでは実行できました。

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

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

Comments

[yoshinavi]

「解決済」で申し訳ないのですが、提示のCSSに「違い」はあるのでしょうか？

[HirokiSasa]

すみません！！！僕の間違いでした！正しくは、

.lesson-title｛
font-weight:normal;
｝

.lesson-title h｛
font-weight:normal;
｝

下のコードでは、できて上のコードではできませんでした！
その理由が知りたいです！

[yoshinavi]

上のコードで、「h」が付いたコードは効いていますか？

[HirokiSasa]

再度の間違いすいません！！

.lesson-title h2｛
font-weight:normal;
｝

h2を付け足したコードでは効きました！

[yoshinavi]

なるほど、ご丁寧にお応え頂きありがとうございます。

効く・効かないの理由としては、「kei344」さんの回答のとおり、各ブラウザ（ChromeやEdge等）はHTMLの各タグに対して、何らかのCSS設定を持っています。
これを「デフォルトスタイル」と言います。

その中に、h1～h6のタグに対しも、サイズやウェイト（太さ）も設定されています。

今回のコードは、上側のh2指定が無いコードだと、デフォルトスタイルの無い、他のテキストには適用されるのですが、下側のコードのように、h2に対して指定しない限り、h2には、デフォルトのスタイルが適用されます。

このようなデフォルトスタイルをなくしたり、自分なりのスタイルに最初から設定する方法が、「CSS リセット」と言われるモノです。

検索すると、何種類も方法や内容が解説されたサイト等がありますので、理解しやすいサイトで、いろいろなリセットを試してみてください。

Answer 1

h2要素のスタイルを指定するのであれば以下の様にしましょう。

<style>
.lesson-title h2{
font-weight:normal;
}
</style>

Answer 2

各ブラウザにはデフォルトでスタイル指定がされており、それが影響しているのでは。
デベロッパーツールで確認してみてください。

【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/

【初心者向け！Chromeの検証機能（デベロッパーツール）の使い方】
https://saruwakakun.com/html-css/basic/chrome-dev-tool