Los sitios web se componen de una serie de piezas individuales, que incluyen imágenes, texto y varios documentos. Estos documentos no solo incluyen los que pueden estar vinculados desde varias páginas, como archivos PDF, sino también los documentos que se utilizan para construir las páginas en sí, como Documentos HTML para determinar la estructura de una página y los documentos CSS (Hoja de estilo en cascada) para dictar el aspecto de una página. Este artículo profundizará en CSS, cubriendo qué es y dónde se usa en los sitios web hoy.
Una lección de historia de CSS
CSS se desarrolló por primera vez en 1997 como una forma para que los desarrolladores web definieran la apariencia visual de las páginas web que estaban creando. Su objetivo era permitir que los profesionales de la web separar el contenido y estructura del código de un sitio web a partir del diseño visual, algo que antes no había sido posible.
La separación de estructura y estilo permite que HTML realice más de la función en la que se basó originalmente: el marcado de contenido, sin tener que preocuparse por el diseño y el diseño de la página en sí, algo que se conoce comúnmente como "apariencia" de la página.
La evolución de CSS
CSS no ganó popularidad hasta alrededor del año 2000 cuando los navegadores web comenzaron a usar más que los aspectos básicos de fuente y color de este lenguaje de marcado. Hoy en día, todos los navegadores modernos admiten todo el nivel 1 de CSS, la mayor parte del nivel 2 de CSS e incluso la mayoría de los aspectos del nivel 3 de CSS. A medida que CSS continúa evolucionando y se introducen nuevos estilos, los navegadores web han comenzado a implementar módulos que brindan compatibilidad con CSS en esos navegadores y brindan a los diseñadores web nuevas y poderosas herramientas de estilo para trabajar con.
En (muchos) años pasados, hubo diseñadores web selectos que se negaron a usar CSS para el diseño y desarrollo de sitios web, pero esa práctica casi ha desaparecido de la industria hoy en día. CSS es ahora un estándar ampliamente utilizado en diseño web y sería difícil encontrar a alguien que trabaje en la industria hoy en día y que no tenga al menos un conocimiento básico de este lenguaje.
CSS es una abreviatura
Como ya se mencionó, el término CSS significa "Hoja de estilo en cascada". Analicemos un poco esta frase para explicar con más detalle lo que hacen estos documentos.
La palabra "hoja de estilo" se refiere al documento en sí (como HTML, los archivos CSS son en realidad documentos de texto que se pueden editar con una variedad de programas). Las hojas de estilo se han utilizado para el diseño de documentos durante muchos años. Son las especificaciones técnicas de un diseño, ya sea impreso o en línea. Los diseñadores de impresión han utilizado hojas de estilo durante mucho tiempo para garantizar que sus diseños se impriman exactamente según sus especificaciones. Una hoja de estilo para una página web tiene el mismo propósito, pero con la funcionalidad adicional de decirle también al navegador web cómo representar el documento que se está viendo. Hoy en día, las hojas de estilo CSS también pueden usar preguntas de los medios para cambiar la apariencia de una página diferentes dispositivos y tamaños de pantalla. Esto es increíblemente importante ya que permite que un solo documento HTML se renderice de manera diferente según la pantalla que se use para acceder a él.
cascada es la parte realmente especial del término "hoja de estilo en cascada". Una hoja de estilo web tiene la intención de caer en cascada a través de una serie de estilos en esa hoja, como un río sobre una cascada. El agua del río golpea todas las rocas de la cascada, pero solo las del fondo afectan exactamente por dónde fluirá el agua. Lo mismo ocurre con la cascada en las hojas de estilo de los sitios web.
Las hojas de estilo de diseñador anulan las hojas de estilo predeterminadas del navegador
Cada página web se ve afectada por al menos una hoja de estilo, incluso si el diseñador web no aplica ningún estilo. Esta hoja de estilo es la hoja de estilo del agente de usuario - también conocidos como los estilos predeterminados que utilizará el navegador web para mostrar una página si no se proporcionan otras instrucciones. Por ejemplo, de forma predeterminada, los hipervínculos tienen un estilo azul y están subrayados. Esos estilos provienen de la hoja de estilo predeterminada de un navegador web. Sin embargo, si el diseñador web proporciona otras instrucciones, el navegador necesitará saber qué instrucciones tienen prioridad. Todos los navegadores tienen sus propios estilos predeterminados, pero muchos de esos valores predeterminados (como los enlaces de texto subrayados en azul) se comparten entre todos o la mayoría de los principales navegadores y versiones.
Para otro ejemplo de un navegador predeterminado, en nuestro navegador web, la fuente predeterminada es "Times New Roman"mostrado en tamaño 16. Sin embargo, casi ninguna de las páginas que visitamos se muestra en esa familia y tamaño de fuentes. Esto se debe a que la cascada define que las segundas hojas de estilo, que son establecidas por los propios diseñadores, para redefinir el tamaño de la fuente y familia, anulando los valores predeterminados de nuestro navegador web. Cualquier hoja de estilo que cree para una página web tendrá más especificidad que los estilos predeterminados de un navegador, por lo que esos valores predeterminados solo se aplicarán si su hoja de estilo no los anula. Si desea que los enlaces sean azules y estén subrayados, no necesita hacer nada, ya que es el valor predeterminado, pero si el archivo CSS de su sitio dice que los enlaces deben ser verdes, ese color anulará el azul predeterminado. El subrayado permanecerá en este ejemplo ya que no especificó lo contrario.
¿Dónde se usa CSS?
CSS también se puede utilizar para definir cómo deben verse las páginas web cuando se ven en otro medio que no sea un navegador web. Por ejemplo, puede crear una hoja de estilo de impresión que defina cómo debe imprimirse la página web. Debido a que los elementos de la página web, como los botones de navegación o los formularios web, no tendrán ningún propósito en la página impresa, se puede utilizar una hoja de estilo de impresión para "desactivar" esas áreas cuando se imprime una página. Si bien no es una práctica común en muchos sitios, la opción de crear hojas de estilo de impresión es poderosa y atractiva (en nuestra experiencia: la mayoría de los profesionales web no hacen esto simplemente porque el alcance del presupuesto de un sitio no requiere este trabajo adicional para estar hecho).
¿Por qué es importante CSS?
CSS es una de las herramientas más poderosas que puede aprender un diseñador web porque con ella puede afectar la apariencia visual completa de un sitio web. Las hojas de estilo bien redactadas se pueden actualizar rápidamente y permitir que los sitios cambien lo que se prioriza visualmente en el pantalla, que a su vez muestra valor y enfoque a los visitantes, sin que sea necesario realizar cambios en la subyacente Marcado HTML.
El principal desafío de CSS es que hay bastante que aprender, y con los navegadores que cambian todos los días, lo que funciona bien hoy Puede que no tenga sentido mañana a medida que se apoyen nuevos estilos y otros se abandonen o caigan en desgracia por una razón o otro.
La curva de aprendizaje de CSS vale la pena
Debido a que CSS puede funcionar en cascada y combinarse, y considerando cómo diferentes navegadores pueden interpretar e implementar las directivas de manera diferente, CSS puede ser más difícil de aprender que HTML simple. CSS también cambia en los navegadores de una manera que HTML realmente no lo hace. Sin embargo, una vez que comience a usar CSS, verá que aprovechar el poder de las hojas de estilo le brindará una flexibilidad increíble en la forma en que diseña las páginas web y define su apariencia. A lo largo del camino, acumulará una "bolsa de trucos" de estilos y enfoques que le han funcionado en el pasado y a los que puede recurrir nuevamente cuando construir nuevas páginas web en el futuro.