¿Qué es CSS? ¡Función principal de esta herramienta!

¿Qué es CSS? Ven y descúbrelo en este interesante artículo. CSS nació para cambiar para siempre el concepto de diseño y funcionalidad de las páginas web.

¿Qué es CSS?

Es un lenguaje de estilo diseñado para definir los aspectos visuales de los elementos electrónicos creados mediante HTML y XHTML, tales como: color, tamaño, apariencia, etc. Básicamente, trata de compensar las limitaciones de diseño y la complejidad de HTML.

No siempre los estilos incorporados en cada cada una de las partes de una página web satisfacen los requerimientos del diseñador. Sin embargo, CSS constituye la mejor manera de cambiar la forma en que los elementos son vistos en pantalla, ya que separa los contenidos y la presentación.

Por otra parte, CSS permite la creación de documentos bien definidos, con sentido completo, pero menos complejos, de fácil acceso y de sencillo mantenimiento. Además, permite que estos documentos puedan ser vistos desde cualquier medio o dispositivo.

Evolución

Su nacimiento se debe al auge del internet y a la expansión del lenguaje HTML para el desarrollo de documentos electrónicos. En principio, no existían estándares para la edición de este tipo de documentos, por lo cual se hizo necesaria la creación de un lenguaje de hojas que permitiera aplicar diferentes estilos de manera consistente.

CSS hizo su aparición formal en el año 1995, producto de la unión de la CHSS y de la SSP, propuestas presentadas ante la World Wide Web Consortium (W3C), en su búsqueda de alcanzar la estandarización de un lenguaje de hojas de estilos para lenguajes HTML.

Un año después, la W3C dio a conocer su primera recomendación oficial, llamada CSS nivel 1. Sin embargo, en 1997 decidió separar el trabajo de CSS del trabajo de DOM y HTML. Así pues, en 1998, el grupo de trabajo de CSS sacó a la luz su primera sugerencia por separado, a la cual denominó CSS nivel 2.

Casi diez años después, en 2007, se realizó la última actualización conocida de la CSS nivel 2, denominada CSS 2.1. De hecho, esta versión es la que sigue usándose en los navegadores de hoy en día.

Se sabe que de manera paralela, la W3C ha venido desarrollando lo que sería la recomendación CSS nivel 3. Sin embargo, aunque se han incorporado algunos elementos en los navegadores, aún no se tiene nada oficial al respecto.

También se conoce que la adaptación por parte de los navegadores, quienes se encargan de interpretar el código HTML y CSS para que las imágenes sean visualizadas a través de su motor, no ha sido fácil. Tanto que la primera versión de soporte completo para CSS se publicó en el año 2000. Se refería a la CSS nivel 1 y pertenecía al navegador Internet Explorer 5 de Mac. A la fecha, ningún navegador brinda soporte avanzado a CSS 2.1.

Al respecto, se tiene que en la actualidad, los navegadores Safari y Opera son quienes más se acercan al soporte deseado para la CSS, pues incluyen algunos aspectos pertenecientes a la no terminada revisión CSS 3, y brindan soporte casi perfecto a la versión 2.1. Les siguen Firefox y Google Chrome, pero su soporte a la versión 3 sigue siendo menos avanzado.

Por su parte, Internet Explorer hasta su versión 6, presentó marcadas deficiencias en cuanto al soporte requerido por la CSS 2.1 se refiere.

¿Cómo funciona CSS?

Básicamente, al desarrollar una página web mediante los lenguajes HTML y HTML, se definen los contenidos y las funciones de cada elemento dentro de la página. Posteriormente, a través del lenguaje CSS se establece el aspecto visual de cada elemento, por ejemplo: tipo y tamaño de letra del texto, separación entre párrafos, posición de los elementos, etc.

Características

CSS es un lenguaje cuyo uso se ha expandido vertiginosamente entre los diseñadores de páginas web. Esto gracias a sus increíbles bondades, entre ellas están:

