📚 Aprende CSS desde Cero

La guía completa y detallada para dominar los estilos web - desde principiante a intermedio

¿Qué es CSS?

CSS (Cascading Style Sheets, u "Hojas de Estilo en Cascada") es el lenguaje de programación que usamos para darle estilo, color, tamaño y diseño a nuestras páginas web. Mientras que HTML proporciona la estructura del contenido, CSS proporciona la presentación visual.

💡 Una Comparación Útil

Si una página web fuera una casa:

  • HTML = Los muros, el techo, las puertas (estructura)
  • CSS = La pintura, los muebles, la decoración (apariencia)
  • JavaScript = La electricidad, la fontanería (interactividad)

¿Por qué aprender CSS?

  • 🎨 Crear sitios web visualmente atractivos y profesionales
  • 📱 Diseñar páginas responsivas que funcionen en móvil, tablet y desktop
  • ⚡ Controlar completamente la apariencia de tu contenido
  • 💼 Habilidad esencial para cualquier desarrollador web
  • 🎯 Mejorar la experiencia del usuario con diseños intuitivos

Conceptos Básicos Fundamentales

1. ¿Dónde escribo CSS?

Existen tres formas de agregar CSS a tu página:

✅ CSS Externo (LO MÁS RECOMENDADO)

Crear un archivo separado .css y vincularlo en el HTML:

<!-- En el HEAD del HTML -->
<head>
    <link rel="stylesheet" href="styles.css">
</head>
Ventajas: Código limpio y organizado, se reutiliza en múltiples páginas, se carga más rápido gracias al cache del navegador. Esta es la práctica profesional.

CSS Interno

Escribir CSS dentro de la etiqueta <style> en el HTML:

<style>
    p {
        color: blue;
        font-size: 16px;
    }
</style>
Útil para: Cambios pequeños o cuando trabajas en una sola página. No es ideal para proyectos grandes.

CSS en Línea (NO RECOMENDADO)

Agregar estilos directamente al atributo style del elemento:

<p style="color: blue; font-size: 16px;">Texto azul</p>
Desventajas: Difícil de mantener, no se reutiliza, mezcla HTML con CSS. Solo usar en casos excepcionales.

2. La Estructura de una Regla CSS - LO MÁS IMPORTANTE

Toda la magia de CSS se basa en esta estructura simple pero poderosa:

Selector p ¿A qué elementos quiero applicar estilos?
{
Propiedad color : Valor blue ; ¿Qué cambio quiero hacer?
}

Traducción en palabras simples: "A todos los párrafos (p), hazles que el color del texto (color) sea azul (blue)"

3. La Cascada y la Herencia en CSS

El nombre completo "Cascading Style Sheets" viene de estos dos conceptos fundamentales:

📚 Cascada (Orden y Prioridad de Estilos)

Si hay conflictos entre reglas CSS, se aplica la regla con MAYOR especificidad. Si hay igualdad, gana el último estilo definido. Las prioridades son:

  1. Estilos en línea (en el atributo style) - MAYOR prioridad
  2. IDs (muy específicos) - Alta prioridad
  3. Clases (moderatamente específicos) - Prioridad media
  4. Elementos (generales) - MENOR prioridad

👨‍👩‍👧 Herencia

Algunos estilos se heredan automáticamente de elementos padre a elementos hijo. Por ejemplo, el color del texto se hereda, pero el borde no:

body {
    color: black;  /* Todos los textos serán negros */
    border: 1px solid red;  /* Solo el body tendrá borde */
}

Tipos de Selectores CSS

Los selectores son la forma de señalar qué elementos HTML quieres modificar. Dominar los selectores es fundamental en CSS:

1️⃣ Selector de Elemento

p {
    color: purple;
    font-size: 18px;
}

Selecciona: Todos los párrafos <p> de la página

Cuándo usar: Cuando quieres aplicar estilos generales a todos los elementos de un tipo

2️⃣ Selector de Clase

.importante {
    color: red;
    font-weight: bold;
}

/* En HTML: */
<p class="importante">Texto</p>

Selecciona: Elementos con class="importante"

Cuándo usar: Cuando quieres estilos reutilizables en múltiples elementos

3️⃣ Selector de ID

#titulo {
    font-size: 2em;
    color: navy;
}

/* En HTML: */
<h1 id="titulo">Mi Titulo</h1>

Selecciona: EL (único) elemento con id="titulo"

Cuándo usar: Cuando necesitas estilos para un elemento ÚNICO y específico

4️⃣ Selector Universal

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

Selecciona: TODOS los elementos de la página

Cuándo usar: Para resetear estilos predeterminados del navegador

5️⃣ Selectores Combinados

/* Descendiente (cualquier profundidad) */
div p { color: blue; }

