The Element selector

El tipo de selector más básico es probablemente aquel que simplemente apunta a un elemento HTML existente. Por ejemplo, puedes apuntar todos los elementos de tipo párrafo (<p>) con solo escribir su nombre en tu hoja de estilos.

p {
	color: Red;
}

Con esta simple regla, acabamos de cambiar a rojo el color de todos los párrafos. ¡El selector de elementos es muy fuerte!

De esta manera, puedes apuntar a cualquiera de los elementos HTML válidos e incluso elementos no existentes pueden ser apuntados -si quieres una etiqueta <tigre> en tu página, puedes escribir un selector CSS que apunte a tu elemento "tigre" (¡aunque no sea válido!)-.

Así, la mayor parte del tiempo, tu selector de elementos apunta siempre a tu etiqueta HTML. Por ejemplo, puedes decidir que las etiquetas "bold" ya no deben hacer que el texto se muestre en negrita:

b {
	font-weight: normal;
}

Las hojas de estilos internas de la mayoría de los exploradores establecen que las etiquetas "bold" tienen texto en negrita, pero con el poder de CSS, puedes fácilmente cambiar eso, ya sea localmente (sobre esto más adelante) o globalmente, como acabamos de hacer.

Acá hay un ejemplo más completo, donde usamos lo que acabamos de aprender. No dudes en darle una mirada y experimentar con él, para ver como funciona

<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>

En resumen

Entonces, la mayor ventaja del selector de elementos es que son globales, es decir: estas reglas afectan tus elementos, en cada lugar donde aparecen en tu hoja de estilos. Obviamente, esto es también la principal desventaja del selector de elementos porque a veces eso no es realmente lo que se quiere. Por suerte, hay muchas otras opciones, incluyendo selectores de clases e identificadores ID, que veremos a continuación.