CSS (Cascading Style Sheets o Hojas de Estilo en Cascada) es el lenguaje que se utiliza para diseñar y dar formato visual a las páginas web. [1]
Si el HTML es el esqueleto de una web, el CSS es la ropa, el maquillaje y la decoración. [2, 3, 4, 5]
¿Para qué sirve?
CSS controla todo el aspecto visual de un sitio web. Con este lenguaje puedes modificar: [6]
- Colores y fondos: Cambiar el tono del texto, de los botones o añadir imágenes de fondo.
- Tipografías: Elegir el tipo de letra, su tamaño, grosor y el espacio entre palabras.
- Diseño y distribución: Decidir dónde se coloca cada elemento (izquierda, derecha, centrado) y crear columnas.
- Adaptación móvil: Hacer que la página se adapte automáticamente al tamaño de pantallas de móviles, tablets y ordenadores (Responsive Design).
- Efectos: Añadir animaciones, transiciones suaves y sombras a los textos o cajas. [7, 8, 9, 10, 11]
¿Cómo funciona?
CSS funciona mediante reglas que seleccionan un elemento de HTML y le aplican un estilo. Su estructura básica es muy sencilla: [12, 13, 14]
p {
color: blue;
font-size: 16px;
}
- Selector (
p): Le dice al navegador que apunte a todos los párrafos de la página. - Propiedad (
color,font-size): Qué aspecto quieres cambiar (el color del texto o el tamaño de la fuente). - Valor (
blue,16px): El cambio exacto que vas a aplicar. [15, 16, 17]
¿Por qué se llama «en cascada»?
El término «cascada» significa que las reglas de estilo se aplican de arriba hacia abajo. Si escribes dos reglas diferentes para el mismo elemento, el navegador generalmente aplicará la última que haya leído o la que sea más específica. [18, 19, 20, 21]
Si te interesa ver cómo trabajan juntos, te puedo mostrar:
- Un ejemplo real combinando un código HTML con su diseño en CSS.
- Cuáles son las formas de conectar CSS con HTML (interno, externo o en línea).
- Cómo se crean las animaciones básicas con CSS. [22, 23, 24]
¿Qué prefieres revisar primero?
[5] https://joseramonbernabeu.com
[9] https://webdesign.tutsplus.com
[10] https://socratech.es
[11] https://www.sibtraining.es
[13] https://www.unir.net
[14] https://www.hostinger.com
[15] https://www.piensasolutions.com
[19] https://developer.mozilla.org
[20] https://aulacm.com
[22] https://www.hostinger.com
[24] https://oregoom.com