Sintaxis CSS con sus 3 partes y comentarios CSS

La sintaxis CSS es el conjunto de reglas que le indica al navegador cómo dar estilo al HTML. Cada regla CSS sigue el mismo patrón, por lo que una vez que aprendes la forma de una regla puedes leer todas las demás. Este capítulo desglosa ese patrón en sus tres partes, muestra un ejemplo funcional y explica cómo escribir comentarios.

Si eres completamente nuevo en CSS, lee primero la introducción a CSS para ver cómo las hojas de estilo se conectan a una página.

La anatomía de una regla CSS

Una regla CSS (también llamada conjunto de reglas) se compone de dos piezas: un selector y un bloque de declaración. Dentro del bloque de declaración, cada declaración es un par propiedad: valor.

selector {
  property: value;
}

En conjunto, una regla consta de tres cosas que debes conocer:

Selector — qué elemento(s) dar estilo.
Propiedad — qué aspecto cambiar.
Valor — la configuración a aplicar.

Selector

El selector apunta al elemento HTML al que quieres dar estilo. Puede ser cualquier etiqueta como <h1> o <p>, una clase o un ID. Un solo selector puede contener una o varias declaraciones. Los selectores son un tema por sí solos — consulta selectores CSS para ver la lista completa.

Propiedad

La propiedad es la característica específica que quieres cambiar, como color, border o font-size. Cada propiedad acepta un tipo particular de valor, y toda propiedad debe ir emparejada con uno.

Valor

El valor es lo que asignas a la propiedad. Por ejemplo, el valor de la propiedad color puede ser una palabra clave como red o un código hexadecimal como #f1f1f1.

Reglas de sintaxis a recordar

Los dos puntos (:) separan una propiedad de su valor.
El punto y coma (;) finaliza cada declaración y separa una de la siguiente.
El bloque de declaración completo se encierra entre llaves ({ }).
CSS ignora los espacios en blanco adicionales y los saltos de línea entre selectores, propiedades y valores, por lo que puedes formatear las reglas para mejorar la legibilidad.

Un selector puede tener más de una declaración, cada una separada por un punto y coma:

p {
  color: #1c87c9;
  font-size: 16px;
  line-height: 1.5;
}

Ejemplo de sintaxis CSS

Ejemplo de sintaxis CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <a>The color of this link is #1c87c9.</a>
  </body>
</html>

Pruébalo tú mismo »

Resultado

En el ejemplo anterior, la etiqueta <a> es el selector, color es la propiedad y #1c87c9 es el valor. La propiedad y su valor se encuentran dentro de las llaves, separados por dos puntos y cerrados con un punto y coma.

Comentarios CSS

Los comentarios te permiten añadir explicaciones o notas a tu hoja de estilos. Los navegadores los ignoran, por lo que nunca afectan a la página. Son útiles para documentar por qué existe una regla, etiquetar secciones o desactivar temporalmente una declaración mientras depuras.

Un comentario CSS comienza con /* y termina con */:

Ejemplo de comentarios en CSS

/* This is a comment */

Los comentarios también pueden abarcar varias líneas, lo cual es útil para bloquear varias declaraciones a la vez:

/*
  This whole block is ignored by the browser.
  color: red;
  font-size: 20px;
*/

Ten en cuenta que los comentarios CSS no pueden anidarse — una vez que abres /*, el primer */ cierra el comentario. Recuerda también que // no es un comentario CSS válido; funciona en algunos preprocesadores como Sass, pero no en CSS plano.

Ejemplo de comentarios CSS

Ejemplos de comentarios CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        padding-left: 10px;
        font-size: 26px;
        line-height: 30px;
        /*color:red;*/
      }
      p {
        color: #1c87c9;
        /*font-size:25px;
        border:1px solid red;
        */
        padding: 10px;
        line-height: 30px;
      }
    </style>
  </head>
  <body>
    <h1>CSS Comments</h1>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </body>
</html>

Pruébalo tú mismo »

Resumen

Una regla CSS es un selector más un bloque de declaración entre llaves.
Cada declaración es un par propiedad: valor, terminado con un punto y coma.
Los espacios en blanco se ignoran, así que puedes formatear las reglas de la manera que resulte más legible.
Los comentarios se escriben /* ... */ y pueden abarcar varias líneas, pero no pueden anidarse.

A continuación, aprende cómo adjuntar estas reglas a una página en estilos HTML y luego explora los selectores CSS para apuntar exactamente a los elementos que deseas.

Práctica

¿Cuál de las siguientes opciones describe la sintaxis CSS correcta?

Una declaración CSS consiste en una propiedad y su valor, separados por dos puntos.Un bloque CSS se encierra entre corchetes.Las propiedades y los valores en una declaración CSS se separan con un punto y coma.Los conjuntos de reglas CSS consisten en un selector seguido de un bloque de declaración entre llaves.Los conjuntos de reglas CSS consisten en un selector seguido de un bloque de declaración entre paréntesis.