En esta página

Introducción a CSS

10 min lectura TextoCap. 1 — Base de CSS

Qué es CSS?

CSS (Cascading Style Sheets) es el lenguaje usado para estilizar documentos HTML. Controla colores, fuentes, espaciado, layout y mucho más.

Sin CSS, las páginas web se verian como documentos de texto plano sin formato.

Cómo agregar CSS

Hay tres formas de agregar CSS a un documento HTML:

  1. Inline — Atributo style en el elemento (no recomendado)
  2. Interno — Etiqueta <style> en el <head>
  3. Externo — Archivo .css enlazado con <link> (recomendado)

La forma recomendada es usar archivos externos porque separa la presentación de la estructura.

La cascada

La "C" en CSS significa "Cascading" (en cascada). Cuando hay conflictos entre estilos, el navegador sigue reglas para decidir cual aplicar:

  1. Origen — Estilos del autor vs del navegador
  2. Especificidad — Que tan específico es el selector
  3. Orden — El último estilo declarado gana

Especificidad

La especificidad determina que estilos tienen prioridad. De menor a mayor:

  • Selectores de tipo (h1, p) — Especificidad baja
  • Selectores de clase (.card) — Especificidad media
  • Selectores de ID (#hero) — Especificidad alta
  • Estilos inline — Especificidad máxima

En la siguiente leccion profundizaremos en los tipos de selectores CSS.

Práctica

  1. Crea una hoja de estilos externa: Crea un archivo estilos.css y enlazalo a un documento HTML con <link>. Define estilos para h1, una clase .resaltado y un ID #principal.
  2. Experimenta con la cascada: Escribe dos reglas que apunten al mismo párrafo (una con selector de tipo y otra con selector de clase) y verifica cual gana segun la especificidad.
  3. Compara los tres metodos: Aplica el mismo color de fondo a un <div> usando estilos inline, internos y externos. Observa cual tiene prioridad y por que.
Buena práctica
Prefiere selectores de clase sobre selectores de ID. Las clases son reutilizables y tienen menor especificidad, lo que facilita el mantenimiento. 
/* Selector de tipo */
h1 {
  color: #1a1a2e;
  font-size: 2rem;
}

/* Selector de clase */
.destacado {
  background-color: #ffd700;
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

/* Selector de ID */
#hero {
  text-align: center;
  margin-top: 2rem;
}