Colores Efímeros

Básicos: Sintaxis de CSS

Escrito el 12 de Agosto de 2009

Con este primer “básico” quiero dar comienzo a una serie de artículos en los que explicar las cosas más básicas acerca de aquellos lenguajes y herramientas que usamos a la hora de desarrollar en el mundo web. Y una muy buena forma de comenzar es hablando sobre CSS y su sintaxis.

Por si aún no lo tenéis claro, CSS es un lenguaje que se utiliza para aplicarle estilos al contenido de nuestras páginas web. ¿Qué significa eso de dar estilos? Muy sencillo, dar estilos significa poner bonita una página. Especificarle un tipo de letra, su color, su tamaño. Decir dónde se coloca cada bloque de textos, qué color de fondo van a llevar. Significa poner imágenes decorativas, bordes. En definitiva, todo lo que tenga que ver con el aspecto de una web se hace (o se debe hacer) mediante CSS.

A la hora de escribir todas las reglas que definirán todas estas cosas con las que pondremos bonita la web, se debe seguir una sintaxis concreta para que el navegador web pueda entender qué es lo que queremos decir con cada regla. Esta sintaxis está estandarizada por el W3C, y podéis leer todo lo que queráis sobre ella en el documento sobre CSS que tienen disponible.

La sintaxis de CSS es muy sencilla, sigue la siguiente estructura:

selector {
	propiedad: valor;
	propiedad: valor;
	propiedad: valor;
}

En el trozo de código anterior vemos como hay agrupadas entre unos símbolos de llave ({ }) una serie de pares “propiedad-valor”. Estas propiedades se corresponderían con todo aquello que queramos definir en lo referente a aspecto (color de fondo, tamaño de letra, etc.) y deben estar separados por el símbolo de dos puntos (:). Además, después del valor asociado a una propiedad debe colocarse el símbolo de punto y coma (;) para dar por finalizada la asignación de valores a la propiedad.

Esta agrupación de propiedades se aplicará sólo sobre aquellos elementos que coincidan con lo especificado en el selector. Pongamos un ejemplo para verlo más claro: Imaginad que queremos que los enlaces de nuestra web sean rojos y no estén subrayados.

a {
	color: red;
	text-decoration: none;
}

Como podéis ver he definidos dos pares “propiedad-valor” que determinan el color de letra que quiero, en este caso red para el color rojo, y que no se quiere subrayado. Estas dos propiedades se encuentran englobadas dentro de un grupo con el selector que especifica que sólo se aplicará a todos los elementos que sean A (enlaces) en nuestra página web.

A primera vista puede parecer muy sencillo, pero hay varios conceptos algo más complicados de los que hablaré en próximos “básicos”, como pueden ser todos los tipos de selectores que hay, la especificidad de los mismos, la aplicación de propiedades en cascada, etc.

• Categorías Básicos, Web
• 1 comentario