ＣＳＳにて色変更を行いたいがうまくいかない

画像のようにＣＳＳで色の指定をしたにもかかわらず、ブラウザで出力すると色が変わっていません。pのクラスをsample01にして試したりもしましたが結果は変わりませんでしたどうしたら良いでしょうか？
自動保存がうまくされていないのかと思い、保存をしても変わりませんでした。

html
コード<h1>山田太郎です。</h1>
        <p>プログラミング初学者です</p>
        <ul>
            <li>1.私がプログラムをはじめるまで</li>
            <p><li>2.プログラムはおもしろい？</li></p>
            <li>3.プログラマーになる決意</li>
        <img src="img/日本家屋.jpg">
        <p class="sample01">楽しい！ワクワクする！</p>
        </ul>
``````ここに言語を入力
CSS
コード.sample01{
  color:red;
}

m.ts10806

2020/10/26 23:44

コードは画像で提示されてもコピペできません。テキストでマークダウンのcode機能にてご提示ください

shinya2980

2020/10/27 04:02

アドバイスありがとうございます。次回の質問からそうさせていただきます。勉強になりました。

m.ts10806

2020/10/27 04:57

質問は編集できます。いつくるか分からない「次回」に持ち越すのではなく今やりましょう

shinya2980

2020/10/27 07:07

ご指摘ありがとうございます。では、用事が終わったので今から編集したいと思います。今後ともご指摘いただけるとありがたいです。

m.ts10806

2020/10/27 07:16

マークダウンのcode機能にてご提示ください。 dit.さんの回答のようになります。

m.ts10806

2020/10/27 07:16

画像のときとコードかわってるんですが…

m.ts10806

2020/10/27 07:17

cssは外部ファイルですか？それも分かるように提示してください

shinya2980

2020/10/27 07:20

画像でいいですか？

shinya2980

2020/10/27 07:21

何度も改行して申し訳ないです。コードが変わっているのは、わからない間に少しでも勉強を進めようと思い、次のところを勉強していたからです。

m.ts10806

2020/10/27 19:54

勉強と質問は全く別物です。回答と整合性がとれなくなるのでやめてください。

shinya2980

2020/10/27 22:30

以後気を付けたいと思います。今回はありがとうございました。

行動規範の内容に同意します

回答4件

h1クラスを持った要素は無いように見えます。
.h1ではなくh1ではないでしょうか？

もちろん、cssが読み込まれていないといけませんので以下のような形にする必要があります。

html
1<!-- 各種宣言省略 -->
2<html>
3  <head>
4    <link rel="stylesheet" href="style.css">
5  </head>
6  <body>
7    <h1>TITLE</h1>
8  </body>
9</html>

css
1h1{
2  color:red;
3}

progateかと思うのですが、HTML & CSS 学習コース初級編→レイアウトを作ろう！→11. HTMLの全体構造（2)まで行ってようやくスタイルシートを読み込む記述を書き始めます。
オンラインエディターではこの辺りの記述を省略している部分があるため、初めから手元のエディターで学習するのは難しいです。
まぁprogateの文面とはちょっと違うので学習後の練習かもしれませんが、どちらにしろ先ほどの章を確認してください。

<li>を<p>で囲っているのも気になります。
また、コードの提示は画像ではなくコードそのものを文字で記載してください。
質問にコピペし、コードの部分を選択して<code>というボタンを押すとコードブロックに変換されます（前後にバッククオートがつきます）。

投稿2020/10/27 00:01

編集2020/10/27 00:04