Definir estilos mediante el lenguaje CSS es relativamente sencillo. Su sintaxis contiene una serie de reglas que son interpretadas por el navegador y luego se aplican a los elementos del documento HTML. Las reglas están formadas por las siguientes partes: selectores, propiedades y valores.
Se puede definir una regla CSS como un conjunto de parámetros que permiten apuntar a uno o a varios elementos HTML para indicar cambios de estilos mediante declaraciones, que son parejas de propiedades con sus valores. La sintaxis básica de una regla es la siguiente:
selector {
propiedad: valor;
}
Una regla está compuesta de una parte de selectores, un símbolo de llave de apertura ({), otra parte conocida como declaración y, finalmente, se cierra con el símbolo de llave de cierre (}). Entre las llaves de apertura y cierre puede introducirse tantas declaraciones como sea necesario.
Los selectores
Los selectores permiten indicar los elementos a los que se aplica la regla CSS. Puede indicarse un único elemento o varios, separados por coma. Hay muchos tipos de selectores, pero los más importantes son los genéricos, correspondiente al nombre de la etiqueta HTML, los de identificador, que usan el nombre del atributo id, y los de clase, que usan el valor del atributo class.
Ejemplo de regla CSS con los tres tipos de selectores:
div, #id, .clase {
color: red;
}
Tal y como se puede observar, los tres selectores están separados mediante una coma. En este caso, se aplicará el color rojo a todos los elementos <div> de un documento HTML, a todos los elementos que tengan el atributo id='id' y a todos los elementos que tengan el atributo class='clase'.
Las declaraciones
Las declaraciones son parejas «propiedad-valor» que permiten especificar los estilos de un conjunto de elementos; y se encuentran dentro de las llaves { y }. Una declaración consiste en un nombre de propiedad, seguido de dos puntos (:) y un valor de la propiedad. Se pueden hacer múltiples declaraciones, y se deben separar con el símbolo punto y coma (;).
Las declaraciones propiedad: valor; se finalizan con el símbolo ;. Cuando hay una única declaración no es obligatorio y puede omitirse, pero si hay más de una y se omite, el código no será válido.
Propiedades
Las propiedades son las características que se modifican en el elemento apuntado a través del selector. Por ejemplo, con la propiedad color puede modificarse el color del texto, con la propiedad font-size puede cambiarse el tamaño del texto, y con la propiedad background puede indicase el color de fondo.
La especificación estándar CSS 2.1 define un total de 115 propiedades, y cada propiedad viene acompañada con su lista de valores permitidos. Las últimas versiones de CSS (de nivel 3) incluyen más de 200 propiedades.
Ejemplo de uso de varias propiedades CSS:
.selector {
color: red;
font-size: 1.2em;
font-weight: bold;
margin: 10px;
padding: 5px;
}
Es una buena práctica ordenar las declaraciones alfabéticamente por el nombre de la propiedad, tal y como se observa en el ejemplo.
Valores
Cada propiedad CSS admite una serie de valores concretos, con los que se especificará un cambio de estilo. Por ejemplo, las propiedades de color sólo admiten valores que definen colores, como es de esperar; en el caso del color rojo se puede usar el nombre predefinido red, el código hexadecimal #FF0000 o los valores del modelo RGB, como sería rgb(255, 0, 0).
Ejemplo de valores CSS:
.selector {
color: red;
color: #ff0000;
color: rgb(255, 0, 0);
color: hsl(0deg, 100%, 50%);
}
En este ejemplo, todas las declaraciones de color indican el color rojo. Sin embargo, cuando una propiedad se repite sólo se toma en cuenta la última.
Sangrado del código CSS
Es habitual que las declaraciones se muestren cada una en una línea y con un sangrado diferente al resto de las reglas CSS, quedando todo el bloque de dentro de las llaves ({}) desplazado hacia la derecha, ya sea mediante espacios o con tabuladores. Esta estructura visual facilita la lectura.
Es una buena práctica sangrar las declaraciones con el fin de mejorar la legibilidad del código CSS. Esto también facilita la lectura de código ajeno.
La sintaxis de CSS en el atributo ‘style’
Cuando se hace uso del atributo style la sintaxis es más simple. Ya no hace falta el uso de selectores, pues el atributo ya está ubicado en el elemento que se quiere modificar. El valor de este atributo es una lista de declaraciones (parejas «propiedad-valor») separadas por punto y coma.
Ejemplo de código HTML usando el atributo style:
<p style="color: red; font-size: 1.2em">Texto.</p>
Tal y como se puede ver en este ejemplo, el valor del atributo style es una cadena de texto formada por una lista de declaraciones CSS. El estilo CSS sólo se aplicará sobre este elemento p en concreto, y en ningún otro párrafo.
Las reglas arroba
Más allá de las reglas CSS para indicar cambios de estilos usando declaraciones, existe otro tipo de reglas llamadas reglas arroba o «at-rules» (en inglés) que permiten indicar comportamientos específicos para ciertos contextos. Las más conocidas son @charset, @media o @import.
La sintaxis de este tipo de reglas es diferente. Tal y como se puede ver, empiezan con el símbolo @ (arroba) que actúa como un prefijo. A este prefijo le sigue una palabra clave que es el identificador de este tipo de reglas.
@identificador (reglas);
Después del identificador se introducirá el valor deseado, que también puede ser una condición o una serie de palabras clave. Cada identificador tiene su propia estructura. Se termina con un punto y coma (;) obligatorio.
Distinción entre mayúsculas y minúsculas
Cuando se trabaja con documentos HTML, los selectores de elementos como sería un párrafo (<p>) o una imagen (<img>) no distinguen entre mayúsculas y minúsculas. Por ejemplo, usando el selector DIV se apunta a elementos <div>. En cambio, en los documentos XHTML sí que se distingue.
Por otra parte, tanto en documentos HTML como XHTML, los selectores de clase (atributo class) y los selectores de identificador (atributo id) distinguen entre mayúsculas y minúsculas. Por ejemplo, el selector .box no apunta a los elementos HTML que tengan el atributo class=BOX.
En el caso de las propiedades CSS y sus valores, no se distingue entre mayúsculas y minúsculas. En este sentido, la declaración COLOR: BLUE es equivalente a color: blue. Pero se recomienda utilizar siempre las minúsculas, ya que esto añade cierta coherencia y facilita la legibilidad.
No obstante, hay algunas excepciones en los valores CSS. Los valores de la propiedad font-family y los parámetros de las funciones url() y attr() sí que distinguen entre mayúsculas y minúsculas.
