Selectores básicos y colores

Aprende a apuntar a elementos con precisión mediante selectores de elemento, de clase y de id, y luego aplícales colores.

9 min · 3 preguntas

Un selector es la parte de una regla CSS que indica a qué elementos aplicar estilo. El más sencillo es el selector de elemento: escribes el nombre de la etiqueta, sin los signos de menor y mayor que. p apunta a cada párrafo, h1 a cada título de primer nivel. Funciona bien, pero a veces es demasiado amplio: ¿y si quisieras dar color a un solo párrafo de diez? Ahí es donde entran las clases y los ids.

Una clase es una etiqueta que asignas a uno o varios elementos HTML con el atributo class. Del lado del CSS, apuntas a ella con un punto: .important selecciona cada elemento que lleve class="important". Un id es una etiqueta única: solo debe aparecer una vez por página, por ejemplo en la cabecera. Del lado del CSS, apuntas a él con una almohadilla: #header.

<h1 id="main-title">My cooking blog</h1>
<p class="highlight">Recipe of the day: the pie.</p>
<p>A perfectly ordinary paragraph.</p>
<p class="highlight">Tip: preheat the oven.</p>

#main-title {
  color: darkgreen;
}

.highlight {
  background-color: yellow;
}

p {
  color: black;
}

En este ejemplo, el título se vuelve verde oscuro, los dos párrafos con la etiqueta highlight reciben un fondo amarillo (background-color define el color de fondo) y cada párrafo tiene el texto en negro. Recuerda la diferencia: una clase es reutilizable en tantos elementos como quieras, mientras que un id es único dentro de la página. En caso de duda, usa una clase.

Ahora hablemos de los colores. El CSS admite varias notaciones. Los nombres de color (red, blue, orange...) son sencillos pero limitados. La notación hexadecimal empieza por # seguido de seis caracteres que dosifican el rojo, el verde y el azul: #ff0000 es un rojo puro. Por último, la notación rgb() expresa las mismas dosis con números del 0 al 255: rgb(255, 0, 0) es también un rojo puro.

.highlight {
  color: tomato;
  background-color: #fff3cd;
}

#main-title {
  color: rgb(0, 100, 0);
}

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

1. ¿Qué selector CSS apunta a cada elemento que lleve class="menu"?
   • #menu
   • .menu
   • menu
   • class.menu
2. ¿Cuál es la principal diferencia entre una clase y un id?
   • Un id se puede colocar en varios elementos, una clase no
   • Una clase es reutilizable, un id debe ser único dentro de la página
   • Las clases solo funcionan en los párrafos
3. ¿Cuál de estos valores representa un rojo puro?
   • rgb(0, 0, 255)
   • #00ff00
   • #ff0000
   • rgb(0, 255, 0)