Type selector


Type selector

You can apply styles to all elements of a certain type by using the type selector.

A type selector is an element's name.

p { color: red; }

In the above example, the style is applied to all P elements in the document.


<html>
<head>
<title>TAG index</title>

<style type="text/css">

h1 { color: red; }
h2 { color: blue; }
h3 { color: green; }
p { color: gray; }

</style>

</head>
<body>

<h1>This heading is red</h1>
<p>This text is gray.</p>

<h2>This heading is blue</h2>
<p>This text is gray.</p>

<h3>This heading is green</h3>
<p>This text is gray.</p>

</body>
</html>

Nesting

The style can be applied only to elements within a certain element by using descendant selectors.

div p { color: red; }

In the above example, the style is applied to all P elements within the DIV element. (Other P elements are unaffected)


<html>
<head>
<title>TAG index</title>

<style type="text/css">

div p { color: red; }

</style>

</head>
<body>

<div>
<p>The style is applied to this text.</p>
<p>The style is applied to this text.</p>
</div>

<p>The style is not applied to this text.</p>

</body>
</html>