En el lenguaje de programación… ¿Qué es CSS y para qué sirve?

CSS corresponden a las siglas de la expresión inglesa “Cascading StyleSheets”, que se traduce como “Hojas de estilo en cascada” y hace referencia al tipo de lenguaje empleado en diseño gráfico para presentar, de manera estructurada, un documento que fue escrito en un lenguaje marcado. Describe elementos, formas, sintaxis del lenguaje, colores, textos, fondos, tablas y el modelo de cajas que visualizamos en una pantalla. En definitiva, lo que hace es definir, crear y mejorar la presentación de un documento basado en HTML. Para muchos diseñadores, el CSS se ha convertido, a día de hoy, en uno de los pilares fundamentales de su día a día. 

El CSS fue creado por una comunidad internacional que desarrolla estándares que aseguran el crecimiento de una página web. Dicha comunidad es denominada World Wide Web Consortium (W3C), cuyo objetivo es conseguir páginas webs que puedan estar disponibles para todas las personas.

El CSS se desarrolló en distintos niveles a lo largo del tiempo en los que destacamos:

• CSS1: es una hoja de estilo en cascada, nivel 1 y fue lanzada en diciembre 1996.
• CSS2: se cimenta en el CSS1 y define más de cien propiedades, cada una de ellas con su lista de valores permitidos. 
• CSS3: define más de doscientas propiedades y no tiene una fecha de creación específica, puesto que representa una evolución continua del lenguaje de hojas de estilo en cascada, que comenzó con su primera versión denominada CSS1 y seguida por la versión CSS2.

Podemos encontrar un CSS u otro en función del navegador que se utilice. La comunidad World Wide Web Consortium trabaja para que las páginas webs puedan ser visibles en todos los navegadores y para todas las personas. De esta manera, se consigue que los sitios webs tengan un diseño coherente, atractivo y responsive en función del dispositivo en el que se visualice. 

¿Cuál es la sintaxis que sigue el CSS?:

El CSS se compone de una parte denominada “Selector” y otra “Declaración”. En algunos casos, puede existir también un comentario. 

• El Selector: hace referencia a los elementos a los que se les aplican estilos CSS y pueden ser H1, H2, párrafo, formulario, etc. Esto se traduce en que su labor es indicar “que hay que hacer”. Hay varios tipos de selector:
  • Selector universal: se emplea para seleccionar todos los elementos dentro de una página y se muestra con un asterisco de la siguiente manera: (*)
  • Selector de tipo o etiqueta: se utiliza para agrupar reglas con varias etiquetas. Los selectores van separados unos de otros mediante coma (,)
  • Selector descendente: aumentan la precisión del selector de tipo o etiqueta. Selecciona aquellos elementos que están dentro de otros elementos y se marca con punto (.)
  • Selector de clase: se utiliza para destacar una frase o palabra dentro de una página y se representa de la siguiente manera: .destacado 
  • Selector de ID: permite seleccionar un elemento de la página a través del valor de su atributo id y se muestra a través de la siguiente manera #destacado
• Declaración: está compuesto por la propiedad que hace referencia al color, al ancho o a la fuente y al valor que hace referencia a la alineación izquierda, derecha o centrada. En palabras más simples el indicar específica a quién hay que hacerlo. 
• La propiedad o atributo: hace referencia a la característica que se va a cambiar. 
• El valor: indica la propiedad que se desea modificar.
• El comentario: va escrito entre /* y para finalizar al contrato */. 

Una de las principales ventajas del CSS es que es posible utilizar una misma plantilla para dar formato a varios sitios web, y si es necesario realizar cambios, basta con modificar el elemento en la plantilla y actualizar los sitios vinculados. De esta manera, se ahorra una importante cantidad de tiempo al escribir las órdenes CSS. 

Además de esta funcionalidad, puede ser utilizado para otras tareas como, por ejemplo, crear elementos interactivos, diseñar menús y listas, cambiar el color de un hipervínculo para que el usuario sepa que ya lo ha visitado o modificar el color del menú si se desliza el ratón a través de él. Otra de las ventajas es que separa, por un lado, el contenido y por otro, cómo va a aparecer dicho contenido visualizado en el documento. Nos sirve también para presentar el documento en diferentes estilos y evita tener archivos con un peso demasiado elevado. Simplifica al máximo la creación de una página web, haciéndola flexible y con un mayor control sobre sus diferentes funcionalidades. Si se realiza una modificación en CSS, se visualizará al momento en la página web. 

Un lenguaje que facilita enormemente la creación de hojas de estilo y la elaboración de páginas webs visibles para todas las personas.