CSSを使って、HTML文書にスタイルシートを適用する方法には、大きく分けて3つの方法があります。

  • ピンポイントで適用する(要素にstyle属性を追加)
  • HTML単位で適用する(<style>要素)
  • 外部CSSファイルを呼び出して適用する(<link>要素)

ピンポイントで適用する(要素にstyle属性を追加)

HTML本文中に直接スタイルを記述します。

部分的にスタイルを設定したい場合に便利です。

※<meta>要素内の記述は、誤動作防止のため。

HTMLの記述方法

<html>
  <head>
    <meta name="Content-Style-Type" content="text/css">
  </head>
  <body>
    <p style="color: #F00;">本文</p>
  </body>
</html>

HTML単位で適用する(<style>要素)

文書単位でスタイルシートを設定する方法です。

HTML文書の<head>要素内に<style>要素を記述します。

HTMLの記述方法

<html>
  <head>
    <style type="text/css">
      .color {
          color: #F00;
      }
    </style>
  </head>
  <body>
    <p class="color">本文</p>
  </body>
</html>

外部CSSファイルを呼び出して適用する(<link>要素)

HTMLとは別に、スタイルシートを記述した専用のCSSファイルをHTMLファイルを作成する方法です。

HTMLのファイルから呼び出して利用します。

外部CSSファイルの呼び出し方法は、HTML文書の<head>要素内に<link>要素を記述。

HTMLの記述方法

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="xxx.css">
  </head>
  <body>
    <p class="color2">本文</p>
  </body>
</html>

外部CSSファイル(xxx.css)の記述方法

@charset "utf-8";
.color2 {
	color: #00F;
}