html中のcssコードを外部ファイル化したら表示が変わってしまいました

久しぶりに当サイトを使わせていただきます。
webサイト作り入門者のものです。

cssコードを含んだhtmlからcssを抜き出して外部ファイル化したところブラウザ上の表記が以前と変わってしまいました。
以前だと赤い四角が画面左上に出ていたところ。その部分が丸々空白になってしまいました。
以下がそのコードです

html
1<!DOCSTYLE html>
2<html>
3    <head>
4        <meta charset="utf-8">
5        <title>webpage with style</title>
6        <link rel="stylesheet" href="%E3%83%9C%E3%83%BC%E3%83%80%E3%83%BC.css">
7    </head>
8    <body>
9        <div id="square-red" class="square"></div>
10        
11        <div id="square-green" class="square"></div>
12        
13        <div id="square-blue" class="square"></div>
14        
15    </body>
16</html>
17
18

css
1<@charset "UTF-8";>
2#square-red {
3    background-color: red;    
4}
5#square-green {
6    background-color: green;
7    border-radius:50%;
8}
9#square-blue {
10    background-color: lightblue;
11    border-style: solid double dotted dashed;
12    border-width: 10px 5px 2px 1px;
13}
14.square {
15    width:100px;
16    height:100px;
17    margin:40;
18    float:left;
19}
20
21

不慣れな書き方で申し訳ありませんが、回答よろしくお願いします。

退会済みユーザー

2020/06/13 04:46

ブラウザのキャッシュの問題（いろいろトライしているうちに古い css ファイルがキャッシュされてしまい、css ファイルを書き直してもキャッシュから取得するので、書き直した結果が反映されない）というプリミティブな話はないでしょうね？

退会済みユーザー

2020/06/13 05:12

質問ありがとうございます。kei344様の書いてくださった回答の通りに変更したら元の表示に戻ったため、そういった問題ではないようです。ちなみにキャッシュの仕組みに明るくないのですが、もし回答者様の書いてくださったことが原因だった場合、どのように古いキャッシュを削除あるいは更新できるのでしょうか？

退会済みユーザー

2020/06/13 05:26

例えばですが、css ファイルの url に、202006131423 とかの日時やバージョン番号を表すクエリ文字列を追加するという手段があります。それが変わるとブラウザはキャッシュからではなく、新たにサーバーに要求をだして新しい css ファイルを取得してくれます。

退会済みユーザー

2020/06/13 07:34

回答ありがとうございます。cssファイルのurlは特にこちらで決めたわけではなく、htmlファイルをエディタで書いていた時に、予測されたファイルから選んだら勝手に出てきたものなのですが、urlはこちら側から変更ができるのでしょうか。それともファイル名自体を変えればいいだけですか?無知でお恥ずかしいですがなにぶん始めたてのものでどうぞご指導願います。

退会済みユーザー

2020/06/13 08:39 編集

> cssファイルのurlは特にこちらで決めたわけではなく、htmlファイルをエディタで書いていた時に、予測されたファイルから選んだら勝手に出てきたものなのですが、urlはこちら側から変更ができるのでしょうか。自分が作った css ファイルであれば自分の自由に命名できるのが普通です。質問者さんがどういう環境・ツールを使ってどういう作業をしているか不明なので、何か特殊事情があれば分かりませんが・・・今回のケースで、例えば 202006131423 という日時のクエリ文字列を付与するなら、 href="%E3%83%9C%E3%83%BC%E3%83%80%E3%83%BC.css?d=202006131423" としておいて、ファイルの中身を書き換えたら 202006131423 の部分を新しい日時に書き換えるということになります。（それが質問者さんの使っている環境で可能かどうかは分かりませんが）