CSSリセットのお呪いと＋α

ブラウザのuser agent stylesheet

これがスタイルの既定値です。厄介なのは、ブラウザによって既定値が異なることです。
そこで余白や文字の設定を全てリセットしておきます。事例はいっぱいありますが大差ありません。

引っ張ってきたリセットCSSに追記していること

html {
	/* トップのhtmlにwidth指定を行っておかないと、子要素のbodyのwidth指定で%指定が効きません。 */
	width: 100%;
	height: 100%;
	/* サイト全体で統一ならリセットCSSの中に記述しておく */
	font-size: 0.9em;
	font-family: arial, sans-serif;
}

色の指定を行っておきます。

色を纏めて指定しておくで、サイト全体のカラー調整が楽になります。

:root {
--basic-text-color: rgb(0,0,30);
--bright-text-color: rgb(100,100,255);
--outline-text-color: white;
--underline-color: rgb(52,70,255);
--active-background-color: rgb(147,165,217);
--dark-background-color: rgb(70,95,171);
--basic-background-color: rgb(93,116,186);
--bright-background-color: rgb(201,211,242);
--clear-background-color: rgb(225,232,252);
--link-text-color: rgb(0,0,255);
--link-hover-background-color: rgb(0,0,255);
--link-hover-text-color: gb(255,255,255);
--outlined1-background-color: rgb(237,242,255);
--outlined2-background-color: rgb(168,183,227);
--outlined3-background-color: rgb(70,95,171);
--mosaic_container-color: white;
--menu-background0: rgb(93,116,186);
--menu-background1: rgb(168,183,227) 0%, rgb(147,165,217) 10%, rgb(70,95,171) 100%;
--top-img-background: 0deg, rgba(201,211,242, 0.95), rgba(201,211,242, 0.6) 30%;
}