/* Hijo directo */
div > p { color: red; }

/* Hermano siguiente */
h1 + p { margin-top: 0; }

/* Múltiple (OR) */
h1, h2, h3 { color: green; }

Selecciona: Elementos en relaciones específicas

Cuándo usar: Cuando necesitas selectores más precisos y específicos

6️⃣ Selectores de Atributo

/* Tiene atributo type */
input[type="text"] { 
    border: 1px solid blue; 
}

/* Atributo contiene valor */
a[href*="google"] { 
    color: red; 
}

Selecciona: Elementos por sus atributos HTML

Cuándo usar: Cuando necesitas segmentar por características específicas

💡 Guía Rápida de Especificidad

Memoriza esta tabla para entender qué estilo "gana":

Elemento (p) Baja Estilos generales
Clase (.clase) Media Estilos reutilizables
ID (#id) Alta Elementos únicos
Inline (style="") Muy Alta Evitar usar

Regla de oro: En igualdad, gana el estilo definido ÚLTIMO

Unidades de Medida en CSS

Cuando especificas tamaños en CSS (ancho, alto, fuente, etc.), necesitas indicar la unidad de medida. Elegir la unidad correcta es importante para crear diseños escalables y responsivos:

📏 Píxeles (px)

font-size: 16px;
width: 300px;
margin: 10px;

¿Qué es? Unidad absoluta (siempre el mismo tamaño)

Cuándo usar: Para elementos que no deben cambiar de tamaño, bordes muy finos, detalles pequeños

Ventaja: Predecible. Desventaja: No escala con otros elementos

📐 Porcentaje (%)

width: 50%;  /* Mitad del ancho del padre */
height: 100%;  /* 100% del alto del padre */

¿Qué es? Unidad relativa (relativa al elemento padre)

Cuándo usar: Para diseños responsivos y fluidos, anchos de contenedores

Ventaja: Escalable. Desventaja: Depende del contenedor padre

A Relativa al Elemento (em)

/* Si el elemento padre es 16px */
font-size: 1.5em;  /* = 24px */
margin: 2em;  /* = 32px */

¿Qué es? Relativa al tamaño de fuente del elemento padre

Cuándo usar: Para escalabilidad dentro de componentes específicos

Ventaja: Escalable. Desventaja: Puede ser confuso con nidificación

👶 Relativa a Root (rem) - ⭐ RECOMENDADO

/* Si el html es 16px (por defecto) */
font-size: 1.5rem;  /* = 24px */
padding: 3rem;  /* = 48px */

¿Qué es? Relativa al tamaño de fuente del elemento root (html)

Cuándo usar: RECOMENDADO - Para tamaños y espaciado general de la aplicación

Ventaja: Consistente y escalable. Gran beneficio para cambiar tamaños globales

📺 Viewport (vw, vh)

width: 50vw;   /* 50% del ancho de la ventana visible */
height: 100vh;  /* 100% del alto de la ventana visible */

¿Qué es? Relativa al tamaño de la ventana visible del navegador

Cuándo usar: Para secciones hero, elementos pantalla completa

Ventaja: Perfecto para diseños full-screen

🎯 Recomendación: Qué Unidades Usar

  • rem - Para tamaños de fuente y espaciado general (PREFERIDO)
  • % - Para anchos de contenedores en diseños responsivos
  • px - Para bordes muy finos, detalles pequeños, propiedades específicas
  • vw/vh - Para alturas de secciones completas, elementos full-screen
  • em - Rara vez, solo para situaciones especiales

Propiedades CSS Esenciales

Aquí están las propiedades CSS más importantes que usarás el 80% del tiempo:

📝 Propiedades de Texto

/* Color del texto */
color: #333;

/* Tamaño de fuente */
font-size: 16px;

/* Grosor de fuente */
font-weight: bold;  /* normal, lighter, bold, 100-900 */

/* Alineación */
text-align: center;

/* Decoración */
text-decoration: underline;

/* Espaciado entre líneas */
line-height: 1.6;

/* Familia de fuente */
font-family: Arial, sans-serif;

🎨 Colores y Fondos

/* Color de fondo */
background-color: #f0f0f0;

/* Imagen de fondo */
background-image: url('imagen.jpg');

/* Posición del fondo */
background-position: center;

/* Tamaño del fondo */
background-size: cover;

/* Transparencia (0-1) */
opacity: 0.8;

/* Color con transparencia */
background-color: rgba(255, 0, 0, 0.5);

📦 Caja (Box Model)

/* Margen (fuera del borde) */
margin: 20px;
margin-top: 10px;

/* Relleno (dentro del borde) */
padding: 15px;
padding-left: 20px;

/* Borde */
border: 2px solid black;
border-radius: 8px;

/* Dimensiones */
width: 300px;
height: 200px;
max-width: 100%;
min-height: 50px;

✨ Efectos Visuales

/* Sombra (x, y, blur, spread, color) */
box-shadow: 0 4px 6px rgba(0,0,0,0.1);

/* Esquinas redondeadas */
border-radius: 12px;

/* Transformación */
transform: rotate(45deg);
transform: scale(1.1);
transform: translateX(20px);

/* Transición suave */
transition: all 0.3s ease;

🎁 El Modelo de Caja (Box Model) - Concepto Crucial

Entender el modelo de caja es LA CLAVE para dominar CSS. Cada elemento es una caja con estas capas:

Margin
Border
Padding
Contenido

📍 Contenido (Content)

El texto, imágenes u otros elementos dentro.

🎁 Relleno (Padding)

Espacio DENTRO de la caja, entre el contenido y el borde. Usa el color de fondo.

🖼️ Borde (Border)

Una línea alrededor de la caja. Define el límite visual del elemento.

🌍 Margen (Margin)

Espacio FUERA de la caja, entre el borde y otros elementos. Es transparente.

Ejemplo Visual:

/* Caja con 20px padding, 2px borde, 10px margin */
.mi-caja {
    width: 100px;
    padding: 20px;      /* Espacio dentro */
    border: 2px solid;
    margin: 10px;       /* Espacio fuera */
}

Posicionamiento en CSS

El posicionamiento controla dónde se coloca un elemento en la página. Por defecto, todos los elementos usan posicionamiento estático:

Static (Estático)

position: static;  /* VALOR POR DEFECTO */

El elemento sigue el flujo normal del documento. No puedes usar top, left, etc.

Relative (Relativo)

position: relative;
top: 10px;
left: 20px;

El elemento se posiciona relativo a su posición normal. Otros elementos NO lo respetan.

Absolute (Absoluto)

position: absolute;
top: 50px;
left: 100px;

Posicionado respecto al elemento padre con position relativo/absoluto. Se saca del flujo.

Fixed (Fijo)

position: fixed;
top: 0;
right: 0;

Se queda fijo en la ventana, no se mueve al hacer scroll. Útil para headers y menús.

Sticky (Pegajoso)

position: sticky;
top: 20px;

Mezcla: es relativo hasta que el usuario hace scroll, luego se vuelve fixed.

Z-Index (Profundidad)

position: relative;
z-index: 10;  /* Mayor número = encima */

/* Otro elemento */
z-index: 5;   /* Menor número = debajo */

Controla qué elemento aparece "encima" o "debajo" en la página (solo funciona con position).

Flexbox - Distribución Flexible

Flexbox es una forma moderna y poderosa de distribuir elementos en una página. Es excelente para menús, tarjetas y layouts complejos:

Conceptos Clave

Contenedor Flex

.contenedor {
    display: flex;  /* Activa flexbox */
}

El elemento padre que controla a sus hijos usando flexbox.

Dirección (Direction)

/* Horizontal (por defecto) */
flex-direction: row;

/* Vertical */
flex-direction: column;

Define si los hijos se organizan en filas (row) o columnas (column).

Justificar (Justify)

justify-content: center;
/* flex-start | flex-end | center 
   space-between | space-around */

Alinea los hijos en la dirección principal del flujo.

Alinear (Align)

align-items: center;
/* flex-start | flex-end | center 
   stretch */

Alinea los hijos perpendicular a la dirección principal.

Ejemplo Práctico: Menú Navegación

.navbar {
    display: flex;
    justify-content: space-between;  /* Espacio entre items */
    align-items: center;  /* Centrado verticalmente */
    padding: 20px;
    background-color: #333;
}

.navbar a {
    margin: 0 15px;
    color: white;
    text-decoration: none;
}

Pseudo-clases y Pseudo-elementos

Formas avanzadas de seleccionar elementos bajo ciertas condiciones:

🖱️ Pseudo-clases de Interacción

/* Cuando pasas el mouse */
a:hover {
    color: red;
}

/* Cuando clickeas/enfocas */
button:active {
    transform: scale(0.95);
}

/* Input enfocado */
input:focus {
    border-color: blue;
}

📋 Pseudo-clases de Estructura

/* Primer hijo */
li:first-child {
    font-weight: bold;
}

/* Último hijo */
li:last-child {
    margin-bottom: 0;
}

/* Cada 2do elemento */
li:nth-child(2n) {
    background: #f0f0f0;
}

💎 Pseudo-elementos

/* Antes del contenido */
p::before {
    content: "→ ";
    color: blue;
}

/* Después del contenido */
p::after {
    content: " ←";
    color: blue;
}

Diseño Responsivo - Media Queries

Hacer que tu sitio funcione en móvil, tablet y desktop usando media queries:

¿Qué es Media Query?

Es una regla CSS que dice "aplica estos estilos SOLO si se cumple esta condición"

/* Estilos para pantalla pequeña (móvil) */
@media (max-width: 480px) {
    body {
        font-size: 14px;
    }
    .container {
        padding: 10px;
    }
}

/* Estilos para pantalla mediana (tablet) */
@media (max-width: 768px) {
    .container {
        max-width: 100%;
    }
}

/* Estilos para pantalla grande (desktop) */
@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
    }
}

