<style>Imagina que decorar una casa con el atributo style es como pegar post-its de colores en cada mueble. Funciona, pero cuando tienes 200 muebles, el caos es total. Necesitas algo más organizado: una hoja de diseño centralizada.
Aquí entra la etiqueta <style> — la segunda forma de añadir CSS. En lugar de escribir estilos directamente en cada elemento, los centralizas todos en un solo lugar dentro del <head> de tu documento.
Aquí viene el giro inesperado. Cuando los estilos estaban en el atributo style, CSS sabía exactamente a qué elemento aplicarlos porque estaban dentro de ese elemento. Pero ahora que los estilos están en el <head>, separados del contenido... ¿cómo sabe CSS qué elemento debe estilizar?
Para eso existe el selector. El selector, como su nombre indica, sirve para seleccionar los elementos a los que se aplicarán los estilos.
Prueba este ejemplo completo en el editor:
¿Lo ves? El selector h1 le dice a CSS: "aplica estos estilos a todos los elementos <h1> de la página".
Y aquí está la magia. Con una sola regla, controlas todos los elementos del mismo tipo. Si tuvieras diez <h1> (aunque no es recomendable), todos recibirían el mismo estilo automáticamente.
Puedes tener tantas reglas como necesites. Mira este ejemplo donde los títulos principales son verdes y los secundarios son azules:
¿Notaste la estructura? Cada bloque tiene un selector seguido de llaves {}, y dentro van las declaraciones. A ese conjunto completo — selector más declaraciones — se le llama regla CSS. En el ejemplo de arriba tenemos dos reglas CSS.
Crea un título principal que diga "Hola Mundo" y dale un color de fondo rosa usando la etiqueta <style>.
Una regla para dominarlos a todos...