Sintaxis y selectores básicos

Sintaxis básica

CSS (Cascading Style Sheets) utiliza una estructura específica para definir cómo deben aparecer los elementos HTML. Antes de adentrarnos en los diferentes tipos de selectores, es fundamental comprender la sintaxis básica que rige todas las reglas de estilo.

Anatomía de una regla CSS

Una regla CSS está compuesta por tres partes fundamentales que trabajan juntas para aplicar estilos:

selector {
  propiedad: valor;
  propiedad: valor;
}

• Selector: Indica qué elementos HTML queremos estilizar
• Llaves {}: Delimitan el bloque de declaraciones de estilo
• Declaración: Cada línea dentro de las llaves, formada por una propiedad y su valor
• Propiedad: El aspecto visual que queremos modificar (color, tamaño, posición, etc.)
• Valor: El resultado específico que queremos aplicar a esa propiedad
• Punto y coma ;: Separa cada declaración de estilo

Ejemplo práctico de sintaxis

Veamos cómo aplicar esta estructura con un ejemplo real:

h1 {
  color: #2563eb;
  font-size: 2rem;
  text-align: center;
}

En este ejemplo, estamos seleccionando todos los elementos h1 y aplicándoles tres declaraciones de estilo: color azul, tamaño de fuente de 2rem y alineación centrada.

Reglas de escritura importantes

La sintaxis CSS sigue convenciones específicas que debemos respetar:

• Las propiedades y valores son case-sensitive: color es correcto, Color o COLOR no funcionará
• Los espacios en blanco son opcionales pero mejoran la legibilidad
• Cada declaración debe terminar en punto y coma, excepto la última (aunque es recomendable incluirlo siempre)
• Las llaves deben estar equilibradas: cada { debe tener su correspondiente }

Comentarios en CSS

Los comentarios nos permiten documentar nuestro código y son especialmente útiles en proyectos grandes:

/* Este es un comentario de una línea */

/* 
   Este es un comentario
   de múltiples líneas
   para explicaciones más largas
*/

h2 {
  color: #dc2626; /* Color rojo para títulos secundarios */
  margin-bottom: 1rem;
}

Los comentarios CSS utilizan la sintaxis /* comentario */ y pueden ocupar una o varias líneas.

Agrupación de selectores

Cuando queremos aplicar los mismos estilos a múltiples elementos, podemos agrupar selectores separándolos con comas:

h1, h2, h3 {
  font-family: 'Arial', sans-serif;
  color: #1f2937;
}

p, li, span {
  line-height: 1.6;
  color: #4b5563;
}

Esta técnica evita repetir código y hace que nuestras hojas de estilo sean más eficientes y fáciles de mantener.

Valores y unidades comunes

CSS acepta diferentes tipos de valores según la propiedad que estemos definiendo:

• Colores: red, #ff0000, rgb(255, 0, 0), hsl(0, 100%, 50%)
• Medidas: px, rem, em, %, vh, vw
• Palabras clave: auto, none, center, bold
• Cadenas de texto: 'Arial', "Times New Roman"

.ejemplo {
  width: 100%;           /* Porcentaje */
  height: 300px;         /* Píxeles */
  background-color: #f3f4f6; /* Color hexadecimal */
  font-family: 'Roboto', sans-serif; /* Cadena de texto */
}

Estructura recomendada

Para mantener un código limpio y profesional, es recomendable seguir estas convenciones:

