Sintaxis CSS

Aprender: La Sintaxis correcta de las reglas CSS, cuales tipos de reglas CSS existen, que son los selectores, que son los bloques de declaraciones, que son las propiedades y sus respectivos valores.

Las Reglas CSS

La sintaxis para el CSS se basa en reglas, existen dos tipos de reglas con sus respectivas sintaxis: las reglas predeterminadas; llamadas normalmente reglas "a secas" y son las más utilizadas para dar los estilos a los documentos HTML y las reglas arroba; que inician con el carácter @ como lo indica su nombre, y estas son reglas más complejas o con alguna aplicación especifica dentro del documento CSS.

Las Reglas Predeterminadas CSS

Una regla CSS consiste de un selector y un bloque de declaraciones.

Sintaxis CSS

  • El selector apunta a el elemento HTML que se desea aplicar el estilo.
  • El bloque de declaraciones es contenido entre los caracteres de llave { y } es decir, llave de apertura y llave de cierre.
  • El bloque de declaraciones contiene una o más declaraciones.
    • Las declaraciones son separadas por el carácter punto y coma al final de cada una de ellas.
    • Cada declaración incluye un nombre de propiedad CSS y su respectivo valor, separados por el carácter dos puntos entre ellos.

En el siguiente ejemplo todos los elementos HTML <p> serán centrados con el texto en color rojo:

CSS:

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

Explicación:

  • p es un selector en CSS, que apunta a los elementos HTML, que en este caso, apunta a los elementos <p> del documento HTML para aplicarle los siguientes estilos que se incluyen entes los caracteres de llaves de apertura y de cierre.
  • La primera declaración es:
    • color que es una propiedad CSS, y red es el valor de la propiedad. Separadas por el carácter dos puntos y finaliza la declaración con el carácter punto y coma.
  • La segunda declaración es:
    • text-align que es una propiedad CSS, y center es el valor de la propiedad. También separadas por dos puntos y al final punto y coma.

Diferentes tipos de selectores

Existen muchos tipos diferentes de selectores. Como en el ejemplo anterior, se mostro un selector de elemento, los cuales seleccionan todos los elementos de un tipo dado en los documentos HTML. Sin embargo puedes hacer selecciones más específicas. En la siguiente tabla se muestran algunos de los tipos de selectores más comunes:

Nombre del selector Qué selecciona Ejemplo
Selector de elemento
(llamado algunas veces selector de etiqueta o tipo)		 Todos los elementos HTML del tipo especificado.

p
Selecciona:
<p>
Selector de identificador
(ID)		 El elemento en la página con el ID especificado
(en una página HTML dada, solo se permite un único elemento por ID).		 #mi-id
Selecciona:
<p id="mi-id">
y también:
<a id="mi-id">
Selector de clase Los elementos en la página con la clase especificada
(una clase puede aparecer varias veces en una página).		 .mi-clase
Selecciona:
<p class="mi-clase">
y también:
<a class="mi-clase">
Selector de atributo Los elementos en una página con el atributo especificado. img[src]
Selecciona:
<img src="mimagen.png">
pero no:
<img>

Existe mucho más acerca de los selectores para explorar, y podrás encontrar más información detallada en el siguiente artículo Selectores CSS.

Las reglas arroba CSS

Las reglas arroba son declaraciones que instruyen al CSS de que comportamiento tendrá. Estas inician con el carácter @ seguido por nombre identificador e incluye todo lo que se encuentre hasta el siguiente carácter punto y coma ; o el siguiente bloque CSS, lo que sea primero

Sintaxis de reglas arroba Regular

@identificador ( regla );

Hay varias reglas arroba Regular, designadas por su identificador y cada una con sintaxis diferente.

Sintaxis de reglas arroba Anidadas

@identificador ( regla ) {
  otras_reglas_aquí ...
}

Un subconjunto de declaraciones anidadas, que pueden ser usadas como declaraciones de estilos, así como grupos de reglas condicionadas internas: