Tal como se vió en los ejemplos de los artículos anteriores del Manual de CSS, la sintaxis es bastante sencilla y repetitiva.

Básicamente se trata de colocar selectores de elementos (por ahora sólo hemos visto cómo seleccionar etiquetas, para asignarles estilos, pero más adelante conoceremos otros selectores), seguidos de los valores o atributos de estilo que queramos aplicar a dichos elementos.

A lo largo del manual aprenderemos más sobre la sintaxis de CSS, así como los distintos atributos disponibles para definir el formato o forma con la que se deben mostrar los contenidos. No obstante, quiero dar en este momento unas reglas básicas que debemos saber sobre la sintaxis de CSS, que nos servirán para entender mejor nuestros ejemplos e ir avanzando en el conocimiento de las hojas de estilo en cascada.

Sintaxis CSS

Veamos entonces estas reglas básicas sobre la sintaxis CSS, mediante un código de ejemplo que analizaremos con detalle:

h1 {
    font-size: 1.5rem;
}

Para definir el estilo de una etiqueta se escribe la etiqueta seguida de la lista de atributos encerrados entre llaves.

• "h1" es el selector. Es un selector de etiqueta, que se refiere a todo los elementos o etiquetas <h1> que se encuentren en el documento HTML. Como veremos a lo largo del manual, existen muchos tipos de selectores.
• "font-size" es el atributo CSS. Este atributo se refiere al tamaño de la fuente o letra. Existen decenas de atributos para las más variadas necesidades de diseño. Iremos aprendiéndolos más adelante.
• "1.5rem" es el valor que estamos asignando, en este caso al atributo "font-size" sobre todas las etiquetas H1 del documento HTML. El dato "1.5" podríamos decir que es el valor en sí, mientras que "rem" es la unidad CSS que estamos utilizando. Existen diveras unidades y las podemos clasificar por tipos. En este artículo comenzaremos a estudiarlas con más detalle.

Definición de un estilo mediante diversos atributos

Para definir un estilo se utilizan atributos como font-size, text-decoration... seguidos de dos puntos y el valor que le deseemos asignar. Podemos definir un estilo a base de definir muchos atributos separados por punto y coma. Por ejemplo:

p {
    font-size: 10pt; 
    text-decoration: underline; 
    color: black;
}

Unidades CSS

Los valores que se pueden asignar a los atributos de estilo se pueden ver en una tabla en el siguiente capítulo. Muchos estos valores son unidades de medida (Unidades CSS), por ejemplo, el valor del tamaño de un margen o el tamaño de la fuente.

Las unidades de medida CSS se pueden clasificar en dos grupos, las relativas y las absolutas. Más la posibilidad de expresar valores en porcentaje.

Unidades Relativas

Se llaman así porque son unidades relativas al medio o soporte sobre el que se está viendo la página web, que dependiendo de cada usuario puede ser distinto, puesto que existen muchos dispositivos que pueden acceder a la web, como ordenadores o teléfonos móviles.

En principio las unidades relativas son más aconsejables, porque se ajustarán mejor al medio con el que el usuario está accediendo a nuestra web. Son las siguientes:

Unidades Absolutas

Las unidades absolutas son medidas fijas, que deberían verse igual en todos los dispositivos. Como los centímetros, que son una convención de medida internacional.

Pese a que en principio pueden parece más útiles, puesto que se verían en todos los sistemas igual, tienen el problema de adaptarse menos a las distintas particularidades de los dispositivos que pueden acceder a una web y restan accesibilidad a nuestro web. Puede que en tu ordenador 1 centímetro sea una medida razonable, pero en un móvil puede ser un espacio exageradamente grande, puesto que la pantalla es mucho menor.

Se aconseja utilizar, por tanto, medidas relativas. Por adaptabilidad al medio donde se va a mostrar la página web, pero también por accesibilidad, de modo que las personas que necesiten ver los textos en unos tamaños adecuados para ellos, puedan hacerlo.

Unidades CSS basadas en porcentaje

