CSSの基本的な書き方
基本的には下記のように記載します。
セレクタ {プロパティ: 値;}
セレクタとは、どの要素に対してスタイルを適用させるかを指定するものです。
例えば、「h1」や「id」、「class」などです。
セレクタは、プロパティと値をかぎ括弧 { }で囲んで書きます。
プロパティとは、そのセレクタに付随するもので、「color」や「font-size」、「font-weight」などがあります。
プロパティと値の間はコロン「:」で区切り、「;」で区切ることでプロパティをいくつも指定できます。
下記は、「h2」に「color: #ff0000(赤字)」と「font-weight: bold(太字)」を指定した例です。
h2 { color: #ff0000; font-weight: bold; }
下記のAはCSSが適用される前のh2です*。
A:「CSS適用前のh2」
下記のBはCSSが適用された後のh2です。
B:「CSS適用後のh2」
* 厳密に言うと製作者のCSSで何も指定していない場合は、ブラウザの持つデフォルトのCSSが適用されます。
セレクタもカンマ「,」で区切ることで複数のセレクタに同じプロパティを適用することができます。
下記は、h1~h6タグを初期化しています。
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; border: 0; font-size: 100%; font-style: normal; font-weight: normal; line-height: 100%; }
CSSをHTML内に直接記述する書き方
headタグ内に下記のように記載します。
<head> <style type="text/css"> <!-- h2 { color: #ff0000; font-weight: bold; } --> </style> </head>
CSSを外部ファイルに記述する書き方
headタグ内に下記のように記載します。
<head> <link rel="stylesheet" type="text/css" href="css/import.css" /> </head>
「CSSの書き方のルール」もご参照ください。