CSSが反映されない

CSSが反映されなかった時の対処法

私が初めてwebサイトを作った時にあれっ？てなった事です。
ググっても意外と初歩的すぎて中々出てこなかったのでメモしておきます。

背景色を以下のようにしたかったのですが...

body{background-color:aquamarine;}

実際は背景が真っ白のままでした。

検証ツールを確認すると自分で設定したはずの記述が打ち消されていました。

競合しているのはbootstrapのbodyタグです。
こいつに打ち勝つ必要があります。

対処法１　bodyにクラスをつける

<bodyclass="hoge">

body.hoge{background-color:aquamarine;}

すると、body.hogeの方が優先度が上がります。

bootstrapに勝てました。
でもたくさんあるファイルのbodyにクラスをちまちまつけるのは面倒です。

対処法2 Bootstrapを先にロードしておく

後出しジャンケン的なイメージです。
先にbootstrapを、後にstyle.css(今回反映させたいファイル)をロードしました。後にロードしたファイルが優先的に反映されました。

<scripttype="text/javascript"src="./../vendor/twbs/bootstrap/dist/js/jquery-3.5.0.js"></script><scripttype="text/javascript"src="./../vendor/twbs/bootstrap/dist/js/bootstrap.js"></script><linkrel="stylesheet"href="./../vendor/twbs/bootstrap/dist/css/bootstrap.css"><linkrel="stylesheet"href="./../stylesheet/style.css">

対処法１よりシンプルです。

対処法３　!importantをつける

上記でできなかったらこの方法です。

body{background-color:aquamarine!important;}

この方法でもbootstrapに勝てました。

以上が、cssの記述が反映されなかった時に試したことでした。

何かご指摘あればコメントよろしくお願いします。