Breakpoints Comunes

📱 Móvil

max-width: 480px

Teléfonos pequeños

📱 Tablet

max-width: 768px

Tablets y teléfonos grandes

💻 Desktop

min-width: 1200px

Computadoras y pantallas grandes

Animaciones y Transitions

Dale movimiento y vida a tus elementos con animaciones CSS:

⏱️ Transitions (Transiciones)

Cambio suave de un estado a otro:

.boton {
    background-color: blue;
    transition: background-color 0.3s ease;
}

.boton:hover {
    background-color: red;
    /* El cambio es animado, no instantáneo */
}

🎬 Animations (Animaciones)

Animaciones más complejas y definidas:

@keyframes deslizar {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100px);
    }
}

.elemento {
    animation: deslizar 2s infinite;
}

⚙️ Timing Functions

/* Velocidad uniforme */
transition: all 0.3s linear;

/* Lento-rápido (por defecto) */
transition: all 0.3s ease;

/* Muy rápido al inicio */
transition: all 0.3s ease-in;

/* Muy rápido al final */
transition: all 0.3s ease-out;

Ejemplos Prácticos Completos

Ejemplo 1: Botón Elegante con Hover

.btn-elegant {
    background-color: #007bff;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    
    /* Transición suave */
    transition: all 0.3s ease;
    
    /* Sombra inicial */
    box-shadow: 0 4px 6px rgba(0, 123, 255, 0.3);
}

