HTML とCSSの連携が出来ない問題

前提

プログラミング初心者です。Bracketsを使用して、本で学んだ通りにコードを書いてみましたが、連携していないようです...
過去の質問も参考に、問題解決に努めましたが、解決する事ができませんでした。どんな些細な事でも構いませんので、ご意見お聞かせ頂けますと幸いです。

実現したいこと

HTMLとCSSを連携させたい。

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

CSSの色や、フォントを変更しても変化がないため、連動していないものと思います。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<tiltle>サンプルページ</tiltle>
6<link href="css/style.css" rel="stylesheet">
7</head>
8<body>
9  
10  <!-- header始まり-->
11  <header>
12      <div class="logo">
13            <a href="index.html"><img src="images/logo.png" alt="SNAPPERS"></a>
14      </div>
15      <nav> 
16        <ul class="global-nav">
17          <li><a href="portfolio.html">Portfolio</a></li>
18          <li><a href="about.html">About</a></li>
19          <li><a href="contact.html">Contact</a></li>
20        </ul>                
21      </nav>
22  </header>
23    <!-- header終わり-->
24  
25    <!-- wrap始まり-->
26  <div id="wrap">
27    <div class="content"></div>
28  </div>
29    <!-- wrap終わり-->
30  
31    <!-- footer始まり-->
32  <footer>
33    <small>(c)2017 Hattori-studio.</small>
34  </footer>
35    <!-- footer終わり-->
36  
37</body>
38
39
40</html>

該当のソースコード

CSS
1@charset "utf-8;"
2  
3  body{
4    margin:0;
5    padding:0;
6    background-color: #cccccc;
7    color:#333333;
8    font-size:15px;
9    line-height:2;
10}
11
12p,h1,h2,h3,h4,h5,h6 {
13  margin-top:0;
14}
15
16img{
17  vertical-align:bottom;
18}
19
20ul{
21  margin:0;
22  padding:0;
23}
24
25a{
26  color:#3583aa;
27}
28
29a:visited{
30  color:#788d98;
31}
32

試したこと

フォルダの階層に間違いがあるのかを確認しました。

ご指摘頂いた通り、cssのフォルダが、大文字でCSSとなっていたため、小文字に直し、再度試してみました。
イメージ説明

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

本の見本と見比べてみましたが、違いが分かりませんでした。

以下が開発者ツールのスクリーンショットです。
イメージ説明

見本のソースコード（私のコードはまだ途中ですので見本は、少し先の内容も含んだものです）

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>サンプルページ</title>
6<link href="https://fonts.googleapis.com/css?family=Bitter:400,700" rel="stylesheet">
7<link href="css/style.css" rel="stylesheet">
8</head>
9<body>
10  
11  <!-- header始まり -->
12  <header>
13    <div class="logo">
14      <a href="index.html"><img src="images/logo.png" alt="SNAPPERS"></a>
15    </div>
16    <nav>
17      <ul class="global-nav">
18        <li><a href="portfolio.html">Portfolio</a></li>
19        <li><a href="about.html">About</a></li>
20        <li><a href="contact.html">Contact</a></li>
21      </ul>
22    </nav>
23  </header>
24  <!-- header終わり -->
25  
26  <!-- wrap始まり -->
27  <div id="wrap">
28    <div class="content">
29    </div>
30  </div>
31  <!-- wrap終わり -->
32  
33  <!-- footer始まり -->
34  <footer>
35    <small>(C)2017 Hattori-studio.</small>
36  </footer>
37  <!-- footer終わり -->
38  
39</body>
40</html>

見本のソースコード（見本は、少し先の内容も含んだものです）

CSS
1@charset "utf-8";
2
3body {
4  margin: 0;
5  padding: 0;
6  background-color: #cccccc;
7  color: #333333;
8  font-size: 15px;
9  line-height: 2;
10}
11
12p,h1,h2,h3,h4,h5,h6 {
13  margin-top: 0;
14}
15
16img {
17  vertical-align:bottom;
18}
19
20ul {
21  margin: 0;
22  padding: 0;
23}
24
25a {
26  color: #3583aa;
27  text-decoration: none;
28}
29
30a:visited {
31  color: #788d98;
32}
33
34a:hover {
35  text-decoration: underline;
36}
37
38header {
39  width: 960px;
40  height: 100px;
41  margin: 0 auto;
42}
43
44.logo {
45  float: left;
46  margin-top: 50px;
47}
48
49.global-nav {
50  float: right;
51  margin-top: 60px;
52}
53
54.global-nav li {
55  float: left;
56  margin: 0 20px;
57  font-size: 20px;
58  list-style: none;
59  font-family: 'Bitter', serif;
60}
61
62.global-nav li a {
63  color: #ffffff;
64}
65
66.global-nav li a:hover {
67  border-bottom: 2px solid #ffffff;
68  padding-bottom: 3px;
69  text-decoration: none;
70}
71
72#wrap {
73  clear: both;
74}
75
76.content {
77  width: 960px;
78  margin: 0 auto;
79}
80
81footer {
82  text-align: center;
83  color: #ffffff;
84  padding: 20px 0;
85}
86
87footer small {
88  font-size: 12px;
89}