• Es flexible, ofreciendo diversas alternativas para realizar la misma tarea. De aquí se generan tres formas de incluir CSS en un documento electrónico de HTML: en el mismo documento, en un archivo externo y dentro de los elementos de HTML.
• Se pueden definir diferentes estilos para varios medios, entre ellos: proyectores, pantallas, monitores, y dispositivos móviles, etc.
• Define propiedades específicas para determinados medios, permitiendo modificar el estilo de una página dependiendo de la funcionalidad del dispositivo. Esto ocasiona la existencia de cuatro reglas para establecer los medios a los cuales se les van a aplicar los estilos CSS: @media, @import, etiqueta <Link>, y la referida a la mezcla de varios medios.
• Cuando se establece el valor de una propiedad en un elemento, todos los descendientes de ese elemento heredan el mismo valor.

Elementos

Los estilos de hojas de CSS están compuestos por los siguientes elementos básicos:

• Regla: Constituye cada uno de los estilos pertenecientes a una hoja de estilos CSS. A su vez, está conformada por los selectores y las declaraciones.
• Selector: Se refiere al elemento HTML sobre el cual se va a aplicar el estilo.
• Declaración: Se trata de la especificación de estilos aplicados a los elementos. Puede contener una o varias propiedades. A través de las declaraciones, se deja claro lo que hay que hacer.
• Propiedad: Hace posible la modificación del aspecto de uno o varios elementos.
• Valor: Es resultado de la modificación de las características de los elementos.

Generalmente, un archivo CSS contiene varios estilos y cada uno de ellos puede incluir una gran cantidad de elementos. De igual manera, una especificación de estilos puede contener diversas combinaciones propiedad/valor.

Selectores

Los selectores, resultan necesarios para la creación de páginas web, pues ellos son quienes indican a cuál elemento hay que aplicarle el estilo CSS. Garantizan la forma correcta de hacerlo, permitiendo la selección exacta de los elementos dentro una página web.

A pesar de la existencia de varios tipos de selectores, a continuación se nombrarán los cinco principales:

• Universal: Se identifica mediante un asterisco. Selecciona todos los elementos de una página, lo que lo convierte en un selector de poco uso, ya que no es frecuente que un mismo estilo requiera ser aplicado a la totalidad de los elementos de la página.
• De tipo o etiqueta: Se usa cuando la etiqueta HTML de los elementos de la página coincide con el valor del selector. Para su uso, sólo se requiere indicar el nombre de la etiqueta asociada al elemento que se está seleccionando. Generalmente, se aplica en elementos tipo párrafo.
• Descendente: Se refiere a la selección de elementos que se encuentran entre las etiquetas de apertura y cierre de otros elementos. Es decir, selecciona elementos que se encuentran dentro de otros elementos, a quienes se les pueden aplicar diferentes estilos CSS, siempre y cuando sean del mismo tipo. Garantiza la precisión de los selectores de tipo o etiqueta.
• De clase: Solventa las limitaciones de selección de los tres tipos de selectores anteriores., pues permite aplicar estilos a un sólo elemento de la página, mediante la identificación directa de la regla. Son de gran utilidad en diseño de páginas complejas, ya que un mismo valor del atributo class puede estar incluido en varios elementos de una misma página.
• De ID: Mejora la eficiencia del selector de clase en la aplicación de estilos a un sólo elemento de una página. Funciona cuando se quiere seleccionar un elemento  a través de su atributo id. El valor de este atributo no se puede repetir en más de un elemento de una misma página.

Es importante destacar que CSS permite el uso de diversas combinaciones, partiendo de estos selectores básicos.

Propiedades

Como ya se ha mencionado, las propiedades permiten diseñar el aspecto de las páginas HTML. Entre las principales técnicas se encuentran:

• Shortland: Es utilizada por todos los diseñadores de páginas web. Permite crear hojas de estilos más concisas y fáciles de leer, debido a que a través de ella se puede establecer el valor de diferentes propiedades a la misma vez.
• HasLayout de Internet Explorer: Es básicamente un solucionador de errores relacionados con CSS, el cual se basa tanto en en las características del navegador como en otros errores existentes.
• Limpiar float: Permite corregir los problemas originados por los elementos flotantes, forzando la altura de los elementos contenedores.
• Elementos de la misma altura: Trata que todas las columnas de una página sean de la misma altura. Se basa en el uso de la propiedad display de CSS.
• Tipografía: Son técnicas que garantizan que los usuarios vean correctamente el tipo de letra usado en el diseño de la página, indistintamente de la fuente que se emplee.

