CSS FUNDAMENTAL

Selectores CSS

Cómo apuntar correctamente a elementos HTML con etiquetas, clases e IDs

Domina los selectores CSS para aplicar estilos con precisión. Aprende a usar etiquetas, clases e IDs correctamente, optimizando la especificidad y mantenibilidad de tu código.

1

HTML: La base que CSS necesita para trabajar

Antes de aplicar estilos, CSS necesita que el HTML defina qué elementos existen en la página. Los selectores CSS se apoyan completamente en esta estructura para saber dónde actuar.

<!-- Encabezado principal que define el tema de la página -->
<h1>Galería de imágenes</h1>

<!-- Imagen insertada en el documento -->
<!-- CSS luego podrá seleccionarla por etiqueta, clase o id -->
<img src="foto.jpg" alt="Paisaje natural" />
Estructura HTML básica con encabezado e imagen
HTML define qué elementos existen; CSS decide cómo se ven.
2

CSS: Qué es un selector y por qué es clave

Un selector CSS indica exactamente qué elementos HTML deben recibir estilos. Sin selectores, CSS no tendría forma de saber dónde aplicar una regla.

/* Selector por etiqueta: apunta a todas las imágenes <img> */
img {
  /* Dibuja un borde visible alrededor de cada imagen */
  border: 2px solid black;
}
3

HTML: El atributo id como identificador único

El atributo id permite identificar un elemento de forma única dentro del documento HTML. No puede repetirse y suele usarse para secciones específicas.

<!-- Sección única del sitio -->
<!-- El id "productos" no debe repetirse en el documento -->
<section id="productos">
  <h2>Productos destacados</h2>
</section>
Elemento HTML con atributo id único
Cada id identifica un solo elemento.
4

CSS: Selector de ID y su alta especificidad

En CSS, los IDs se seleccionan usando el símbolo #. Estos selectores son muy específicos y deben usarse con moderación.

/* Selector de ID: apunta solo al elemento con id="productos" */
#productos {
  /* Espacio interno para separar el contenido */
  padding: 2rem;
}
5

HTML: Uso de class para estilos reutilizables

Las clases permiten aplicar el mismo estilo a múltiples elementos. Son la herramienta principal para crear interfaces consistentes.

<!-- Ambas imágenes comparten la misma clase -->
<!-- Esto permite aplicar el mismo estilo desde CSS -->
<button class="mi-clase-reutilizable">BOTÓN</button>
<div class="mi-clase-reutilizable">Tarjeta</div>
6

CSS: Selector de clase y diseño reutilizable

Los selectores de clase se escriben con un punto (.) y permiten construir sistemas de diseño escalables y mantenibles.

/* Selector de clase reutilizable */
.mi-clase-reutilizable {
   /* Define un color de fondo */
   background-color: #f2b705;
  /* Suaviza las esquinas del elemento */
  border-radius: 12px;
}
Selector de clase en CSS
Un selector de clase se define con un punto (.) seguido del nombre de la clase.
7

HTML: Aplicación de múltiples clases

Un mismo elemento puede tener varias clases separadas por espacios. Cada clase aporta una parte del estilo final.

<!-- El elemento combina dos clases -->
<!-- Cada clase agrega una característica visual -->
<button class="borde-redondeado img-chica">BOTÓN</button>
<div class="borde-redondeado img-chica">Tarjeta</div>
<img src="foto.jpg" class="borde-redondeado img-chica" alt="Imagen pequeña" />
8

CSS: Composición de estilos con múltiples clases

CSS aplica los estilos de todas las clases asignadas a un elemento, evitando duplicación de reglas y mejorando el mantenimiento.

/* Clase responsable de la forma */
.borde-redondeado {
  border-radius: 10px;
}

/* Clase responsable del tamaño */
.img-chica {
  width: 150px;
}
Selector de clase en CSS
Un selector de clase se define con un punto (.) seguido del nombre de la clase.
9

HTML: Uso de etiquetas sin atributos

Los selectores de etiqueta no requieren modificar el HTML. CSS puede aplicar estilos directamente al nombre de la etiqueta.

<!-- Párrafos sin class ni id -->
<p>Primer párrafo</p>
<p>Segundo párrafo</p>
Publicidad
html-css-online-course-responsive-web-design-from-scratch
Aprendé desde cero con clases 100% en vivo, grupos súper reducidos y acompañamiento real. Todo el contenido está diseñado y dictado por el creador de la plataforma, para que aprendas de verdad, sin videos fríos ni cursos masivos.

