Selectores en CSS

¡Bien! Acaban de conectar estilos CSS externos a su página HTML.

Cuando se aplican estilos a una etiqueta con el atributo style, el navegador entiende enseguida a qué etiqueta corresponden. Pero cuando los estilos llegan desde un archivo externo o desde la etiqueta <style>, el navegador busca las etiquetas adecuadas con ayuda de los «selectores».

Ya conocen un poco los selectores: en el ejercicio anterior usaron el selector p, que estaba antes de las llaves en el código CSS. La sintaxis de una regla CSS se ve así:

selector {
  propiedad1: valor1;
  propiedad2: valor2;
  …
}

El lenguaje de los selectores es muy potente y flexible. Los selectores más simples son los que usan el nombre de la etiqueta: p, h1 y así sucesivamente. El navegador aplica los estilos de una regla así a todas las etiquetas que coinciden. Por ejemplo, a todos los párrafos o a todos los encabezados de primer nivel.

En nuestro resumen, el selector p puso todos los párrafos en verde. ¿Y cómo hacer para que tengan colores distintos? Se pueden añadir otras etiquetas dentro de los párrafos. Entonces, en CSS será posible usar selectores para etiquetas diferentes y asignarles colores distintos.