ＣＳＳで書いた色が反映されません。

画像の見本に近づけるようにしています。
以下のコードを書いていますが、どこが違うのでしょうか。

HTML
1コード
2index.html
3<!DOCTYPE html>
4<html>
5  <head>
6    <h1>ferret[フェッレット]</h1>
7  </head>
8    <body>
9      <div class="main">
10        <h1>  Ｗｅｂデザイナー必見！コーディングを気軽に練習できる無料Ｗｅｂサ―ビスまとめ|ferret[フェレット」]</h1>
11        <p>今回は、コーディングをゼロから初めたい方でも気軽に学べる日本語対応しているコーディング学習サービスをまとめました。Webデザイナーを目指している方、Webデザイナーとしてスキルアップを担っている方はぜひチェックしてみてください。</p>
12      </div>
13    </body>
14</html>
15
16stylesheet.css
17```HTML
18h1 {
19  color: #02ccba;
20  font-size: 5px;
21}
22.main h1{
23  color:#2C4A8A;
24  font-size: 10px;
25}
26.main p{
27  font-size: 5px;
28}

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

googlechromで色が反映されない。


### 該当のソースコード

```ここに言語名を入力
ソースコード

試したこと

ここに問題に対して試したことを記載してください。

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

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

kei344

2018/06/18 04:44

質問テンプレートの文字列が残ってしまっていますので、不要な部分は削除してください。PCであれば記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。

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

回答3件

ベストアンサー

他の方の回答と変わらないですが、外部CSSの場合linkタグでスタイルシートの読み込みをしなければ、スタイルシートは適用されません。
指定方法は大きく分けて３種類あります。

外部CSSを読み込む（今回はおそらくこれ）
head内にstyleで記述
インラインでの記述

参考サルワカ-CSSはどこに書く？外部CSSファイルの読み込み方＆インラインでの書き方

投稿2018/06/18 06:27

dit.

総合スコア3235

sawa0410

2018/06/23 04:26

ありがとうございます！無事できました！！わかりやすかったです！

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

index.htmlの<head></head>にcssファイルとの関連を記述します。
なお、cssファイルは紛らわしいのでstylesheet.cssからbase.cssに変更してあります。

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="base.css" type="text/css" />　...追加行 <h1>ferret[フェッレット]</h1> </head> <body> <div class="main"> <h1> Ｗｅｂデザイナー必見！コーディングを気軽に練習できる無料Ｗｅｂサ―ビスまとめ|ferret[フェレット」]</h1> <p>今回は、コーディングをゼロから初めたい方でも気軽に学べる日本語対応しているコーディング学習サービスをまとめました。Webデザイナーを目指している方、Webデザイナーとしてスキルアップを担っている方はぜひチェックしてみてください。</p> </div> </body> </html>

投稿2018/06/18 05:09