HTMLの外部参照CSSファイルが有効にならない理由分析・解決方法

フロントエンド担当として、数日前から 今日、ふと、納得していたことですが、問題があることに気づきました。例えば、cssディレクトリの下にcssのスタイルドキュメント：style.cssを書いたのですが、その中に一文だけあったのです。
そして、htmlファイルの中に入って、この外部cssを導入します。

ブラウザで更新してください。うわー、かお、反応しない、動かない。このパスを何度か確認して問題がないことを確認し、クロームのF12デバッガーを開く。ブラウザがcssファイルを読み込んだことを確信し、次にそのファイルを開いてみると。

コードが文字化けするなんて。エンコーディングは書式の問題だと思うのですが、解りません。フロントエンドのパートナーに相談したところ、現在のページのエンコーディングは以下のように検出されました。

UTF-16LE エンコーディングが表示されます。
その後、sublime editor:を使って、ローカルのcssファイルのエンコード形式をこのutf-16LEに変更してみました。

cssのコードを書き換えた。保存して実行。そして、確かにそれは動作します。
しかし、私が指定したhtmlはutf-8で、cssはutf-16で、私を悩ませた。そこで、再度解決策を求めました。それは解決できる、簡単だ。
cssをutf-8に戻し、中のコードを編集します。このcssをhtmlに導入する際に、エンコード形式を宣言すればOKです。

つまり、linkタグにcharset="utf-8"という属性を追加すればOKです。本当に簡単なことなのですが...。

HTMLの外部参照CSSファイルが効かない原因分析と解決策をここで紹介しますので、お役に立てれば幸いです。