The Element selector

Hầu hết các kiểu selector cơ bản là nhắm vào các HTML element đang tồn tại. Cho một ví dụ, bạn có thể nhắm vào tất cả các paragraph elements (<p>) đơn giản bằng cách viết tên của nó vào stylesheet của bạn:

p {
	color: Red;
}

Với quy tắc đơn giản này, chúng ta đã thay đổi màu chữ của tất cả paragraphs đến màu đỏ - element selector thì rất mạnh mẽ!

Bạn có thể nhắm tới bất kỳ HTML elements nào có giá trị theo cách này và cũng như các elements chưa tồn tại cũng có thể được nhắm tới. Nếu bạn muốn một thẻ <tiger> trên trang của bạn, bạn thoải mái viết một CSS selector nhắm vào tiger-element của bạn (cho dù điều đó sẽ không được xác thực).

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.