/* Mantener consistencia en la indentación */
.mi-clase {
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 1rem 2rem;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

La indentación consistente y el uso de espacios alrededor de los dos puntos hacen que el código sea más legible y fácil de mantener a largo plazo.

Selectores básicos

Los selectores CSS son patrones que utilizamos para identificar y seleccionar elementos HTML específicos a los que queremos aplicar estilos. Dominar los selectores básicos es fundamental para poder estilizar cualquier página web de manera efectiva.

Selector de elemento

El selector de elemento (también llamado selector de tipo) selecciona todos los elementos HTML que coinciden con el nombre de la etiqueta especificada. Es la forma más directa de aplicar estilos.

p {
  color: #374151;
  font-size: 1rem;
}

h1 {
  color: #1f2937;
  font-size: 2.5rem;
  font-weight: 700;
}

a {
  color: #2563eb;
  text-decoration: underline;
}

Estos selectores afectarán a todos los elementos de ese tipo en la página. Por ejemplo, el selector p aplicará los estilos a todos los párrafos del documento.

Selector de clase

El selector de clase utiliza el atributo class del HTML para seleccionar elementos específicos. Se identifica con un punto (.) seguido del nombre de la clase.

<p class="destacado">Este párrafo tiene la clase destacado</p>
<div class="contenedor">Este div tiene la clase contenedor</div>

.destacado {
  background-color: #fef3c7;
  padding: 1rem;
  border-left: 4px solid #f59e0b;
}

.contenedor {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

Las clases son reutilizables, lo que significa que múltiples elementos pueden tener la misma clase y todos recibirán los mismos estilos.

Selector de ID

El selector de ID utiliza el atributo id del HTML para seleccionar un elemento único. Se identifica con una almohadilla (#) seguida del nombre del ID.

<header id="cabecera">Contenido del header</header>
<section id="contenido-principal">Contenido principal</section>

#cabecera {
  background-color: #1f2937;
  color: #ffffff;
  padding: 1.5rem 0;
  position: sticky;
  top: 0;
}

#contenido-principal {
  min-height: 80vh;
  padding: 3rem 1rem;
}

Los IDs deben ser únicos en cada página HTML. Solo debe existir un elemento con un ID específico por documento.

Diferencias entre clase e ID

Es importante entender cuándo usar cada tipo de selector:

• Clases (.): Para elementos que pueden repetirse y compartir estilos
• IDs (#): Para elementos únicos que necesitan estilos específicos

/* Clase reutilizable para botones */
.boton {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}

/* ID único para el botón principal de la página */
#boton-principal {
  background-color: #2563eb;
  color: #ffffff;
  font-size: 1.1rem;
}

Selector universal

El selector universal (*) selecciona todos los elementos de la página. Se utiliza frecuentemente para establecer estilos base o resetear valores por defecto.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*::before,
*::after {
  box-sizing: border-box;
}

Este selector es especialmente útil para crear resets CSS que eliminan los estilos predeterminados del navegador.

Selectores de atributo básicos

Los selectores de atributo nos permiten seleccionar elementos basándose en sus atributos HTML específicos.

Selector de atributo simple:

/* Selecciona todos los elementos que tienen el atributo target */
[target] {
  font-weight: bold;
}

/* Selecciona elementos con un atributo y valor específicos */
[type="email"] {
  border: 2px solid #10b981;
  background-color: #f0fdf4;
}

[href="#"] {
  color: #6b7280;
  cursor: not-allowed;
}

Selectores de atributo con patrones:

/* Selecciona enlaces que empiezan por "https" */
[href^="https"] {
  color: #059669;
}

/* Selecciona imágenes que terminan en ".jpg" */
[src$=".jpg"] {
  border: 1px solid #d1d5db;
  border-radius: 4px;
}

/* Selecciona elementos que contienen "error" en su clase */
[class*="error"] {
  color: #dc2626;
  background-color: #fef2f2;
}

Combinando selectores básicos

Podemos combinar selectores para crear patrones más específicos sin utilizar selectores complejos:

/* Selecciona párrafos que tienen la clase "introduccion" */
p.introduccion {
  font-size: 1.125rem;
  font-style: italic;
  margin-bottom: 2rem;
}

/* Selecciona divs que tienen el ID "sidebar" */
div#sidebar {
  width: 300px;
  background-color: #f9fafb;
  padding: 1.5rem;
}

/* Selecciona elementos con múltiples clases */
.alerta.importante {
  background-color: #fee2e2;
  border: 2px solid #dc2626;
  padding: 1rem;
}

Especificidad de selectores

La especificidad determina qué estilos se aplican cuando hay conflictos entre selectores:

• Selectores de ID: Tienen mayor especificidad
• Selectores de clase: Especificidad media
• Selectores de elemento: Menor especificidad
• Selector universal: Especificidad mínima

/* Especificidad baja */
p {
  color: #6b7280;
}

/* Especificidad media */
.texto-especial {
  color: #2563eb;
}

/* Especificidad alta */
#parrafo-unico {
  color: #dc2626;
}

En este ejemplo, si un párrafo tiene tanto la clase texto-especial como el ID parrafo-unico, el color final será rojo (#dc2626) debido a que los IDs tienen mayor especificidad que las clases.

Buenas prácticas con selectores

Para escribir CSS mantenible y eficiente:

• Prefiere las clases sobre los IDs para la mayoría de estilos
• Usa nombres descriptivos que expliquen el propósito, no la apariencia
• Evita selectores demasiado específicos que dificulten futuras modificaciones

/* ❌ Evitar: nombres poco descriptivos */
.azul {
  color: #2563eb;
}

.grande {
  font-size: 1.5rem;
}

/* ✅ Mejor: nombres descriptivos */
.enlace-principal {
  color: #2563eb;
}

.titulo-seccion {
  font-size: 1.5rem;
}