El porcentaje se utiliza para definir una unidad en función de la que esté definida en un momento dado. Imaginemos que estamos trabajando en 12pt y definimos una unidad como 150%. Esto sería igual al 150% de los 12pt actuales, que equivale a 18pt.

También se usa el porcentaje para indicar tamaños en relación al tamaño completo. Por ejemplo, una columna de la página que ocupe el 40% del espacio disponible en el elemento donde se encuentra.

Otros valores de atributos de estilo

No todos los atributos de estilos CSS tienen valores expresados en unidades. Hay atributos como por ejempo el alineamiento de un texto que tienen un conjunto de valores posibles, como por ejemplo "center", "left" o "right", entre otros.

Cuando tenemos un atributo CSS que acepta un conjunto de valores, no nos queda otra que aprendernos qué valores posibles puede tener. Aunque en verdad, no se trata de memorizar nada, sino que a medida que vayamos adquiriendo experiencia estos valores posibles los iremos aprendiendo y memorizando de manera natural. Además, siempre existen las referencias de CSS, que nos permiten consultar de manera rápida qué valores podemos aplicar a cada atributo.

Valores de colores en CSS

Un ejemplo de valores de CSS que no se indican con las unidades tradicionales son los colores.

Los colores se expresan con valores RGB, igual que los que conocemos para los colores HTML. Con la salvedad que un color se puede especificar también con tres números hexadecimales, en lugar de 6, como era obligatorio en HTML.

Por ejemplo #fff equivaldría a #ffffff, o #123 sería #112233.

a {
    color: #39c;
}

Habría sido equivalente a escribir:

a {
    color: #3399cc;
}

Además, los colores se pueden especificar también en valores RGB decimales, con la notación rgb(r,g,b), siendo los valores de r, g, b números entre 0 y 255, por ejemplo rgb(100,0,255).

body {
    background-color: rgb(220, 220, 240);
}

Otra notación posible es rgb(r%,g%,b%), siendo cada uno de los r%,g%, b% un valor entre 0 y 100, por ejemplo rgb(100%,50%,0%), que sería todo de rojo, la mitad de verde y cero de azul. Además, más recientemente se pueden escribir colores con canal Alpha, es decir, indicando el grado de transparencia que podría tener un color.

Valores de URL

Otro tipo de valores que se pueden utilizar en las hojas de estilo en cascada son las URL, que sirven para especificar rutas hacia elementos como imágenes a colocar en fondos de elementos.

Las URL en CSS se especifican con la notación url(valor), siendo "valor" la URL a la que queremos dirigirnos. La URL se puede indicar de manera absoluta o relativa.

Si la URL es absoluta no hay duda de la interpretación, ya que se indicará la URL completa. Ahora bien, si se trata de una URL relativa puede tener distintas consideraciones de interpretación por parte del navegador.

• Si el valor de url() está escrito en un archivo .css externo, entonces la url relativa se interpreta desde el documento CSS donde estamos.
• Si el valor de url() está escrito en un documento HTML, entonces se interpreta desde el archivo .html donde estamos.

Además, una URL se puede indicar con comillas dobles, simples o sin comillas. Por ejemplo:

body {
    font-size: 1rem; 
    background-image: url(http://www.desarrolloweb.com/images/mi_imagen.gif);
}

También lo podemos indicar con comillas dobles. Además en este segundo ejemplo estamos usando una ruta relativa para la URL:

article {
    color: #fff;
    background-image: url("../images/otraimagen.jpg");
}

Conclusión

Hasta aquí, he explicado mucha información general con respecto a la sintaxis CSS y las unidades de medida CSS disponibles.

Ha sido todo un poco teórico, pero en el siguiente capítulo podrás encontrar una lista de los atributos de las hojas de estilo en cascada, que te ayudarán a realizar ejercicios más prácticos.

Si deseas además afianzar estos conocimientos de una manera más práctica, te recomendamos ver el vídeo sobre CSS que habla de la sintaxis y unidades.