CSS

                                                                      CSS

¿Qué es CSS?

El CSS (hojas de estilo en cascada) es un lenguaje que define la apariencia de un documento escrito en un lenguaje de marcado (por ejemplo, HTML). Así, a los elementos de la página web creados con HTML se les dará la apariencia que se desee utilizando CSS: colores, espacios entre elementos, tipos de letra, ... separando de esta forma la estructura de la presentación.

Esta separación entre la estructura y la presentación es muy importante, ya que permite que sólo cambiando los CSS se modifique completamente el aspecto de una página web. Esto posibilita, entre otras cosas, que los usuarios puedan usar hojas de estilo personalizadas (como hojas de estilo de alto contraste o de accesibilidad).

¿Por qué surgió?

Las hojas de estilos aparecieron poco después que el lenguaje de etiquetas SGML, alrededor del año 1970. Desde la creación de SGML, se observó la necesidad de definir un mecanismo que permitiera aplicar de forma consistente diferentes estilos a los documentos electrónicos.

El gran impulso de los lenguajes de hojas de estilos se produjo con el boom de Internet y el crecimiento exponencial del lenguaje HTML para la creación de documentos electrónicos. La guerra de navegadores y la falta de un estándar para la definición de los estilos dificultaban la creación de documentos con la misma apariencia en diferentes navegadores.

El organismo W3C (World Wide Web Consortium), encargado de crear todos los estándares relacionados con la web, propuso la creación de un lenguaje de hojas de estilos específico para el lenguaje HTML y se presentaron nueve propuestas. Las dos propuestas que se tuvieron en cuenta fueron la CHSS (Cascading HTML Style Sheets) y la SSP (Stream-based Style Sheet Proposal).

¿Para qué sirve?

CSS es un lenguaje que sirve para dotar de presentación y aspecto, de “estilo”, a páginas web (documentos HTML). CSS no es un lenguaje de programación. Podríamos decir que es un lenguaje que suele aparecer relacionado o próximo a un lenguaje de programación o que suele colaborar con un lenguaje de programación, pero no es un lenguaje de programación propiamente dicho.

Ventajas

Con una Hoja de Estilo podemos modificar la presentación de cada elemento sin modificar el código HTML, ahorrando esfuerzo y tiempo de edición. Así, el mantenimiento del sitio web se hace más sencillo.

El lenguaje CSS ofrece una amplia gama de herramientas de composición más potentes que HTML.

Con CSS se evita tener que recurrir a “trucos” para conseguir algunos efectos.

Las Hojas de Estilo pueden usarse con otros lenguajes de programación (por ejemplo JavaScript) para conseguir efectos dinámicos en las páginas.

Se pueden especificar Hojas de Estilo para distintos navegadores.

Los usuarios con alguna discapacidad pueden definir su propia Hoja de Estilo y la regla !important obligará al navegador a suplantar la Hoja de Estilo del autor de la página.

¿¡cómo se integra CSS con html?

-Incluir CSS en el mismo documento HTML

- Definir CSS en un archivo externo

-Incluir CSS en los elementos HTML

Estructura de CSS (Selector, propiedad y valor)

Al igual que los documentos HTML, los documentos CSS son archivos de texto donde se escribe una serie de órdenes y el cliente (navegador) las interpreta y aplica a los documentos HTML asociados.

Selector: El selector es el elemento HTML que vamos a seleccionar del documento para aplicarle un estilo concreto. Por ejemplo, el elemento p. Realmente, esto es mucho más complejo, pero ya dedicaremos una serie de capítulos exclusivamente a este tema.

Propiedad: La propiedad es una de las diferentes características que brinda el lenguaje CSS e iremos aprendiendo.

Valor: Cada propiedad CSS tiene una serie de valores concretos, con los que tendrá uno u otro comportamiento.

Con todo esto le iremos indicamos al navegador que, para cada etiqueta (selector especificado) debe aplicar las reglas (propiedad y valor) indicadas.

¿Qué es minificar CSS?

Normalmente, al codificar en CSS se lucha con dos factores clave:

Legibilidad: Correcta indentación que facilite la legibilidad de las propiedades y valores por separado, favoreciendo la velocidad de modificación e introducción de cambios.

Tamaño: Cuanto más texto tenga un archivo CSS (espacios incluídos), más grande será el tamaño final del archivo, por lo que más tiempo tardará en descargarse.

En archivos CSS muy grandes esto suele influir de forma considerable, por lo que lo ideal es utilizar los llamados Minify (Minificadores) para reducir el tamaño del archivo CSS condensando toda la información, eliminando espacios, retornos de carro, etc... (y por consiguiente, haciéndolo menos legible). Esto es un paso totalmente opcional, que se realiza sólo para reducir el tamaño de los archivos CSS, por lo que no es algo que sea totalmente imprescindible, pero se considera una buena práctica.

Herencia y Cascada en CSS

La herencia y la cascada son dos conceptos básicos en CSS. Se deben comprender bien para utilizar CSS. Por suerte, no son muy difíciles de entender, aunque algunos detalles pueden ser un tanto complicados de recordar.

Ambos conceptos están relacionados, pero son diferentes. La herencia está relacionada con cómo los elementos del etiquetado de HTML heredan propiedades de sus elementos padres (los que los contienen) y los transmiten a sus hijos, mientras que la cascada tiene que ver con las declaraciones de CSS que se aplican a un documento y cómo las reglas contradictorias se anulan o no entre ellas.

En este apartado, trataremos detalladamente estos dos conceptos. Probablemente, la herencia es un concepto más fácil de captar, de manera que empezaremos con éste y después pasaremos a las particularidades de la cascada.