.btn-elegant:hover {
    background-color: #0056b3;
    transform: translateY(-2px);  /* Sube 2px */
    box-shadow: 0 6px 12px rgba(0, 56, 179, 0.4);
}

.btn-elegant:active {
    transform: translateY(0);
}

Ejemplo 2: Tarjeta Profesional

Título de la Tarjeta

Esta es una tarjeta elegante con sombra, espaciado y bordes redondeados.

.card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    max-width: 300px;
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-10px);  /* Efecto de elevación */
}

.card h4 {
    margin-bottom: 15px;
    color: #333;
}

.card p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
}

Ejemplo 3: Grid Responsivo

📦 Caja 1
📦 Caja 2
📦 Caja 3
📦 Caja 4
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    padding: 20px;
}

.grid-item {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    color: white;
    font-weight: bold;
    transition: all 0.3s ease;
}

.grid-item:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

Ejemplo 4: Navegación Responsiva

/* Navegación con Flexbox */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    padding: 15px 30px;
    position: sticky;
    top: 0;
}

.nav-items {
    display: flex;
    list-style: none;
    gap: 30px;
}

.nav-items a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-items a:hover {
    color: #007bff;
}

/* Mobile - Ocultar menú en pantallas pequeñas */
@media (max-width: 768px) {
    .nav-items {
        flex-direction: column;
        gap: 10px;
    }
}

📚 Recursos y Próximos Pasos

📖 Referencia Online

  • MDN Web Docs - Documentación oficial y confiable
  • CSS-Tricks - Artículos y tutoriales prácticos
  • W3Schools - Introducción interactiva a CSS

🎮 Práctica Interactiva

  • CodePen - Compartir y explorar código
  • Flexbox Froggy - Aprende Flexbox jugando
  • Grid Garden - Aprende Grid jugando

🎓 Próximos Pasos

  • Aprende CSS Grid avanzado
  • Estudia Preprocesadores (Sass, Less)
  • Domina Animaciones complejas
  • Aprende JavaScript para interactividad

🎯 Consejos Finales para Dominar CSS

  • ✅ Practica constantemente - La mejor forma de aprender es haciendo proyectos reales
  • ✅ Inspecciona otros sitios - Abre tu navegador (F12) y analiza cómo otros usan CSS
  • ✅ Lee tu código en voz alta - Ayuda a entender mejor qué hace
  • ✅ Empieza simple - Domina lo básico antes de técnicas avanzadas
  • ✅ Repite patrones - Los mismos estilos en múltiples proyectos hasta que sean naturales
  • ✅ Mantén código limpio - Comenta, organiza y sigue convenciones
  • ✅ Sé paciente - CSS parece fácil pero requiere práctica para dominar