The Element selector

The most basic type of selector is probably the one that simply targets an existing HTML element. For instance, you can target all paragraph elements (<p>) simply by writing the name of it in your stylesheet:

p {
	color: Red;
}

With this simple rule, we have just changed the text color of all paragraphs to red - the element selector is very strong!

You can target any of the valid HTML elements this way and even non-existing elements can be targeted - if you want a <tiger> tag on your page, you are free to write a CSS selector which targets your tiger-element (although that wouldn't validate!).

So, for most of the time, your element selectors targets your everyday HTML tag. For instance, you may decide that bold-tags should no longer cause text to be bold:

b {
	font-weight: normal;
}

The internal stylesheet of most browsers dictates that bold tags have bold text, but with the power of CSS, you can easily change that, either locally (more on that later) or globally, like we just did.

Here is a more complete example, where we use what we just learned. Feel free to check it out and play around with it, to see how it works:

<style type="text/css">
p {
	color: Red;
}

b {
	font-weight: normal;
}
</style>

<p>Here's a paragraph!</p>

<p>Here's another <b>paragraph</b> - the word paragraph would normally be bold here!</p>

Summary

So, the major advantage of element selectors is that they are global - every place where your stylesheet is included, these rules affect your elements. Obviously, this is also the main disadvantage of the element selectors, because sometimes that's really not what you want. Fortunately, there are several other options, including class and ID selectors, which we'll look into next.