CSSを適用するファイルを開きます。
そこで、適用したいスタイルを下記のサンプルコードの
ように書きます。下記はcssファイルです。
test.css
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#container{ background-color: black; } #container p{ color:red; } #container #news p{ color:greenyellow; } #container #news address{ color:yellow; } |
＊CSSファイルにスタイルの適用を書くとき、<style>タグは
書く必要がありません。
そして下記のHTMLファイルのコード
<title></title>の直後に
<link rel="stylesheet" href="test.css"> と書いています。
これがCSSを読み込む処理です。そうすることで、CSSとHTMLを分離させたうえでCSSに書いたスタイルをTMLファイルに適用するこができます。
test.htmlファイル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>HTMLのメモ</title> <link rel="stylesheet" href="test.css"> </head> <body> <div id="container"> <p>本日のニュース</p> <div id="news"> <p>株式会社＊＊＊の新製品の発表・・・</p> <p>執筆者<address>ベスナ</address></p> </div> </div> </body> </html> |