Gramática básica de CSS

Sintaxis de CSS

Las reglas CSS se componen de dos partes principales: el selector y una o más declaraciones.

selector {declaration1; declaration2; ... declarationN }

El selector generalmente es el elemento HTML que desea cambiar el estilo.

Cada declaración consta de una propiedad y un valor.

La propiedad (property) es el atributo de estilo (style attribute) que desea configurar. Cada propiedad tiene un valor. La propiedad y el valor están separados por un dos puntos.

selector {property: value}

Esta línea de código define el color del texto de los elementos h1 como rojo y establece el tamaño de la fuente en 14 píxeles.

En este ejemplo, h1 es el selector, color y font-size son propiedades, y red y 14px son valores.

h1 {color:red; font-size:14px;}

La siguiente ilustración le muestra la estructura de este código:

Sintaxis de CSS

Consejo:Utilice corchetes para delimitar las declaraciones.

Diferentes formas de escribir valores y unidades

Además del término inglés 'red', también podemos usar el valor de color hexadecimal #ff0000:

p { color: #ff0000; }

Para ahorrar bytes, podemos usar la forma abreviada de CSS:

p { color: #f00; }

También podemos usar dos métodos para valores RGB:

p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }

Tenga en cuenta que al usar porcentajes RGB, incluso cuando el valor sea 0, se debe escribir el símbolo de porcentaje. Sin embargo, en otros casos, no es necesario hacerlo. Por ejemplo, cuando el tamaño es de 0 píxeles, después de 0 no se necesita usar la unidad px, porque 0 es 0, sin importar la unidad.

Recuerde escribir las comillas

Consejo:Si el valor es varias palabras, se debe agregar comillas al valor:

p {font-family: "sans serif";}

Declaraciones múltiples:

Consejo:Si se desea definir más de una declaración, se debe utilizar un punto y coma para separar cada declaración. El siguiente ejemplo muestra cómo definir un párrafo centrado con texto rojo. La última regla es que no es necesario agregar un punto y coma, ya que el punto y coma en inglés es un símbolo de separación, no de finalización. Sin embargo, la mayoría de los diseñadores experimentados agregan un punto y coma al final de cada declaración, lo que tiene la ventaja de que, cuando se agregan o eliminan declaraciones de las reglas existentes, se reduce al mínimo la posibilidad de errores. Algo así:

p {text-align:center}; color:red;}

Deberías describir una propiedad por línea, lo que mejora la legibilidad de la definición de estilo, como así:

p {
  text-align: center;
  color: black;
  font-family: arial;
}

Espacios y mayúsculas y minúsculas

La mayoría de las hojas de estilo contienen más de una regla, y la mayoría de las reglas contienen más de una declaración. El uso de múltiples declaraciones y espacios hace que las hojas de estilo sean más fáciles de editar:

body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }

Incluir o no espacios no afecta el funcionamiento de CSS en el navegador, al igual que, a diferencia de XHTML, CSS no es sensible a mayúsculas y minúsculas. Sin embargo, hay una excepción: si se trabaja con documentos HTML, los nombres de class y id son sensibles a mayúsculas y minúsculas.