Formas de incluir CSS en HTML

Debido a la flexibilidad de CSS, el diseñador puede escoger la forma en la cual desea incluir hojas de estilos en los documentos HTML. Éstas son:

• En el mismo documento HTML: Es ideal cuando se tienen pocos estilos definidos o cuando se desea incluir estilos complementarios en una página HTML específica. Se logra mediante el uso de la etiqueta <style> y sólo pueden ubicarse en la cabecera del documento.
• En un archivo externo: Mediante la etiqueta <link>, a través de un archivo simple CSS, se enlazan estilos a las páginas HTML. El archivo CSS contiene todos los estilos que van a ser incluidos y la página permite el enlace de la totalidad de archivos que se necesiten. Un mismo archivo puede ser incluido en varias páginas a la vez, lo que garantiza la homogeneidad del contenido en todas ellas. Es la forma de mayor uso en la actualidad.
• En los elementos HTML: Requiere definir el estilo de cada elemento por separado, lo que lo convierte en el método menos usado por los diseñadores de HTML. Se utiliza sólo para incluir un estilo muy específico correspondiente a un solo elemento dentro del documento.

Definición de medios

Los principales dispositivos considerados para la aplicación de las hojas de estilos CSS, son: impresoras, pantallas, proyectores, televisores, dispositivos móviles, entre otros. Para cada uno de ellos existe una descripción específica que permite la definición del estilo. Las más usadas son screen, para establecer la apariencia del documento en pantalla; print, referida al aspecto del documento en cuanto a su impresión; y handheld, orientada hacia la visualización de los documentos en dispositivos móviles.

Ahora bien, como mencionamos anteriormente, CSS permite modificar el estilo de un documento dependiendo de la funcionalidad del medio, o dispositivo, empleado para la visualización del mismo. De esta forma, se tienen las siguientes reglas de definición de medios:

• Estilo @media: Permite identificar de manera rápida y directa el medio al cual se le aplicará el estilo que conforma la regla. El nombre de éste se escribe inmediatamente después de @media. Si se trata de varios medios para un mismo estilo, se escriben los nombres de todos, separados por comas. Un ejemplo de este tipo de definición, es: @media screen { body { font – size: 13px } }, lo cual significa que el tamaño de visualización de la letra en pantalla debe ser 13 píxel.
• @import: Se utiliza cuando se enlazan archivos externos a documentos HTML. Para ello, después de escribir @import, se define la URL del archivo CSS, seguida del nombre del medio al cual se le va a aplicar el estilo. Por ejemplo: @import url (“estilos_impresora.css”) print. Lo que quiere decir que cuando el documento se imprime, se deben cargar los estilos incluidos en el archivo externo CSS. Si se trata de varios medios, sus nombres deben separarse por comas. Si en la regla no se especifica el medio, el navegador sobreentiende que el estilo debe ser aplicado a todos los medios por igual.
• < link >: También es empleado cuando se desean incluir estilos enlazados a través de varios archivos externos CSS. Su estructura es un poco más complicada, por cuanto requiere la inclusión del atributo media para cada uno de los estilos de cada archivo. Su forma básica es la siguiente: < link rel= “stylesheet” type=”text/css” media=”screen” href=”básico.css” />. Lo cual indica que cuando la visualización del documento sea a través de una pantalla, deben considerarse los estilos incluidos en el archivo CSS.
• Mezcla de métodos: Básicamente, permite la definición de medios a través de la combinación de cualquiera de las tres formas anteriores. <link real=”stylesheet” type=”text/css” media=”screen” href=”básico.css” /> @import url(“estilos_seccion.css”) screen; @media print {/* Estilos específicos para impresora */ }. Esto significa que los estilos que se visualizan en pantalla, provienen de un archivo enlazado con la etiqueta < link > e incluido en la regla @import. Adicionalmente, el estilo de impresión está definido mediante la regla @media.