atomでcssを読み込みたい

前提・実現したいこと

超初心者です、今ドットインストールでhtmlをやっています、cssの入門に入ったのですがindex.htmlでcssが読み込めずgoogle chromeに反映されません、動画の手順通りに行っています、階層も合わせています。なぜなのでしょうか？

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

index.htmlにcssが読み込めない。
エラーメッセージ


### 該当のソースコード
コード
<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>昌志のポートフォリオサイト</title>
  <link rel="icon" href="fabicon.ico">
  <meta name="description" content="昌志のポートフォリオサイトです。"
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
    <nav>
      <ul>
        <li>
          <a href="index.html">
           HOME
        </a>
        </li>
        <li>
          <a href="about.html">
            ABOUT
          </a>
        </li>
      </ul>
    </nav>
    <img src="header.png" width="400" height="130" alt="ヘッダー画像">
  </header>
<section>
  <img src="taro.png" width="140" height="140" alt="太郎のアイコン">
  <h1>平塚昌志</h1>
  <p>UI/UXデザイナー見習です</p>
  <section>
    <img src="work1.png" width="400" height="260" alt="勇者ゲーム">
    <h1>勇者ゲーム</h1>
    <p>楽しいアプリです。楽しいアプリです。楽しいアプリです。
      楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。
      楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</p>
  </section>

  <section>
    <img src="work２.png" width="400" height="260" alt="宝探しゲーム">
    <h1>宝探しゲーム</h1>
    <p>楽しいアプリです。楽しいアプリです。楽しいアプリです。
      楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。
      楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</p>
  </section>

  <section>
    <img src="work３.png" width="400" height="260" alt="神経衰弱">
    <h1>神経衰弱</h1>
    <p>楽しいアプリです。楽しいアプリです。楽しいアプリです。
      楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。
      楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</p>
  </section>
 </section>
<footer>
  <ul>
    <li>
      <a href="mailto:hoop@icloud.com" target="_blank">
        <img src="mail.png" width="20" height="20" alt="メール送信">
      </a>
    </li>
    <li>
      <a href="https://dotinstall.com" target="_blank">
        <img src="blog.png" width="20" height="20" alt="ブログサイトへ">
      </a>
    </li>
    <li>
      <a href="https://dotinstall.com" target="_blank">
        <img src="photos.png" width="20" height="20" alt="写真サイトへ">
      </a>
    </li>
  </ul>
</footer>
<p>(c) masashi hiratsuka</p>
</body>
</html>

css
h1 {
  color: red;
}
```ここに言語名を入力
ソースコード

試したこと

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

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

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

kei344

2019/02/22 16:23

（質問文は編集できます）ソースコードを提示してください。

退会済みユーザー

2019/02/22 16:39

動画の通りにやったつもりでありながら、実は間違っているというだけのことだと思います。

masashi_com

2019/02/22 16:55

もう一度やってみます

m.ts10806

2019/02/22 20:47

質問は編集できます。コードを提示してください。動画の通りと言っても動画からコードをコピペできるわけではないので、構文を決まりの通りではなく自分が知ってるものや認識した別の記号などに置き換えてやってしまいがちです。特に初心者の方には多く、同様の質問も何度も上がっています。

CHERRY

2019/02/22 22:42

html と css の内容。ファイルの配置を質問を編集して追記していただけないでしょうか？

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

回答1件

ベストアンサー

HTML
1<!--                                                            ↓「>」が無い -->
2  <meta name="description" content="昌志のポートフォリオサイトです。"
3  <link rel="stylesheet" href="css/styles.css">

投稿2019/02/23 04:45

kei344

総合スコア69407