ＣＳＳの使い方

  1. link要素で外部CSSファイルを読み込む。
  2. style要素で指定する。
  3. style属性で指定する。

CSSでHTML文書などにスタイルシートを適用する方法は、主にこの３点です。

例示

HTML文書でCSSを使う例示です。HTML は HTML5 を意識して、そこそこ前のブラウザでも解釈してくれる様にしているつもりです。

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>ＣＳＳの使い方 例示文書</title>
  6. <link rel="stylesheet" href="./sample.css">
  7. <style>
  8. body{ color: #ff0000; }
  9. </style>
  10. </head>
  11. <body style=" color: #ff0000; ">
  12. ここに文章を書く
  13. </body>
  14. </html>

HTML5 の記述

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html lang="ja">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <meta http-equiv="Content-Style-Type" content="text/css">
  6. <title>ＣＳＳの使い方 例示文書</title>
  7. <link rel="stylesheet" href="./sample.css" type= "text/css">
  8. <style type="text/css">
  9. body{ color: #ff0000; }
  10. </style>
  11. </head>
  12. <body style=" color: #ff0000; ">
  13. ここに文章を書く
  14. </body>
  15. </html>

HTML4.01 移行型 の記述

  1. @charset "UTF-8";
  2. body{ color: #ff0000; }

CSSファイルの記述例

link要素

  1. <link rel="stylesheet" href="./sample.css">

HTML文書に link要素を用いて、外部CSSファイルを読み込む。

外部ファイルなので、複数のHTML文書で共有ができます。HTML文書と別ファイルなので、文書自体ではなくデザインを変更したい時にCSSファイルの更新だけで済ませられる事があります。
複数のファイルに影響を与える事ができるので、影響範囲の把握は煩雑になりやすいです。

link要素は空要素の為に開始タグは必須で終了タグは禁止です。
rel属性はリンクされた文書の関係を示し、ここではCSSの記述なので stylesheet というリンク種別を記します。
href属性はリンクしたリソースの URL を記します。
media属性を用いて、メディアクエリにより条件付きで読み込む事も可能です。
HTMLの規則としてはhead要素内限定という訳ではありませんが、ブラウザの読み込み（描画処理）順序を考えるとhead要素内に記述してbody要素とは離すべきです。

style要素

  1. <style>
  2. body{ color: #ff0000; }
  3. </style>

style要素に CSS を記述する事により、 その HTML文書だけに影響を与えます。
その文書だけなので、 複数ページで構成されている場合に
ページ毎に記述しなければなりません。

style要素の記述できる箇所は簡単に言えばhead要素です。まぁHTML 4.01移行型ではというかだいたいのブラウザの動きからすれば動作するので気にする程の物でもない程度です。
ただ知識としてはstyle要素はhead要素に書くべきととりあえずは覚えて欲しいです。
さらに厳密に言うと、「メタデータコンテンツを受け入れるすべての要素」とあり… ここを読んでいる時点で難しい表現になってしまいます。

  1. <style>
  2. @import "./sample.css";
  3. </style>

style要素を用いて、@import で外部CSSファイルを読み込む事も可能です。
(link要素を用いる事をお勧めします。)

style属性

  1. <body style=" color: #ff0000; ">

HTML の各要素に style属性を用いて、CSS を記述する。
style属性で CSS を記述する事により、その要素だけに影響を与えます。
その要素だけなので、疑似要素などを用いた指定方法は無理です。
その要素だけなので、影響を与えたい箇所に個別に記述しなければなりません。

影響範囲の把握は容易ではありますが、どこに記述したかの把握は面倒です。

グローバル属性に分類されほぼ全ての要素に指定できるが、CSSは別ファイルで指定 (link要素で指定) が推奨されるので、style属性の使用は検証などに限定すべきです。
(このサイトでは CSS の例示の部分を CSS の例示である事から、意図的に埋め込みの為に style属性を使用して提示しています。)

気を付ける点

文字コード

「link要素を用いて、外部CSSファイルを読み込む」という事は、別途にファイルを扱う訳なのでファイルの文字コードを意識する必要があります。

コメント内が文字化けしてコメント終了の記述が認識できなくなるとかもありえます。

スタイルシートの文字エンコーディングを定義する方法は複数あるので、ブラウザは次の手順を順番に試します (そして 1 つでも結果が得られると止めます)

  1. ファイル先頭にある Unicode byte-order 文字 (BOM) の値
  2. Content-Type: HTTP ヘッダーの charset 属性、またはスタイルシートを送るのに使われたプロトコル内の同等のものから、得られた値
  3. CSS の @charset at-規則
  4. 文書参照で定義されている文字エンコーディングを使用。<link> 要素の charset 属性です。この方式は HTML5 で廃止されており、使うべきではありません。
  5. 文書が UTF-8 だと仮定する
(ページタイトル 「@charset - CSS: カスケーディングスタイルシート | MDN」 より引用)

HTMLのコメント

HTML のコメントは <!-- で始まり --> で終わります。入れ子はできません。

link 要素も style 要素も，各要素の style 属性も HTML の記述なので、コメントとされれば CSS も扱われません。
style 要素や，各要素の style 属性 の値として --> を用いるのは、CSS のコメントとしてなら全角を代用し、content プロパティで文字列として扱いたい場合は、--\03e と文字参照を用いておくべきです。
これは当該箇所がコメントの途中の時に、コメントの終わりという記述と誤られない為です。