Darle vida visual a un proyecto web requiere mucho más que estructura y lógica. CSS es el lenguaje de estilos que permite transformar la apariencia de cualquier elemento HTML, desde colores y fondos hasta dimensiones y posicionamiento. A continuación se explica cómo funciona esta conexión entre HTML y CSS, qué tipos de selectores existen y cómo aplicar propiedades y valores para personalizar un proyecto como el juego Mokepon.
¿Cómo se conecta un archivo CSS con HTML?
Para trabajar con CSS es necesario crear un archivo independiente, por ejemplo styles.css, y vincularlo al documento HTML. Esto se logra con la etiqueta link dentro del <head> del HTML, indicando la ruta del archivo [0:52]. El proceso es similar a como se importa un archivo de JavaScript: se escribe link, se autocompleta y se coloca la ruta relativa con ./styles.css.
Una vez creado y vinculado el archivo, ya es posible escribir reglas de estilo que el navegador interpretará automáticamente al recargar la página.
¿Qué son los selectores en CSS y cuántos tipos hay?
El vínculo entre CSS y HTML se establece a través de los selectores [2:25]. Un selector le indica a CSS exactamente cuál elemento del HTML debe recibir los estilos. Existen muchos tipos, pero los tres fundamentales son:
- Selector de tipo: utiliza directamente el nombre de la etiqueta HTML. Por ejemplo, escribir
h1 en el archivo CSS aplica estilos a todos los <h1> del documento [2:37].
- Selector de clase: se crea añadiendo el atributo
class a una etiqueta HTML. En CSS se referencia anteponiendo un punto (.titulo) al nombre de la clase [3:07].
- Selector de ID: funciona con el atributo
id en HTML. En CSS se identifica con un hashtag (#titulo). A diferencia de las clases, el ID debe ser único en todo el documento [3:52].
Cada selector cumple un propósito distinto. Las clases permiten reutilización en múltiples elementos, mientras que los IDs están pensados para elementos únicos.
¿Cómo funcionan las propiedades y valores en CSS?
Después del selector se abren llaves {}, y dentro de ellas se escriben las reglas de estilo. Cada regla se compone de una propiedad y un valor separados por dos puntos, finalizando con punto y coma [4:38].
- Las propiedades son características que se pueden modificar:
color, width (ancho), height (alto), background-color (color de fondo), entre más de cien opciones disponibles.
- Los valores corresponden a lo que se asigna a cada propiedad: un nombre de color como
lightcoral o hotpink, una medida en píxeles como 100px, etc.
¿Qué propiedades se pueden aplicar a un texto?
Para personalizar tipografías existen propiedades como color, que cambia el color del texto, y font-family, que define el tipo de letra [5:27]. Un recurso muy útil es la página CSS Reference, donde se listan todas las propiedades organizadas por categoría: tipografía, dimensiones, fondos y más [5:10].
¿Cómo se definen colores en CSS?
CSS ofrece una amplia paleta de colores predefinidos que se pueden usar por nombre (teal, hotpink, lightcoral) o mediante un código hexadecimal [6:25]. Existe un listado completo de estos colores con sus nombres y códigos para facilitar la elección.
Un ejemplo práctico con el selector de clase .titulo:
css
.titulo {
color: hotpink;
width: 310px;
height: 50px;
background-color: teal;
}
Este bloque cambia el color del texto a hotpink, establece un ancho de 310 píxeles, una altura de 50 píxeles y un fondo color teal [6:46].
¿Por qué es útil el inspector del navegador para CSS?
El inspector de elementos del navegador permite modificar propiedades CSS en tiempo real [7:10]. Es posible ajustar valores como el width directamente con las flechas del teclado, ver el resultado al instante y luego copiar esos valores al código fuente. Esta técnica acelera el proceso de diseño y evita recargar la página repetidamente.
La anatomía básica de CSS se resume en tres elementos: selectores para apuntar al HTML, propiedades para definir qué cambiar y valores para especificar cómo cambiarlo. Dominar estos fundamentos abre la puerta a personalizar por completo cualquier proyecto web. ¿Ya probaste cambiar los colores y dimensiones de tu propio proyecto? Comparte tus resultados en los comentarios.