m.ts10806

2022/09/16 08:41

コードは画像では手元で確認できませんのでテキストでマークダウンのcodeにてご提示ください

Shido

2022/09/16 10:27

質問の作法を心得ておらず、大変申し訳ございませんでした。修正を加えました、ご確認頂けますと幸いです。

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

回答1件

ベストアンサー

大文字と小文字は別です

投稿2022/09/16 08:42

編集2022/09/18 21:48

m.ts10806

総合スコア80695

回答へのコメント

Shido

2022/09/16 10:32

申し訳ございません、どちらの箇所をご指摘いただいているのか教えて頂いてもよろしいでしょうか？参考書とは、見比べたのですが分かりませんでした...

Shido

2022/09/16 10:36

今気づきました、フォルダ名が大文字になっておりました！！修正されるか、試してみます。

Shido

2022/09/16 10:56

修正されませんでした..... 引き続き、探してみます。

m.ts10806

2022/09/16 11:30

「修正される」というのがちょっと表現として不適当だとは思うのですが、ブラウザで動作確認したときに、開発ツールコンソールにエラー等出ていませんか？「CSSがリンクできていない」なら404 Not Foundが出ています。出てないならキャッシュかもしれません。ひとまずbodyの背景色など「明らかに確認できるもの」などミニマムなコードで確認してみてください。

Shido

2022/09/16 13:33

表現が適切でなく、申し訳ございません。開発ツールのスクリーンショットを新たに、「補足情報」に添付致しました。見慣れていないページのため、把握しきれていない可能性もございますが、エラーは表示されていないようです。 404 Not found が出ないので、リンクされてはいるという事だと思います... ネットで調べた方法で、google 左上の「再読み込み」のボタンを右クリックし、「キャッシュをなくし、ハードリロード」を選択しましたが、変化はありませんでした。またBracket を使用しコードを書き込んでおりますので、編集後（背景色を変化させる等）、ライブプレビューボタンを押し、毎回Googleを起動しており確かめておりますが変化はありませんでした。親身にご相談頂き大変ありがとうございます。解答が的を得ていない様でしたら大変申し訳ございません。

m.ts10806

2022/09/16 18:47

ひとまず @charset "utf-8;" ↓ @charset "utf-8"; https://developer.mozilla.org/ja/docs/Web/CSS/@charset

m.ts10806

2022/09/16 18:50 編集

CSSにとっての終端　;　がないことで「@charsetが終わってない」と判定されているのだと思います。ただ、私もBracketsは利用することがありますが、このCSSはBracketsのチェックでFatal error出てますね。 CSSLintに引っ掛かってます。

Shido

2022/09/18 11:24

コメントありがとうございます、プログラミン学習初期段階で躓きそうですので、とりあえずこの単元は見本を使い次に進んでみようと思います。親身に相談に乗って頂きありがとうございました。

m.ts10806

2022/09/18 21:50

＞低評価された方理由をコメントを。＞質問者さん書いた通りに動くのがプログラミングなので、1つ1つ確認しながらやってみてください。「あぁここかぁ！」みたいなのが多いです（「参考書の通り書いたつもり」でも、それは”つもり”で自身が知ってるそれっぽい記号にかえてるパターンとかよくあるので）ひとまず質問受付中のままですので、進まれるのでしたらいったん解決済みにしてもらえると。

Shido

2022/09/19 13:13

本当に、大変助かりました。ありがとうございました。低評価をつける方の理由は分かりませんが、僕にとっては間違いなくベストアンサーでした！！初めたばかりですが、ご指摘頂いたとおり一つずつ確認しながら書いていこうと思います。

m.ts10806

2022/09/20 08:15

解決されたようで何よりです。追いかけまわして嫌がらせをするような人が一部いるので、運営に対処を適宜依頼してるところです。投稿編集してコメントで依頼することで催促はしてるので、その催促に応じない＝嫌がらせ　と断定しています。 ※ちゃんと指摘してくれる人は一定いるし、真面目に回答してるので何が間違ってるのか聞かなきゃわからない。

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