CSS

CSS

CSS son las siglas en inglés que corresponden a “Hojas de Estilo en Cascada” Cascading Style Sheets, que se refiere a un lenguaje de programación. Este se encarga del diseño y la apariencia que tendrá un sitio web, es decir, como lo verán los usuarios.

Se trata de una tecnología aprovechada por diversos sitios de internet para crear páginas y aplicaciones visualmente atractivas e interfaces de usuario escritas en HTML o XHTML. Puede ser aplicado a cualquier documento XML, incluyendo XHTML, RSS, XUL y abarca opciones relativas al color, la forma de la letra, fuentes, márgenes, ancho, líneas y más.

Las hojas de estilos existen desde la década de los 80 y CSS fue diseñada para suministrarlas a la web. Fue propuesto inicialmente por Håkon Wium Lie en octubre de 1994, pero al estar entre muchos otros lenguajes de hojas de estilo dio lugar a varias discusiones. Finalmente, en 1996 fue recomendado por la W3C debido a la influencia de Bert Bos quien es coautor y cocreador de CSS.

Funcionamiento básico

CSS funciona como un mecanismo complementario de HTML, ya que permite indicarle al navegador el estilo que debe poseer al mostrar la información. Por ejemplo, HTML le indica qué parte es un subtítulo, enlace o párrafo y CSS le señala el color, fuente, el tamaño, la alineación y los aspectos estéticos que debe poseer.

Ha evolucionado con el avance de internet, pues con la diversificación de los buscadores fue necesario estandarizar los comandos. Por tal razón, el World Wide Web Consortium o W3C en un esfuerzo por garantizar variedad y satisfacer la demanda de los diseñadores, lo recomendó.

Funcionamiento

 

Por otra parte, funciona con Javascript para potenciar las funciones que se aplican a las webs. Un ejemplo de ello es el cambio del color de los vínculos o links una vez que ya fue visitado, ayuda a crear elementos interactivos, diseñar menús y todo un mundo donde la creatividad es la mayor ayudante.

Es un lenguaje ampliamente utilizado para dar formato a sitios webs, por ello se puede decir que es universal. Gracias a esta característica se puede emplear en Edge, Safari, Chrome, entre otros y darle el estilo que requiere el usuario.

Sintaxis

CSS tiene una sintaxis que emplea palabras claves en inglés para especificar las propiedades del estilo y es muy fácil de usar. Sin embargo, posee una serie de reglas que a su vez tienen selectores y declaraciones. Una estructura básica comprende:

Sintaxi

Selectores

En esta categoría de la estructura se aplican estilos que coincidan con la etiqueta o el atributo señalado. Dentro de los selectores se pueden señalar los siguientes:

  • Universal: Es el que se utiliza para todos los elementos de la página, por ejemplo colocar el margen de la web.
  • De etiqueta: Este selector distingue los elementos del HTML cuya etiqueta combine con el valor del selector. Por ejemplo, h1{ color: blue; } p: { color: black }, lo que indica que los títulos de la página estarán en color azul y el párrafo en color negro.
  • Descendente: Se trata de añadir una característica a un elemento cuando se encuentra entre las etiquetas de apertura y cierre. Por ejemplo, <p><div><span>Texto span</span></div><p>.
  • Atributos: Este selector permite elegir elementos HTML en función de sus propiedades. Un ejemplo es [type=”text”] {width: 120px; }, lo que indica que en formato de tipo texto se aplicará un ancho de 120 px.
  • Selector de ID: Es el encargado de definir estilos sobre un elemento y se caracteriza por la necesidad de anteponer el signo numeral. Por ejemplo, #idelemento{ text- align: center; color: blue; }, lo que indica que los textos HTML con el atributo id estarán centrados y serán de color azul.

Existen otros selectores que le permiten dar mayor calidad visual a la página web. Estos se pueden incluir en el documento de manera interna, externa o entre líneas.

Declaraciones

Las declaraciones en la sintaxis se refieren a una lista unida. Cada declaración consiste en una propiedad, dos puntos (:), y un valor. En caso de que haya muchas declaraciones en un bloque, estas se separan con punto y coma (;).

Las propiedades tienen un conjunto de posibles valores que afectan a un elemento o a un grupo particular de elementos. Por su parte, el valor puede estar compuesto por una palabra clave, por ejemplo center, o un número, por ejemplo, 150px (150 pixeles).

Versiones

CSS se ha creado en perfiles y niveles, donde cada uno se construye sobre el anterior incorporando nuevas funciones y potenciando su capacidad. Las versiones que se manejan son:

Versiones

  • CSS1: Es la primera versión y estuvo disponible desde el año 1995 hasta el 2008. Esta incluye funciones de fuente, color y atributo de texto, alineación, propiedades de caja, presentación de listas e identificación.
  • CSS2: Apareció en el año 1998 e incluía mejoras en la programación. Se incluye funcionalidades de capa, el concepto de "media types", sombras, texto bidireccional, soporte para audio, entre otras. Tuvo una versión 2.1 que corrigió algunos errores de la versión original.
  • CSS3: Es la versión que se emplea en la actualidad desde el año 2011 y es la más completa. Está dividida en módulos que añaden funcionalidades distintivas de manera que sea compatible con las anteriores.

Ventajas

El aspecto estético de una web está muy relacionado con la forma en cómo se transmite un mensaje y la usabilidad de una plataforma. Por ello, al implementar CSS puedes disfrutar de los siguientes beneficios:

Ventaja

 

  • Facilita la edición: En la mayoría de las páginas se administra gran cantidad de información, lo que puede ser complejo si no se posee herramientas adecuadas. CSS crea estilos ajustados a las necesidades del usuario y ahorra tiempo.
  • Brinda consistencia a la web: Al emplear la hoja de estilo cascada en forma correcta, se puede aplicar un estilo a la web y en caso de modificación, solo se cambia la regla. Es mucho más sencillo y económico.
  • Accesibilidad: Posee hojas de estilos estandarizadas que es accesible a todo tipo de usuario, buscador o dispositivo. La aplicación de los cambios es eficaz en móviles, PC o laptops.
  • Estimula la creatividad: Debido a la amplia gama de funciones, el uso de CSS le permite a los diseñadores crear obras de arte digitales de manera rápida y sencilla. Sin duda, simplifica las labores.

Además, a diferencia de otros lenguajes, CSS emplea menos códigos, por lo que se puede aplicar en diversas webs. Esto se traduce en archivos pequeños y en menor tiempo de carga, optimizando el rendimiento.

Referencias

  • Wikipedia: https://es.wikipedia.org/wiki/CSS
  • Introducción a CSS y sintaxis básica. Currículos exploratorios: http://contenidos.sucerman.com/nivel3/web2/unidad3/leccion1.html
Subir