CSSは、大きく分けると以下3通りの記述場所があります。
- HTMLのhead内
- HTMLのタグ内
- 外部ファイル
それぞれの記述方法についてご説明いたします。
HTMLのhead内
HTMLのhead内に記述する場合、HTMLの<head>～<head>の間に<style>～</style>で囲んで記述します。
<head>
<meta charset="UTF-8">
<title>CSSの基礎講座</title>
<style>
div{
color:green;
}
</style>
</head>
この例では、「div要素の色を緑に変更する」という内容になっています。
HTMLのタグ内
HTMLのタグ内に直接スタイルを記述することもできます。
<div style="color:red;">CSSの基礎講座</div>
外部ファイル
HTMLのファイルとは別のファイルを用意し、スタイルシートとして参照するファイルの場所をhead内で指定することもできます。
<head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css" /> <title>CSSの基礎講座</title> </head>
link要素のrelには”stylesheet”、hrefにはCSSの場所を記述します。上記の例では、”style.css”という外部ファイルを参照しています。スタイルの内容は、style.cssの中に記述していきます。
このように、3通りの方法がありますが、外部ファイルに記述した方がHTMLも長くならずきれいにまとまるので、外部ファイルに記述することをおすすめします。ただ、スタイルの変更をさっと確認してみたい時は、headとかタグに直接書く方が早いですね。確認後、外部ファイルにコピーするというやり方が一番いいと思います。