CSSは外部ファイルから読み込ませるのが一般的なのですが、HTML内に直接記述して適用することもできます。たとえば、応急処置や外部ファイルにするまでもない一度限りの設定のような場合です。
この場合、CSSは記述されたHTMLファイル内のみ有効となります。
このページのもくじ
HTMLのヘッダーに書く
HTMLのヘッダー内に<style> </style>タグを書き込みます。
ここで指定したスタイルはファイル内の全ての要素に適用できます。
例）ファイル内の全てのリンク文字色を緑色にする
<html>
<head>
<style type="text/css">
a {color:green;}
</style>
</head>
<body>
<a href="#">リンク文字が緑色になる</a>
</body>
</html>HTMLのタグ自体にstyle属性を直接書き込みます。
この場合はstyle属性を指定したタグのみ適用されます。
例）divタグ内の文字を太字にして緑色にする
<div style="color:#00aaaf; font-weight:bold;">あああ</div>まとめ
適用したい範囲によって使い分けます。
- CSSをサイト全体に適用したい。複数のファイルで共通な指定をしたい。
→ 外部ファイルにまとめる - CSSをひとつのファイル内だけで適用したい。
→ ヘッダー内に<style>タグで囲って記述する - CSSを特定の箇所に１回だけ適用したい。
→ タグ内にstyle属性を直接記述する
私はテストページを作るときはHTML内に直接記述して、あれこれテスト。
指定内容が決まったら、外部ファイルにまとめていくようにしています。