どうも7noteです。cssを書く場所（書き方）は3つある話。
cssを書く時はCSSを書ける場所が3つあります。
- 1. HTMLのタグの中（インラインともいう）
- 2. style要素の中
- 3. 外部ファイル
1つずつ書き方や特徴を書いていきたいと思います。
またそれぞれの優先順位についても確認していきたいと思います。
1. 要素のタグの中（インラインともいう）
インラインの書き方
タグの中にstyle=" "と記述し、その中にcssを書いていく方法
<p style="font-size: 20px;">こんにちは！</p>
特徴
3つの中では一番優先順位の高い書き方で、外部ファイルでcssを読み込んでいたとしてもインラインで書いたスタイルが優先して適応されます。（!importantは除く）
優先順位が高い事と、各所バラバラに記述が必要なため、変更を入れにくく開発・管理がしにくいです。
HTML要素のタグ内に長いcssを書くわけにはいかないので、
使いどころとしては一時的には確認用・javascriptで動的に書かれる場合などが多いかなと思います。
一般的には他の2つに比べてこの書き方が使われることは少ないです。
2. style要素の中
style要素での書き方
<style></style>のタグを用意し、この中にcssを書いていく方法
<style>
p {
font-size: 30px;
}
</style>
<p>こんにちは！</p>
特徴
htmlファイル内ですが、style要素を書くことでその中にcssが書けます。
そのhtmlファイルにある要素にだけcssが効くので、このhtmlファイルにだけ効くcssと思っていただくといいかなと思います。
初めて使うプロパティなどの動作チェックをするために簡易的にhtmlファイルを作って、
その中でstyle要素を使うことがありますが、あまり汎用はしてないです。
3. 外部ファイル
外部ファイルでの書き方
cssファイルを作成し、それをhtmlファイルから読み込む方法
<link rel="stylesheet" href="style.css">
<p>こんにちは！</p>
p{font-size:40px;}特徴
現在一番主流な書き方。メンテナンス性が高い
ほとんどのWEBサイトが、cssを外部ファイルから読み込んで作成されていると思います。
理由としては、「メンテナンス制が高い・複数のhtmlファイルで共通してCSSを使うことができる」などが人気の理由だと思われます。
新しくhtmlを使って何か物を作ろうと思っている場合は、htmlファイルとcssファイルはそれぞれ別々で管理することをおすすめします。
優先順位について
cssを書く場所について3つ紹介しましたが、もし同時に3つの書き方を行なった場合どれが優先されるのかについて。
こちら↓
最優先： HTMLのタグの中
優先 ： style要素の中、外部ファイル
もし同じp要素に対してそれぞれで別々の値を指定した場合、最も優先されるのは「HTMLのタグの中に書かれたcss」です。
そして、「style要素の中と外部ファイル」に関しては優先順位は同率で、後に読み込まれた方が優先されます。
たとえば以下の例では、p要素の文字サイズは40pxになります。
<style>
p {
font-size: 30px;
}
</style>
<link rel="stylesheet" href="style.css">
<p>こんにちは！</p>
p{font-size:40px;}htmlファイルを上から順番に読み込んだ時に、後にくるstyle.cssのcssが適応されることになります。
まとめ
結論としては、正直、外部ファイルにしかcssを書くことはほどんどありません。
でもいざ「ちょっと上書きして書きたいな」や「あれ、javascriptを入れた影響かcssが効かなくなったぞ」など、いざという時に知っていなければならない知識だと思います。
もし記事を読んでいるcssマスターの方がおられましたら、他の活用方法などについても情報を共有していただけると嬉しいです!
おそまつ！
（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）
