Sintaxis de CSS

La sintaxis de CSS define cómo escribimos reglas para establecer estilos en elementos HTML. Comprender la sintaxis es esencial para un uso efectivo de CSS.

Estructura de una regla CSS

Una regla CSS consta de un selector y un bloque de declaración. La declaración contiene propiedades y sus valores que definen el estilo del elemento.

Selectores en CSS

Los selectores permiten elegir a qué elementos HTML se aplicarán las reglas. Los más comunes son el de elemento, clase (class) e identificador (id).

Selector de elemento

El selector de elemento hace referencia directamente al nombre del elemento HTML, por ejemplo, todos los elementos <p>.

Selector de clase

El selector de clase se aplica a los elementos con un atributo class específico y siempre comienza con un punto.

Selector de identificador

El selector id se aplica a un elemento con un identificador único y siempre comienza con una almohadilla (#).

Múltiples declaraciones en una regla

Una regla CSS puede contener varias declaraciones que definen con precisión la apariencia de un elemento.

Which selector is recommended for styling multiple elements?

Selected: #id (1/3)

#id.classstyle

/* Choose the correct selector type */
#id {
  background-color: yellow;
}

Move the slider to set the value, then check your answer.

Consejos para la sintaxis de CSS

El uso correcto de la sintaxis ayuda a escribir código CSS limpio y fácil de mantener.

Cierra siempre las declaraciones con punto y coma para evitar errores.
Usa sangrías y saltos de línea para mejorar la legibilidad.
Elige nombres de clase descriptivos para que otros desarrolladores comprendan fácilmente el código.