Página Anticuada. Visita la nueva versión.

La Sintaxis del CSS

En la Hoja de Estilos que vamos a crear con el Notepad no hay que indicar nada más que el estilo y su definición o más técnicamente hablando, el selector y su declaración, que juntos componen la Regla CSS.

El selector puede ser un nombre aleatorio inventado por nosotros, pero sin espacios intermedios ni símbolos, ni guiones, ni nada. Todo seguido. En el caso de querer variar un estilo ya predeterminado, lo escribiremos tal y como es.

En primer lugar se escribe el selector con un punto delante ( .miparrafo .mititulo .titulocentrado .parrafofondoverde .resaltado etc, etc, etc) o en el caso de querer variar uno de los predeterminados, solo su nombre ( p, pre, h1, code, etc).

Tras cada uno de esos selectores y sin preocuparnos demasiado en la cantidad de espacios en blanco que pongamos entre ellos, pondremos la declaración recogida entre corchetes { y }. Por cierto, se escriben pulsando la tecla "Alt Gr" y a la vez las teclas que hay a la derecha de la "ñ". Asi, mirad . . . . { . . .}. . .{}{ , je je je.

Os muestro un ejemplo. Más tarde os cuento el significado de lo que hay entre los corchetes.

 .selector  { propiedad1:valor1 ; propiedad2:valor2 ; propiedadX:valorX ;}
 .resaltado { font-size: 14px ; font-style: italic ; color: red ;}
 p          { text-indent: 10px ;}

Como véis, entre los corchetes se pone cada propiedad (característica), dos puntos y su valor seguido de punto y coma para separar todo eso de la siguiente propiedad a definir.

Si en lugar de crear un nuevo estilo lo que queréis es variar alguno de los estilos predeterminados, NO pondremos el punto delante del selector. Por ejemplo, para que los parrafos aparezcan de color azul, hariamos:

p { color: blue; }

Donde "p" es el selector predeterminado para los párrafos, "color" una propiedad que define el color del texto de ese párrafo y "blue" es el valor que queremos darle a esa propiedad (azul, se entiende). El punto y coma de la última propiedad que metamos entre los corchetes no es obligatoria pero si muy recomendable. En cuanto a los espacios en blanco, poner tantos como queráis, de forma que la Hoja de Estilo quede fácil de ver, es decir, clarita. Obviamente si lo ponéis todo junto os liaréis ligeramente a la hora de querer retocarla, pues los valores no se verian bien. Un buen método es poner en línea los primeros corchetes, tal y como véis en el ejemplo de arriba, pero eso ya es cosa vuestra, cuestión de manias.

Ya solo nos falta conocer cuantas propiedades distintas hay, que valores pueden tener cada una de ellas y para que sirven. Pero eso lo vemos en la siguiente lección. Verdad que esto está requetefácil? Si hasta yo se hacerlo!! Vamos que ya queda menos.