Sintaxis general CSS.

La sintaxis en CSS no es rígida, a diferencia de muchos lenguajes los espacios en blanco pueden ser añadidos sin ningún efecto y los saltos de linea no tienen valor. Además, a diferencia de muchos lenguajes de programación, CSS no es sensible al uso de mayúsculas y minúsculas.

En este ejemplo vemos como aplica el efecto de los espacios, los saltos de línea y el uso de mayúsculas y minúsculas.

Para esto utilizaremos 2 códigos CSS con selectores de clase miEstilo1 y miEstilo2 que tienen las mismas propiedades, fueron escritos de distinta forma pero aun así logran el mismo efecto.

<html>

   <head>

       <style type="text/css">

            .miEstilo1 {

                COLOR:#F00;

                font-size:20PX;     margin: 5px      10px 50px 0px;

            }

            .miEstilo2 {

                color:#F00;

                font-size:20px;

                margin: 5px 10px 50px 0px;

            }

        </style>

   </head>

   <body>

        <section>

                <p>Mi parrafo 1</p>

                <p>Mi parrafo 2</p>

                <div>Texto entre el div 3</div>

        <section>

   </body>

</html>

El resultado es el siguiente:

Mi parrafo 1

Mi parrafo 2

Como se puede ver, ambos textos se ven iguales aun cuando en miEstilo1 tiene en el CSS la propiedad COLOR en mayúscula y en miEstilo2 en minúscula, el PX de font-size en mayúscula y en miEstilo2 en minúscula, el margin en la misma línea de font-size y en miEstilo2 en líneas separadas y las propiedades del margin están separadas con más espacios en miEstilo1.

Aun cuando se puede escribir casi de cualquier forma, es ideal acostubrarse a unas convenciones generales que hacen más facil de leer el código, como en el caso de miEstilo2.

Set de reglas.

Un set de reglas CSS incluye el selector, el abrir corchete ( { ), las declaraciones y por último cerrar corchete ( } )así:

 

h2 {

    color: #332;

    font-size:23px;

    font-weight:900;

}

 

Cada declaración es una regla de CSS. En el caso anterior vemos 3 reglas, cada una compuesta por una propiedad (color, font-size, font-weight, etc), dos puntos ( : ), el valor de asignado a esa propiedad (#332, 23px, 900) y cada una se debe cerrar con punto y coma (;).

En CSS los dos puntos son el operador de asignación para la propiedad, es decir, con ellos hacemos lo mismo que con un igual en matematicas, php, o javascript en una variable. Al decir color:#333 es como si dijéramos color = #333.

Conclusiones:

  • CSS no tiene en cuenta los saltos de línea, los espacios o la diferencia entre mayúsculas y minúsculas, pero es bueno adaptarse a las prácticas que hacen el código fácil de entender.
  • Cada declaración debe tener una propiedad, dos puntos, un valor y cerrar con punto y coma para funcionar correctamente.