Sintaxis CSS: estructura de una regla

Aprende cómo se escribe CSS: selector, propiedades, valores, comentarios y cómo enlazar una hoja de estilos al HTML.

📘 Teoría

Estructura de una regla CSS

Selector, llaves y declaraciones.

Cada regla CSS tiene dos partes: el selector (qué elemento o elementos afecta) y el bloque de declaraciones (qué estilos aplicar). El bloque va entre llaves { }. Dentro del bloque, cada declaración consta de una propiedad, dos puntos, un valor y un punto y coma. Por ejemplo: color: blue; aplica el color azul a la propiedad color.

Puedes profundizar en la guía de estructura CSS de MDN o en LenguajeCSS.

Selector { propiedad: valor; }
Varias declaraciones: separadas por punto y coma.
La última declaración puede llevar o no punto y coma (se recomienda llevarlo).

Ejemplo de regla

p {
  color: #333;
  font-size: 1rem;
  line-height: 1.5;
}

Comentarios en CSS

Texto que el navegador no aplica.

Los comentarios permiten documentar tu código o desactivar reglas temporalmente. Se escriben entre /* y */. No se pueden anidar: un comentario dentro de otro con la misma sintaxis no es válido.

Comentario

/* Esto es un comentario */
p { color: navy; }
/* .antigua { color: red; } */

Cómo enlazar CSS al HTML

Archivo externo o estilos en la página.

La forma recomendada es usar un archivo .css externo y enlazarlo en el con . Así el mismo CSS puede usarse en varias páginas. Para pruebas rápidas puedes usar la etiqueta dentro del y escribir las reglas ahí; el navegador las aplicará solo a esa página.

Externo:
Interno: ... reglas ...

Enlace a hoja externa

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="styles.css">
</head>

La función url() en CSS

Conecta tus estilos con recursos externos o del proyecto.

url() se usa en propiedades como background-image o @font-face para cargar archivos. Lo importante no es memorizar la sintaxis, sino entender desde dónde se resuelve la ruta.

Si la ruta es relativa, parte desde la ubicación del archivo CSS. Si es absoluta (https://...), apunta a un recurso externo. Cuando una URL falla, revisa primero la ruta, no la propiedad CSS.

Relativa: url("./img/fondo.jpg")
Absoluta: url("https://...")
Puedes usar comillas para evitar errores con caracteres especiales o rutas complejas.

Uso básico de url()

.hero {
  background-image: url("https://images.unsplash.com/photo-1464983953574-0892a716854b?auto=format&fit=crop&w=200&q=200");
}

.logo {
  background-image: url("https://images.unsplash.com/photo-1464983953574-0892a716854b?auto=format&fit=crop&w=200&q=60");
}