Selectores CSS

Aprendé a seleccionar elementos HTML para aplicarles estilos. Los selectores son la base de CSS.

¿Qué es CSS?

CSS (Cascading Style Sheets) es el lenguaje que controla la apariencia visual de las páginas web. Mientras HTML define la estructura, CSS define cómo se ve: colores, tamaños, posiciones, fuentes y más. 

/* Sintaxis básica */
selector {
    propiedad: valor;
}
¿Cómo funciona?

CSS se escribe dentro de una etiqueta <style> en el <head>, o en un archivo externo .css. En estos ejemplos lo vamos a escribir dentro del HTML.

Probá el Ejemplo 1: Mi primer estilo

Selector de Etiqueta

Selecciona todos los elementos de ese tipo en la página.

/* Aplica a todos los párrafos */
p {
    color: blue;
    font-size: 16px;
}

/* Aplica a todos los h1 */
h1 {
    color: red;
}
Cuidado

El selector de etiqueta afecta a todos los elementos de ese tipo. Si querés aplicar estilos solo a algunos, usá clases.

Probá el Ejemplo 2: Selector de etiqueta

Selector de Clase

Las clases se definen con un punto . en CSS y con el atributo class en HTML. Podés aplicar la misma clase a múltiples elementos. 

/* CSS */
.destacado {
    background-color: yellow;
    font-weight: bold;
}

.error {
    color: red;
    border: 1px solid red;
}
<!-- HTML -->
<p class="destacado">Este párrafo está destacado.</p>
<p class="error">Este párrafo tiene error.</p>
<p>Este párrafo es normal.</p>
Múltiples clases

Un elemento puede tener más de una clase: <p class="destacado error">

Probá el Ejemplo 3: Selectores de clase

Selector de ID

Los IDs se definen con # en CSS y con el atributo id en HTML. A diferencia de las clases, un ID debe ser único en toda la página. 

/* CSS */
#titulo-principal {
    font-size: 32px;
    text-align: center;
    color: #333;
}

#pie-pagina {
    background-color: #333;
    color: white;
    padding: 20px;
}
<!-- HTML -->
<h1 id="titulo-principal">Mi Título</h1>
<footer id="pie-pagina">© 2026</footer>
Selector Sintaxis CSS Sintaxis HTML Unicidad
Etiqueta p { } <p> Todos los elementos
Clase .nombre { } class="nombre" Reutilizable
ID #nombre { } id="nombre" Único por página
Probá el Ejemplo 4: Caso completo

Buenas Prácticas

  • Preferí clases sobre IDs: son más flexibles y reutilizables
  • Nombres descriptivos: .btn-principal en vez de .azul
  • Un ID por elemento: nunca repitas el mismo ID en la página
  • Minúsculas con guiones: .mi-clase es la convención estándar
  • Evitá estilos en línea: style="color:red" es difícil de mantener