¿Cuál es la sintaxis básica de una regla CSS?

Una regla CSS es la unidad fundamental del lenguaje CSS y es la que define cómo se van a estilizar ciertos elementos HTML. Su sintaxis básica consta de dos partes principales: un selector y un bloque de declaración.

1. Selector:
   Es la parte de la regla que identifica a qué elemento o elementos HTML se aplicarán los estilos definidos en el bloque de declaración.
   Puede ser el nombre de una etiqueta HTML (como p para párrafos, h1 para encabezados principales), una clase (precedida por un punto, ej. .mi-clase), un ID (precedido por una almohadilla, ej. #mi-id-unico), un atributo, o combinaciones más complejas.
2. Bloque de Declaración:
   Este bloque va siempre encerrado entre llaves { }. Dentro de este bloque, se especifican una o más declaraciones de estilo.
3. Declaración:
   Cada declaración individual consta de dos partes:
   • Una propiedad CSS (por ejemplo, color, font-size, background-color).
   • Un valor para esa propiedad (por ejemplo, blue, 16px, #ffffff).
     La propiedad y el valor se separan por dos puntos (:), y cada declaración completa debe terminar con un punto y coma (;).
     Múltiples declaraciones dentro de un mismo bloque se separan también con punto y coma.

Ejemplo:

/* Selector   Bloque de Declaración  */
/* vvvv      vvvvvvvvvvvvvvvvvvvvv  */
    h1         {
/* Propiedad : Valor ;  */
/* vvvvvvvvv   vvvvv   */
                  color     : navy;
                  font-size : 28px;
                  text-align: center;
               }
/* ^^^^^^^^^^^^^^^^^^^^^  */
/* Declaraciones            */
Lenguaje del código: PHP (php)

En este ejemplo:

• El selector es h1. Esto significa que la regla se aplicará a todos los elementos <h1> de la página.
• El bloque de declaración contiene tres declaraciones:
  • color: navy; establece el color del texto a «navy» (azul marino).
  • font-size: 28px; establece el tamaño de la fuente a 28 píxeles.
  • text-align: center; centra el texto del encabezado.

Así, todos los encabezados <h1> de la página donde se aplique este CSS se mostrarán centrados, con texto de color azul marino y un tamaño de 28 píxeles.