Curso de HTML y CSS para Frontend

Dominá las bases de la programación frontend: estructura con HTML, estilos modernos con CSS y diseño rápido con Tailwind para lanzar tus primeros sitios responsivos y profesionales.10 clases en vivo con profesores expertos
Precio $150000 ARG Oferta especial
Ver próximas fechas
10

CSS: Selector de etiqueta para estilos base

El selector de etiqueta aplica estilos a todos los elementos del mismo tipo. Es ideal para definir estilos globales iniciales.

/* Selector por etiqueta */
p {
  /* Color de texto aplicado a todos los párrafos */
  color: blue;
}
Selector de etiqueta en CSS
Un selector de etiqueta se define con el nombre de la etiqueta.

Lección anterior

Ilustración del funcionamiento de CSS aplicando estilos visuales a HTML
CSS es el lenguaje que transforma la estructura HTML en interfaces visuales atractivas.

Fundamentos de CSS

Aprende CSS desde la base: domina la sintaxis, reglas de estilo y selectores. Descubre cómo transformar código HTML en interfaces visuales profesionales con estilos correctos.

Comenzar Lección

Lección actual

Diagrama visual de selectores CSS aplicándose sobre elementos HTML
Los selectores CSS permiten conectar reglas de estilo con elementos HTML específicos.

Selectores CSS

Domina los selectores CSS para aplicar estilos con precisión. Aprende a usar etiquetas, clases e IDs correctamente, optimizando la especificidad y mantenibilidad de tu código.

Lección actual

Lección siguiente

Jerarquía, herencia y cascada de estilos en CSS
Visualización del flujo de estilos CSS sobre un árbol DOM jerárquico.

Jerarquía CSS: Herencia, Cascada y Especificidad

CSS no aplica estilos al azar. Domina la herencia, cascada y especificidad para resolver conflictos entre reglas y escribir código CSS priorizado, claro y escalable.

Comenzar Lección
¿Qué pasa si un elemento tiene un ID y una Clase con colores diferentes?⌄Gana el ID. CSS funciona con un sistema de puntos llamado 'Especificidad'. Un ID vale mucho más puntos que una clase, por lo que el navegador aplicará el estilo del ID, ignorando el de la clase en caso de conflicto.
¿Puedo ponerle dos IDs al mismo elemento?⌄No. El atributo `id` solo acepta un único valor. Escribir `<div id="header menu">` es inválido y el navegador no sabrá cómo interpretarlo correctamente.
¿Es obligatorio usar comillas en los atributos class e id?⌄Aunque en HTML5 a veces funciona sin comillas, es una muy mala práctica. Si olvidas las comillas y tu clase tiene un espacio, romperás el código. Usa siempre `class="mi-clase"`.
¿Puedo empezar el nombre de una clase con un número?⌄No. En CSS los selectores no pueden empezar con un dígito. `.2columnas` es inválido y el navegador lo ignorará. Debe ser `.columnas-2` o `._2columnas`.
¿Qué es mejor, usar guiones medios (-) o bajos (_) en los nombres?⌄El estándar de la industria CSS es el guión medio o 'kebab-case' (ej: `.mi-clase`). El guión bajo se usa más en metodologías específicas como BEM, pero el guión medio es el más común.
¿Puedo usar emojis en los nombres de clases?⌄Técnicamente CSS moderno soporta Unicode, así que podrías usar `.🔥 { color: red; }`. Sin embargo, es una práctica terrible para el mantenimiento y la compatibilidad, ¡no lo hagas en proyectos reales!
¿Cómo selecciono un elemento que está dentro de otro?⌄Usando el espacio. El selector `.padre .hijo` aplicará estilos a todos los elementos con clase 'hijo' que estén dentro de 'padre'. Se llama selector descendente.
¿Afecta al rendimiento usar muchas clases?⌄No de manera perceptible. Los motores de renderizado son muy eficientes. Es mucho mejor para el rendimiento usar clases reutilizables que repetir código CSS innecesariamente.
¿Qué significa `!important` y por qué debo evitarlo?⌄Es una instrucción que fuerza un estilo ignorando la especificidad. Se debe evitar porque rompe la cascada natural de CSS, haciendo que el código sea muy difícil de mantener y depurar en el futuro.
¿Es CSS Case Sensitive (sensible a mayúsculas)?⌄Depende. Las propiedades CSS (`color`, `margin`) no lo son. Pero los nombres de selectores (`.MiClase`) SÍ lo son en HTML. Por consistencia, se recomienda escribir todo en minúsculas.