Qué es CSS y cómo define el diseño web
Autor: Redacción Domeny.ForSale Publicado
En resumen: CSS es un lenguaje de hojas de estilo que define el aspecto y la distribución de las páginas web: colores, tipos de letra, espacios y colocación de los elementos. Trabaja junto con HTML, que describe la estructura y el significado del contenido. Gracias a CSS, una misma página puede tener una distribución legible tanto en un teléfono como en un monitor grande.
¿De qué se encarga CSS y en qué se diferencia de HTML?
La sigla CSS procede de Cascading Style Sheets, es decir, hojas de estilo en cascada. Es un lenguaje declarativo: indicas el resultado que quieres para un elemento y el navegador se encarga de mostrarlo. No necesitas describir paso a paso cómo dibujar un botón o colocar un párrafo.
La forma más sencilla de entender el reparto de funciones en una página es con el ejemplo de un formulario de contacto:
- HTML establece que el formulario contiene etiquetas, campos para introducir datos y un botón de envío.
- CSS define la anchura de los campos, el aspecto del botón, los espacios y la distribución del formulario en distintas pantallas.
- JavaScript puede gestionar comportamientos adicionales, como enviar los datos sin recargar la página.
CSS no sustituye a un HTML correcto. Dar a un fragmento de texto normal el aspecto de un encabezado no lo convierte en un encabezado para las tecnologías de asistencia. El aspecto y el significado de un elemento son dos cuestiones distintas.
Las hojas de estilo también permiten separar la presentación del contenido. Un único archivo compartido de CSS puede cambiar el aspecto de los botones de muchas páginas del sitio sin tener que editar cada botón por separado.
¿Cómo es una regla de CSS?
Una regla de CSS consta de un selector, que identifica los elementos, y de declaraciones, que definen su aspecto. Cada declaración contiene una propiedad y el valor que se le asigna.
p {
color: #222222;
font-size: 18px;
line-height: 1.6;
}
El selector p identifica todos los párrafos. La propiedad color establece el color del texto; font-size, su tamaño; y line-height, la altura de línea. En este ejemplo, la altura de línea es 1,6 veces el tamaño de la letra, lo que deja más espacio vertical en el texto.
Sin embargo, no siempre querrás cambiar todos los elementos de un mismo tipo. Una clase es un nombre asignado a un elemento en HTML que permite seleccionarlo en CSS. El selector de clase empieza con un punto:
.destacado {
background-color: #fff4cc;
padding: 16px;
border-radius: 8px;
}
Esta regla aplica un fondo claro, un espacio interior y esquinas redondeadas a los elementos con la clase destacado. No basta con escribir el nombre en la hoja de estilo: el elemento correspondiente debe tener esa clase asignada en HTML.
¿Qué significa la cascada y por qué se sobrescribe un estilo?
Varias reglas pueden aplicarse a un mismo elemento. La cascada es el mecanismo que decide qué declaración se aplica cuando distintas reglas establecen la misma propiedad.
No se trata de una simple regla según la cual «lo último que se escribe siempre gana». El navegador tiene en cuenta, entre otros factores, el origen y la importancia de las declaraciones, las capas de cascada y la especificidad, es decir, el peso del selector. Cuando los demás factores son iguales, importa el orden en que se han escrito las reglas.
p {
color: navy;
}
.aviso {
color: darkred;
}
Un párrafo con la clase aviso será de color rojo oscuro. En este ejemplo, el selector de clase tiene mayor especificidad que el selector que identifica el tipo de elemento.
La herencia es un mecanismo distinto: algunas propiedades, como el color del texto, pueden pasar del elemento padre a su contenido. Esto no se aplica a todos los ajustes: el borde y el margen no se heredan de forma predeterminada. Cuando un estilo no funciona, comprueba primero si el selector coincide con el elemento y qué declaraciones compiten entre sí, en lugar de añadir directamente !important, que cambia la prioridad de la declaración y puede dificultar los cambios posteriores.
¿Cómo adapta CSS la página a la pantalla?
El diseño adaptable consiste en ajustar la distribución al espacio disponible. CSS lo permite mediante anchuras flexibles, mecanismos de distribución de elementos y consultas de medios (media queries): condiciones que activan determinados estilos, por ejemplo, cuando el área de visualización de la página tiene una anchura concreta.
Para crear estas distribuciones se utilizan, entre otros, Flexbox, práctico para distribuir elementos en una sola dirección, y Grid, pensado para diseños con filas y columnas. Por ejemplo, una lista de productos puede tener tres columnas en una pantalla ancha y una en una estrecha.
Al establecer las dimensiones, hay que entender el modelo de caja: un elemento tiene un área de contenido, un espacio interior (padding), un borde (border) y un margen exterior (margin). De forma predeterminada, la anchura indicada se aplica solo al contenido. El ajuste box-sizing: border-box hace que también incluya el espacio interior y el borde, lo que facilita el control del tamaño del elemento.
¿Cómo empezar a trabajar con CSS?
Lo más habitual es escribir las reglas en un archivo independiente con la extensión .css, al que el documento HTML hace referencia en su sección de cabecera. También se pueden incluir los estilos directamente en el documento, pero una hoja compartida suele facilitar el mantenimiento de un sitio grande.
Puedes hacer el primer ejercicio sin instalar herramientas adicionales:
- Abre una página en el navegador y elige la opción de inspeccionar el elemento en el menú contextual.
- Selecciona un párrafo y cambia su
colorofont-sizeen el panel de estilos. - Comprueba qué declaraciones aparecen tachadas: normalmente han sido sobrescritas por otras reglas.
- Reduce la anchura de la ventana y comprueba si el texto sigue siendo legible y si aparece algún desplazamiento horizontal innecesario.
Los cambios realizados en las herramientas de desarrollo suelen ser temporales y desaparecen al recargar la página. Si el resultado es correcto, lleva la regla al archivo del proyecto. Para empezar, modifica un solo elemento y comprueba también el resultado al ampliar el texto: entenderás las relaciones entre los ajustes más rápido que si pegas una hoja de estilo extensa ya preparada.
Consulta también: ¿Qué significa www?
Lee también
