設定方法

head要素内にstyle要素を配置して、その中にスタイルの設定内容を記述します。

<style type="text/css">

ここにスタイルシートを記述します

</style>
属性
type="" text/css を指定
media="" メディアタイプ を指定 (初期値は screen

この方法で設定されたスタイルは、その文書内でのみ有効となります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

h1 { color: #ff0000; }
p { color: #808080; }

</style>

</head>
<body>

<h1>サンプル</h1>

<p>サンプルテキスト、サンプルテキスト。</p>
<p>サンプルテキスト、サンプルテキスト。</p>
<p>サンプルテキスト、サンプルテキスト。</p>

</body>
</html>

media属性を使用すると、そのスタイルをどのメディアに対して適用させるかを指定することができます。

この属性の値(メディアタイプ)は、カンマ( , )で区切って複数指定することが可能です。

例えば、以下のように指定した場合は、スタイルAコンピュータscreen)とテレビtv)で、スタイルBプリンタprint)で使用されることになります。

<style type="text/css" media="screen, tv">
スタイルA
</style>

<style type="text/css" media="print">
スタイルB
</style>

コメントアウトについて

style要素に対応していない古いブラウザを考慮する場合は、次のようにスタイルシートの記述コメントアウトしておきます。(XHTMLでは不可)

<style type="text/css">
<!--

ここにスタイルシートを記述します

-->
</style>