La sintaxis CSS consta de un conjunto de reglas. Una regla, a su vez, se compone de 2 partes: el selector y el bloque de declaración . El selector apunta al elemento (o elementos) que desea aplicar estilo, y las declaraciones definen qué estilo le gustaría aplicar.
Por ejemplo, aquí está la regla para diseñar todos los <h1>
con 32px
h1 {
font-size: 32px;
}
Cada declaración termina con un punto y coma ( ;
), y el bloque de declaración debe estar rodeado por llaves ( { }
).
Un selector **es una parte de la sintaxis de CSS que apunta al elemento HTML que desea diseñar. Por ejemplo, para dar estilo a <h1>
, necesitaríamos usar el selector h1
. Una regla para este selector afectará a todos los <h1>
de la página porque usamos el selector de tipo de elemento.
Hay varios tipos de selectores en CSS que nos permiten identificar elementos con mayor precisión: por sus ID, clases, atributos o en función de su ubicación.
El bloque de declaraciones define una o más propiedades del elemento selector, y el número de declaraciones depende de cuántas propiedades desee definir. Cada declaración incluye el nombre de la propiedad CSS y un valor, lo mismo que cuando se usa CSS en línea.
Por ejemplo, la siguiente regla CSS tiene dos declaraciones: una que establece el color del texto de los párrafos <p>
en lavanda y la otra que establece el tamaño de fuente en 12px
:
p {
color: Lavender;
font-size: 12px;
}