Introducción a CSS
¿Qué es CSS?
CSS son las siglas en inglés para «hojas de estilo en cascada» (Cascading Style Sheets). Básicamente, es un lenguaje que maneja el diseño y presentación de las páginas web, es decir, cómo lucen cuando un usuario las visita. Funciona junto con el lenguaje HTML que se encarga del contenido básico de los sitios. Se les denomina hojas de estilo «en cascada» porque puedes tener varias y una de ellas con las propiedades heredadas (o «en cascada») de otras.
Con CSS, puedes crear reglas para decirle a tu sitio web cómo quieres mostrar la información y guardar los comandos para elementos de estilo (como fuentes, colores, tamaños, etc.) separados de los que configuran el contenido. Además, puedes crear formatos específicos útiles para comunicar tus ideas y producir experiencias más agradables, en el aspecto visual, para los usuarios del sitio web.
Ventajas y desventajas de usar CSS
1. Ventajas
- Separación de la estructura y la presentación. CSS permite separar el contenido HTML de su presentación visual. Es decir, te permite mantener el código HTML limpio y estructurado, mientras que el estilo se define en un archivo CSS separado. Este orden mejora la legibilidad del código y facilita el mantenimiento, así como la actualización de los estilos.
- Consistencia y mantenibilidad. Al utilizar CSS, puedes aplicar estilos de manera consistente a un sitio o aplicación web. Los estilos se definen una vez y se aplican a múltiples elementos en las páginas, lo que favorece la renovación de la apariencia visual de todo el proyecto.
- Eficiencia en el rendimiento. CSS permite cargar estilos externos en un archivo separado. Con esto, el navegador almacenará en caché los estilos y los aplicará a todas las páginas del sitio, lo que mejora el rendimiento al reducir la cantidad de datos que deben transferirse entre el servidor y el cliente.
- Flexibilidad y control. Asimismo, ofrece una amplia gama de propiedades y selectores con los que tendrás un control preciso sobre el estilo de los elementos HTML. Podrás modificar, de forma sencilla, los colores, fuentes, márgenes, tamaños, diseños, etc. Gracias a esta característica, podrás personalizar y adaptar a varios dispositivos y tamaños de pantalla tu sitio web.
2. Desventajas
- Curva de aprendizaje. CSS puede tener una curva de aprendizaje empinada, en particular, para los principiantes. Entender, por completo, todas las propiedades, selectores y conceptos avanzados puede llevar tiempo y práctica.
- Compatibilidad entre navegadores. Aunque los estándares de CSS son de los más aceptados, algunos navegadores podrían interpretar y renderizar los estilos de manera diferente. Esto puede resultar en inconsistencias visuales y requerir pruebas o ajustes adicionales para garantizar la compatibilidad entre plataformas.
- Especificidad y herencia. CSS utiliza reglas de especificidad y herencia para determinar qué estilos se aplican a los elementos. En ocasiones, el orden de las reglas y la jerarquía pueden generar resultados inesperados. Esto requiere una comprensión cuidadosa de cómo funcionan estas reglas para evitar conflictos y problemas de estilo.
- Limitaciones en la maquetación. Aunque CSS ofrece una amplia gama de propiedades para el diseño y la maquetación, puede presentar limitaciones en ciertos casos más complejos. Algunos diseños específicos pueden requerir soluciones adicionales o el uso de técnicas más avanzadas para lograr el resultado deseado»
¿Cómo trabaja CSS?
CSS funciona como complemento a la información que forma parte de un sitio web. Mientras que el código en HTML incluye todos los datos, el código en CSS se encarga de darles formato y presentarlos visualmente a través de un navegador.
Al acceder a un sitio web, el navegador debe rastrear la información contenida en el HTML y traducirla a un DOM (o modelo de objetos del documento). Estos objetos deberán ser conjuntados con los bloques de código correspondientes en CSS para que el estilo elegido sea aplicado a ellos y aparezcan en el formato asignado en el ordenador.
1. Escribe reglas para la apariencia de tu sitio
Las personas que ya están familiarizadas con HTML notarán que la sintaxis de CSS es un poco distinta. En lugar de hacer un listado del contenido de la página, CSS utiliza las reglas asignadas a elementos HTML, un documento HTML completo o varios de ellos. Estas son procesadas por el navegador web cuando carga el archivo HTML.
2. Conoce los componentes de la regla
Todas las reglas CSS comienzan con un selector. Este indica la parte del documento donde se aplica la regla. A este le siguen una o más declaraciones dentro de corchetes. Existen varias formas de escribir un selector, el más básico es el que viste en el ejemplo de arriba: cada elemento HTML a modificar se menciona por su nombre (p, div, a, etc.)
Pero también puedes señalar los elementos por su clase o atributo. La clase de selector está escrita como un punto (.), seguido del nombre de la clase. La identidad del selector se escribe con una almohadilla (#), seguida del nombre de identidad.
Para dirigirte a un elemento «hijo» dentro de un elemento «padre», escribe el selector como si fuera el elemento padre, seguido del elemento hijo (con un espacio entre ellos)
Si deseas asignar la misma regla a múltiples elementos, puedes hacerlo con el selector en grupo. Este abarca dos o más nombres de elementos separados por comas. El orden no es importante, pues la regla se aplicará a todos los elementos que se enumeren:
Después del selector, sigue el bloque de declaración: un par de corchetes que contienen una o más declaraciones CSS. Una de estas declaraciones le dice al navegador qué estilo brindar al elemento seleccionado gracias a sus dos aspectos: una propiedad y un valor. Cada declaración termina con un punto y coma (;).
Aunque no es obligatorio, es común que cada declaración ocupe una sola línea. Esta práctica hace que las instrucciones sean fáciles de localizar y leer por las personas.
Ahora veremos los dos elementos de una declaración:
Propiedad
Como la primera parte de una declaración, una propiedad CSS le indica al navegador cuál característica de estilo del elemento debe cambiarse. Existen muchas propiedades CSS que afectan diferentes cosas: color, tamaño, fuente, forma o locación en una página. Una propiedad se acompaña de al menos un valor y estos elementos siempre aparecen separados por dos puntos (:).
No todas las propiedades son compatibles con todos los navegadores, no obstante, algunas son bastante amigables, como color y ancho. Ten en mente la compatibilidad entre navegadores si las propiedades que usas son menos habituales. Probar tus diseños en navegadores generales (así como en dispositivos móviles y de escritorio) es una buena práctica para garantizar una buena experiencia de usuario.
Valor
Cada propiedad tiene un paquete de valores, los cuales especifican su estilo. Estas son algunas propiedades usuales y sus valores:
Las propiedades de color tienen valores tan simples como una palabra (red o blue para rojo y azul, por ejemplo), códigos hexadecimales como #33E0FF o valores RGB como rgb (51, 224, 255).
La propiedad de ancho (width) tiene un valor de longitud, como píxeles o un porcentaje, que le da tamaño al elemento, según la dimensión del contenedor padre.
La propiedad para la familia de fuentes (family font) acepta los nombres por escrito de tipografías amigables con web como Arial, Times New Roman o Courier.
2 Formas de agregar estilos CSS a tu HTML
Forma 1: Básicamente creamos una hoja de estilos con extensión css y adjuntamos la ruta, para nuestro ejemplo la hoja de estilos se llama style.css
<link rel="stylesheet" target="_blank" rel="noopener" href="style.css">Forma 2: colocamos los estilos dentro del propio documento HTML:
