Aprender CSS te permite transformar una página plana de HTML en una interfaz con color, tamaño y personalidad. En este recorrido descubrirás cómo funciona este lenguaje de estilos, qué son los selectores y cómo aplicar propiedades para darle vida a un proyecto como el juego MoquePong.

La clase la guía Stephanie Aguilar, senior front-end developer y profesora en Platzi, quien parte de un juego ya construido con HTML y JavaScript para mostrarte cómo el estilo cambia toda la experiencia visual.

Cómo se conecta un archivo CSS con HTML

Antes de escribir reglas, necesitas un archivo dedicado a los estilos. La práctica común es crear un documento llamado styles.css y enlazarlo desde el HTML.

En tu editor, escribes la etiqueta link y autocompletas la ruta hacia el archivo. Con el atajo link + tab el editor genera la estructura y solo te queda apuntar al archivo con ./styles.css. Ese vínculo es lo que permite que el navegador lea tus estilos al cargar la página.

¿Para qué sirve CSS? CSS es el lenguaje que define cómo se ven los elementos HTML: colores, tamaños, posiciones y tipografías. Sin él, las páginas se ven planas y sin jerarquía visual.

Qué son los selectores en CSS y cuáles vas a usar

Un selector es el puente entre tu archivo CSS y la etiqueta HTML que quieres estilizar [01:55]. Le dice al navegador: este bloque de reglas aplica a este elemento.

Existen muchos tipos, pero en la práctica inicial trabajas con tres:

• Selector de tipo: usa el mismo nombre de la etiqueta HTML, por ejemplo h1.
• Selector de clase: aplica a elementos con un atributo class y se escribe con un punto antes del nombre, como .titulo.
• Selector de ID: aplica a un elemento único con atributo id y se escribe con un hashtag, como #titulo.

La diferencia clave entre clase e ID es que un ID debe ser único en la página, mientras que una clase puede repetirse en varios elementos. Por eso conviene que clases e IDs no compartan el mismo nombre.

Cómo se ve cada selector en código

Para el selector de tipo basta con escribir el nombre de la etiqueta y abrir llaves:

css h1 { color: lightcoral; }

Para una clase, primero agregas el atributo en HTML y luego lo referencias con punto:

css .titulo { color: blue; }

Y para un ID, usas el hashtag:

css #titulo { color: hotpink; }

Cómo funcionan las propiedades y los valores en CSS

Dentro de las llaves vive la magia: las propiedades son las características que aplicas al elemento y los valores son el dato concreto que toma cada propiedad [05:20].

Si la propiedad es color, el valor será un color. Si la propiedad es width, el valor será una medida, normalmente en píxeles. Las propiedades están escritas en inglés, así que ancho es width, alto es height y color de fondo es background-color.

¿Qué es una propiedad en CSS? Es una característica visual que defines para un elemento, como color, ancho o tipografía. Cada propiedad recibe un valor que determina su apariencia final.

Un recurso útil que se menciona en clase es CSS Reference, una página con más de 100 propiedades organizadas por categorías como tipografía, donde encuentras opciones como color y font-family. La idea no es memorizarlas todas, sino familiarizarte con las que necesitas en cada momento.

Cómo aplicar ancho, alto y color de fondo a un título

El ejercicio práctico consiste en darle estilo al h1 del juego usando una clase. Después de añadir class="titulo" en el HTML, defines varias propiedades a la vez:

css .titulo { color: hotpink; width: 310px; height: 50px; background-color: teal; }

Aquí entran en juego varias decisiones:

• El width controla cuánto espacio horizontal ocupa la caja del elemento.
• El height define la altura en píxeles.
• El background-color cambia el fondo del elemento, no el color del texto.
• Los valores van seguidos de punto y coma para separar cada regla.

Un detalle importante: cuando el ancho es muy pequeño, los emojis o el contenido pueden bajar a la siguiente línea. Por eso el width se ajusta hasta que el contenido quepa en una sola línea, en este caso 310 píxeles.

Por qué usar el inspector del navegador para ajustar estilos

El inspector del navegador es tu mejor aliado mientras escribes CSS. Te permite modificar valores en vivo con las flechas del teclado y ver el resultado al instante. Cuando logras el ajuste exacto, copias el valor y lo pegas en tu archivo. Es la forma más rápida de afinar dimensiones sin recargar la página una y otra vez.

Dónde encontrar los colores disponibles en CSS

CSS incluye una lista de colores con nombre que puedes usar directamente, como lightcoral, hotpink o teal. Cada color tiene también un código hexadecimal equivalente, pero los nombres suelen ser más legibles y creativos.

La recomendación práctica es explorar la lista oficial de colores nombrados, probar los que te llamen la atención y observar cómo cambia la composición visual de tu proyecto. Esa exploración es parte del aprendizaje y te ayuda a desarrollar criterio estético.

Con selectores, propiedades y valores ya tienes la anatomía básica de CSS. ¿Qué color usaste primero en tu proyecto? Cuéntalo en los comentarios.