要素の種類別にスタイルを適用させる方法です。
p { color: red; }
例えば、上記のようにp要素に対してスタイルを設定しておくと、ページ内にある全てのp要素にそのスタイルが適用されることになります。
※p要素以外にも、様々な要素に対してスタイルを設定することができます。
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
h1 { color: red; } /* 文字色を赤に指定 */
h2 { color: blue; } /* 文字色を青に指定 */
h3 { color: green; } /* 文字色を緑に指定 */
p { font-size: 80%; } /* 文字サイズを80%に指定 */
-->
</style>
</head>
<body>
<h1>この文字色は赤になります</h1>
<p>この文字サイズは80%です</p>
<h2>この文字色は青になります</h2>
<p>この文字サイズは80%です</p>
<h3>この文字色は緑になります</h3>
<p>この文字サイズは80%です</p>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
要素名の代わりにアスタリスク（ * ）を指定すると、ページ内の全ての要素にそのスタイルが適用されます。
* { margin: 0; }
次の例では、ページ内にある全ての要素のマージンが0になります。
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
* { margin: 0; }
-->
</style>
</head>
<body>
<h1>この見出しのマージンは0です</h1>
<p>この段落のマージンは0です</p>
<h2>この見出しのマージンは0です</h2>
<p>この段落のマージンは0です</p>
<h3>この見出しのマージンは0です</h3>
<p>この段落のマージンは0です</p>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
入れ子にした指定を行うと、特定の範囲内にある要素にのみスタイルを適用させることができます。
次の例のように、要素名を半角スペースで区切って記述します。
div p { color: red; }
上記の例では、div要素内のp要素に対してのみ、color: red を適用させています。それ以外のp要素には、このスタイルは適用されません。
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
div p { color: red; }
-->
</style>
</head>
<body>
<div>
<p>この文字にスタイルの指定が適用されます</p>
</div>
<p>この文字には適用されません</p>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
