Propiedades CSS

05

Propiedades CSS

Cada propiedad explicada: qué hace, cuándo usarla y cómo combinarlas.

En el capítulo anterior aprendiste a seleccionar elementos con CSS. Ahora viene la parte divertida: qué puedes hacer con ellos. CSS tiene cientos de propiedades, pero no necesitas aprenderlas todas. En este capítulo vas a conocer las más importantes, organizadas por categoría, con ejemplos claros de cuándo y cómo usar cada una.

Cómo leer este capítulo

No intentes memorizar todo de una vez. Léelo completo para entender qué existe, y luego vuelve a las secciones específicas cuando las necesites. Al final hay una hoja de referencia rápida para que siempre sepas qué propiedad usar.

---

1. Propiedades de texto y tipografía

El texto es el contenido más importante de cualquier página. CSS te da control total sobre cómo se ve.

💡¿Cómo piensa CSS sobre el texto?

Imagina que eres un editor de una revista impresa. Puedes elegir la fuente del artículo, el tamaño de las letras, si van en negrita o cursiva, el espacio entre líneas y cómo se alinean en la página. CSS hace exactamente eso, pero para la web.

font-family — la fuente que usas

Elige qué “letra” (tipografía) se usa para el texto. Como elegir la fuente en Word o Google Docs.

/* Siempre pones varias fuentes, separadas por coma.
   El navegador usa la primera que encuentra instalada.
   La última (sans-serif, serif) es un "fallback" genérico. */

font-family: 'Inter', Arial, sans-serif;
/* Primero intenta 'Inter', si no existe usa Arial,
   si tampoco existe usa cualquier sans-serif del sistema */

font-family: 'Georgia', 'Times New Roman', serif;
/* Para textos de artículos o libros — con serifas (remates en las letras) */

font-family: 'Fira Code', 'Courier New', monospace;
/* Para mostrar código — todas las letras tienen el mismo ancho */

Cuándo usar cada tipo:

• sans-serif (sin remates): interfaces modernas, botones, navegación, texto en pantalla
• serif (con remates): artículos largos, blogs de contenido, aspecto clásico/editorial
• monospace (ancho fijo): bloques de código, terminales

---

font-size — el tamaño del texto

Cuánto espacio ocupa cada letra. Como el “12pt” de Word, pero con más opciones.

/* PÍXELES: tamaño fijo, no cambia con nada */
font-size: 16px;   /* El tamaño por defecto del navegador */
font-size: 24px;   /* Más grande */
font-size: 12px;   /* Más pequeño */

/* REM: relativo al tamaño raíz (root) del documento.
   Si el root es 16px, entonces 1rem = 16px, 2rem = 32px */
font-size: 1rem;   /* Igual al tamaño base (recomendado para texto normal) */
font-size: 1.5rem; /* 24px si el base es 16px */
font-size: 2rem;   /* 32px — para títulos */
font-size: 0.875rem; /* 14px — para texto pequeño */

/* EM: relativo al padre.
   Si el padre tiene 20px, 1.5em = 30px */
font-size: 1.5em;  /* 1.5 veces el tamaño del elemento padre */

Usa rem para font-size

rem es el mejor para el tamaño del texto porque es relativo al tamaño base del documento y se adapta bien cuando el usuario cambia el tamaño de fuente en su navegador (accesibilidad).

---

font-weight — el grosor del texto

Qué tan “gruesa” o “delgada” se ve la letra. Desde muy ligero hasta extra negro.

/* Palabras clave */
font-weight: normal;   /* Texto normal — equivale a 400 */
font-weight: bold;     /* Negrita — equivale a 700 */

/* Números — de 100 (finísimo) a 900 (negro) */
font-weight: 100;  /* Thin — muy delgado */
font-weight: 200;  /* Extra Light */
font-weight: 300;  /* Light — ligero (bueno para subtítulos elegantes) */
font-weight: 400;  /* Normal — el texto de todos los días */
font-weight: 500;  /* Medium — un poco más marcado */
font-weight: 600;  /* Semi Bold — para botones y etiquetas */
font-weight: 700;  /* Bold — negrita estándar (títulos) */
font-weight: 800;  /* Extra Bold — títulos grandes e impactantes */
font-weight: 900;  /* Black — el más grueso */

Regla práctica:

• Texto de párrafo: 400
• Labels y botones: 500 o 600
• Títulos principales: 700 o 800

---

font-style — normal o cursiva

font-style: normal;   /* Texto recto (por defecto) */
font-style: italic;   /* Cursiva — para énfasis, citas, términos técnicos */
font-style: oblique;  /* Inclinado artificialmente (menos común) */

---

color — el color del texto

El color de las letras. Uno de los más usados.

/* Colores con nombre (fáciles de leer) */
color: white;
color: black;
color: red;

/* Hexadecimal — el más común en diseño web */
color: #e4e4e7;   /* Gris claro */
color: #00ff41;   /* Verde neón */
color: #0a0a0f;   /* Negro casi puro */

/* RGB — Rojo, Verde, Azul, de 0 a 255 */
color: rgb(228, 228, 231);   /* Gris claro */

/* RGBA — igual pero con opacidad (0 = transparente, 1 = sólido) */
color: rgba(0, 255, 65, 0.8);  /* Verde al 80% de opacidad */

/* HSL — Tono, Saturación, Luminosidad */
color: hsl(120, 100%, 50%);   /* Verde puro */

---

text-align — cómo se alinea el texto dentro de su caja

text-align: left;     /* A la izquierda — por defecto en español/inglés */
text-align: center;   /* Centrado — para títulos, hero sections */
text-align: right;    /* A la derecha — para precios, fechas */
text-align: justify;  /* Justificado — ocupa todo el ancho de la línea */

---

text-decoration — decoraciones sobre el texto

text-decoration: none;          /* Sin decoración — MUY usado en links */
text-decoration: underline;     /* Subrayado */
text-decoration: line-through;  /* Tachado — para precios, tareas completadas */
text-decoration: overline;      /* Línea encima (raro) */

/* También puedes personalizar el color y estilo */
text-decoration: underline solid #00ff41;  /* Subrayado verde */
text-decoration: underline dashed;         /* Subrayado punteado */

---

text-transform — cambiar mayúsculas/minúsculas

text-transform: uppercase;   /* TODO EN MAYÚSCULAS — labels, botones */
text-transform: lowercase;   /* todo en minúsculas */
text-transform: capitalize;  /* Primera Letra En Mayúscula Cada Palabra */
text-transform: none;        /* Como está escrito en el HTML (por defecto) */

Por qué usar text-transform en vez de escribir en mayúsculas

Si en tu HTML escribes ENVIAR en mayúsculas, los lectores de pantalla lo leen letra por letra. Si usas text-transform: uppercase, el HTML dice “Enviar” pero se ve en mayúsculas, y el lector de pantalla lo pronuncia correctamente.

---

line-height — espacio entre líneas

Como el “interlineado” en Word. Mejora mucho la legibilidad del texto.

/* Sin unidad — multiplica el font-size actual (recomendado) */
line-height: 1;     /* Sin espacio extra — para títulos de una línea */
line-height: 1.2;   /* Poco espacio — para títulos de varias líneas */
line-height: 1.5;   /* Espacio moderado */
line-height: 1.6;   /* Espacio cómodo — ideal para párrafos largos */
line-height: 2;     /* Mucho espacio — muy abierto */

/* Con píxeles */
line-height: 24px;

Regla práctica:

• Títulos grandes: 1 a 1.2
• Texto de párrafo: 1.5 a 1.7

---

letter-spacing — espacio entre letras

letter-spacing: normal;    /* Sin ajuste extra (por defecto) */
letter-spacing: 0.05em;    /* Letras más separadas — elegante, para labels */
letter-spacing: 0.1em;     /* Muy separado — para títulos en MAYÚSCULAS */
letter-spacing: -0.02em;   /* Letras más juntas — para títulos grandes y modernos */
letter-spacing: -0.05em;   /* Muy compacto — para display grande */

---

text-shadow — sombra en el texto

/* text-shadow: desplazamiento-x desplazamiento-y blur color */

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
/* 2px a la derecha, 2px hacia abajo, 4px difuminado, negro semitransparente */

text-shadow: 0 0 20px rgba(0, 255, 65, 0.8);
/* Sin desplazamiento + difuminado grande = efecto glow neón */

text-shadow: none; /* Sin sombra (por defecto) */

---

Controlar el desbordamiento de texto

¿Qué pasa cuando el texto es más largo que su contenedor?

/* Estos tres generalmente van juntos */
overflow: hidden;           /* Corta el texto que se sale */
white-space: nowrap;        /* No permite saltos de línea */
text-overflow: ellipsis;    /* Pone "..." donde el texto fue cortado */

/* Resultado: "Este texto muy largo..." en vez de salirse del contenedor */

---

2. Propiedades de color y fondo

El fondo es el “lienzo” de cada elemento.

background-color — color de fondo sólido

background-color: #0a0a0f;          /* Hexadecimal */
background-color: rgb(10, 10, 15);  /* RGB */
background-color: transparent;      /* Sin fondo (por defecto en muchos elementos) */
background-color: white;

background-image — imagen de fondo

/* Imagen desde un archivo */
background-image: url('imagenes/fondo.jpg');
background-image: url('/assets/hero-bg.png');

background-size — tamaño de la imagen de fondo

background-size: cover;    /* Cubre TODO el contenedor (puede recortar la imagen) */
background-size: contain;  /* La imagen cabe COMPLETA (puede dejar espacios vacíos) */
background-size: 100%;     /* Ancho al 100% del contenedor */
background-size: 300px;    /* Tamaño fijo */
background-size: auto;     /* Tamaño original de la imagen */

background-position — dónde se coloca la imagen

background-position: center;        /* Centrada (la más común) */
background-position: top;           /* Pegada arriba */
background-position: bottom;        /* Pegada abajo */
background-position: center top;    /* Centrada horizontalmente, arriba */
background-position: 50% 20%;       /* 50% horizontal, 20% vertical */

background-repeat — si la imagen se repite

background-repeat: no-repeat;  /* No repite (casi siempre lo que quieres) */
background-repeat: repeat;     /* Repite en todas direcciones (mosaico) */
background-repeat: repeat-x;   /* Solo repite horizontalmente */
background-repeat: repeat-y;   /* Solo repite verticalmente */

Shorthand de background

En vez de escribir cada propiedad por separado, puedes combinarlas:

/* Larga forma */
background-image: url('fondo.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;

/* Forma corta — mismo resultado */
background: url('fondo.jpg') center/cover no-repeat;
/*           imagen           posición/tamaño repetición */

Gradientes — transiciones de color

Los gradientes son fondos que van de un color a otro. No necesitan ningún archivo de imagen.

/* Gradiente lineal — de izquierda a derecha */
background: linear-gradient(to right, #00ff41, #00d4ff);

/* Gradiente lineal — diagonal */
background: linear-gradient(135deg, #0a0a0f, #1e1e35);
/* 0deg = abajo a arriba, 90deg = izquierda a derecha, 135deg = diagonal */

/* Gradiente con tres colores */
background: linear-gradient(to bottom, #0a0a0f, #13131f, #1e1e35);

/* Gradiente radial — desde el centro hacia afuera */
background: radial-gradient(circle, #00ff41, transparent);

/* Gradiente radial con posición */
background: radial-gradient(circle at top right, rgba(0, 255, 65, 0.15), transparent);

opacity — transparencia del elemento completo

opacity: 1;     /* Completamente visible (por defecto) */
opacity: 0.8;   /* 80% visible, 20% transparente */
opacity: 0.5;   /* 50% — se ve "fantasma" */
opacity: 0;     /* Completamente invisible (pero sigue ocupando espacio) */

opacity vs rgba

opacity: 0.5 hace que TODO el elemento sea transparente, incluyendo su texto e hijos. Si solo quieres que el fondo sea transparente, usa background: rgba(0, 255, 65, 0.2) en vez de opacity.

---

3. Propiedades de espaciado

El espaciado controla el “aire” dentro y alrededor de los elementos. Esto lo verás en profundidad en el capítulo del modelo de caja, pero aquí tienes lo esencial:

/* PADDING — espacio DENTRO del elemento (entre el contenido y el borde) */
padding: 1rem;              /* El mismo espacio en los 4 lados */
padding: 1rem 2rem;         /* Vertical (1rem) | Horizontal (2rem) */
padding: 0.5rem 1rem 1.5rem 1rem; /* Arriba | Derecha | Abajo | Izquierda */

padding-top: 1rem;          /* Solo arriba */
padding-right: 2rem;        /* Solo a la derecha */
padding-bottom: 1rem;       /* Solo abajo */
padding-left: 2rem;         /* Solo a la izquierda */

/* MARGIN — espacio FUERA del elemento (entre el borde y otros elementos) */
margin: 1rem;               /* El mismo espacio en los 4 lados */
margin: 1rem 2rem;          /* Vertical | Horizontal */
margin: 0 auto;             /* Truco para centrar bloques horizontalmente */

margin-top: 1rem;
margin-right: auto;
margin-bottom: 1rem;
margin-left: auto;

---

4. Propiedades de dimensiones

Controlan cuánto espacio ocupa un elemento.

width — el ancho

width: 300px;   /* Ancho fijo en píxeles — siempre 300px sin importar nada */
width: 50%;     /* La mitad del ancho del elemento padre */
width: 100%;    /* Todo el ancho del padre */
width: auto;    /* El navegador decide (por defecto para la mayoría de elementos) */

/* Unidades del viewport */
width: 50vw;    /* 50% del ancho de la ventana del navegador */
width: 100vw;   /* Todo el ancho de la ventana */

min-width y max-width — límites de ancho

/* El elemento nunca será más estrecho que 200px */
min-width: 200px;

/* El elemento nunca será más ancho que 1200px (muy útil para contenedores) */
max-width: 1200px;

/* Combinación clásica para un contenedor responsivo */
width: 100%;
max-width: 1200px;
margin: 0 auto;
/* Resultado: ocupa todo el ancho, pero nunca más de 1200px, y está centrado */

height — la altura

height: 100px;   /* Altura fija — el contenido puede salirse si es más alto */
height: auto;    /* Se ajusta al contenido (por defecto — casi siempre lo mejor) */
height: 100%;    /* 100% del alto del padre (el padre debe tener altura definida) */
height: 100vh;   /* 100% de la altura de la ventana del navegador */
height: 50vh;    /* La mitad de la ventana */

min-height y max-height

/* Al menos toda la ventana — muy útil para páginas que tienen poco contenido */
min-height: 100vh;

/* Nunca más alto que 500px — si hay más contenido, aparece scroll */
max-height: 500px;
overflow: auto;  /* Añade scroll si el contenido supera max-height */

Cuándo usar height: auto vs height fijo

En general, evita poner height fijo en contenedores que tienen texto. Si el texto crece (por ejemplo en otro idioma), el contenedor no se adapta y el texto se sale. Usa min-height si necesitas una altura mínima.

---

5. Propiedades de borde

Los bordes definen los límites visuales de un elemento.

border — el borde completo

/* Shorthand: grosor | estilo | color */
border: 1px solid #1e1e35;    /* El más común: línea sólida de 1px */
border: 2px dashed #00ff41;   /* Línea punteada */
border: 3px dotted gray;      /* Puntitos */
border: none;                  /* Sin borde */

/* Lados individuales */
border-top: 1px solid #1e1e35;    /* Solo arriba */
border-right: 1px solid #1e1e35;  /* Solo a la derecha */
border-bottom: 1px solid #1e1e35; /* Solo abajo */
border-left: 3px solid #00ff41;   /* Solo a la izquierda — para destacar */

border-radius — esquinas redondeadas

border-radius: 0;     /* Esquinas perfectamente rectas (por defecto) */
border-radius: 4px;   /* Ligeramente redondeadas */
border-radius: 8px;   /* Bien redondeadas — muy común en cards */
border-radius: 12px;  /* Bastante redondeadas */
border-radius: 16px;  /* Muy redondeadas */
border-radius: 9999px; /* Máximo redondeo — para "pills" (botones redondeados) */
border-radius: 50%;   /* Círculo perfecto (funciona en elementos cuadrados) */

/* Esquinas individuales: top-left top-right bottom-right bottom-left */
border-radius: 8px 8px 0 0;  /* Solo redondea arriba (como una pestaña) */

outline — contorno exterior

El outline es similar al border, pero no ocupa espacio en el layout. Se dibuja por fuera del borde.

outline: 2px solid #00d4ff;   /* Contorno azul */
outline: none;                 /* Quita el contorno (¡cuidado con accesibilidad!) */
outline-offset: 3px;           /* Separación entre el borde y el outline */

No elimines el outline en focus sin reemplazarlo

Los navegadores añaden outline automáticamente cuando un elemento está en foco (al navegar con teclado). Si haces outline: none en :focus, las personas que usan el teclado no saben dónde están. Siempre reemplázalo por algo visible.

box-shadow — sombra de la caja

/* box-shadow: horizontal vertical blur color */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
/* Sin desplazamiento horizontal, 4px hacia abajo, 6px difuminado, negro al 30% */

box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);  /* Sombra sutil de profundidad */
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); /* Sombra dramática, efecto elevado */

/* Glow effect — sin desplazamiento + radio grande = resplandor */
box-shadow: 0 0 20px rgba(0, 255, 65, 0.3);   /* Glow verde */
box-shadow: 0 0 30px rgba(0, 212, 255, 0.2);  /* Glow azul */

/* Sombra interior */
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
/* "inset" hace que la sombra sea hacia adentro */

/* Varias sombras a la vez */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 255, 65, 0.1);

---

6. Propiedades de posicionamiento

Controlan cómo y dónde se coloca un elemento en la página.

💡El flujo normal

Por defecto, los elementos se colocan uno después del otro, de arriba a abajo y de izquierda a derecha. Esto se llama “flujo normal”. Las propiedades de position te permiten salir de ese flujo.

position — el tipo de posicionamiento

position: static;
/* El valor por defecto. El elemento sigue el flujo normal.
   Las propiedades top/right/bottom/left NO tienen efecto. */

position: relative;
/* El elemento sigue en el flujo normal, pero puedes moverlo
   RELATIVO a donde estaría normalmente.
   También sirve como "referencia" para elementos absolute dentro. */

position: absolute;
/* El elemento se SACA del flujo normal (los demás no lo ven).
   Se posiciona relativo al ancestro más cercano con position != static.
   Si no hay ninguno, se posiciona relativo al body. */

position: fixed;
/* Se fija en la VENTANA del navegador.
   No se mueve aunque el usuario haga scroll.
   Perfecto para navbars fijas, botones flotantes. */

position: sticky;
/* Mezcla de relative y fixed.
   Se comporta como relative hasta que el usuario llega a cierto punto al scrollear,
   entonces se "pega" en esa posición.
   Perfecto para headers que se quedan arriba al scrollear. */

Coordenadas — top, right, bottom, left

Solo funcionan cuando position es relative, absolute, fixed o sticky.

.elemento {
  position: absolute;
  top: 0;      /* Pegado al borde superior del padre */
  right: 0;    /* Pegado al borde derecho del padre */
  bottom: 0;   /* Pegado al borde inferior del padre */
  left: 0;     /* Pegado al borde izquierdo del padre */
}

/* Centrar un elemento absoluto */
.centrado {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Mueve el elemento 50% de su propio tamaño hacia arriba y a la izquierda */
}

z-index — qué elemento va “encima”

Imagina que los elementos son hojas de papel apiladas. z-index controla el orden de la pila.

z-index: auto;   /* Por defecto */
z-index: 1;      /* Un poco encima */
z-index: 10;     /* Más encima */
z-index: 100;    /* Para modales y overlays */
z-index: 1000;   /* Para navbars fijas */
z-index: -1;     /* Detrás de los elementos normales */

z-index solo funciona con elementos posicionados

z-index solo tiene efecto si el elemento tiene position diferente de static. Si un elemento no tiene position definido, z-index no hace nada.

overflow — qué pasa cuando el contenido no cabe

overflow: visible;  /* El contenido se sale del contenedor (por defecto) */
overflow: hidden;   /* El contenido que se sale se corta y no se ve */
overflow: scroll;   /* Siempre muestra scrollbar (aunque no haga falta) */
overflow: auto;     /* Muestra scrollbar solo si el contenido se sale (recomendado) */

/* Por eje */
overflow-x: hidden;  /* Solo en horizontal */
overflow-y: auto;    /* Solo en vertical */

---

7. Propiedades de display

display controla cómo se comporta un elemento en el flujo del documento.

display: block;
/* Ocupa TODO el ancho disponible.
   Empieza en una nueva línea.
   Acepta width, height, padding, margin completo.
   Ejemplos: div, p, h1, section, article */

display: inline;
/* Solo ocupa el espacio de su contenido.
   No empieza en nueva línea — fluye con el texto.
   No acepta width ni height.
   Ejemplos: span, a, strong, em */

display: inline-block;
/* Como inline (no empieza en nueva línea),
   pero SÍ acepta width, height, padding, margin.
   Útil para botones en línea o imágenes. */

display: flex;
/* Activa el modo Flexbox en el contenedor.
   Los elementos hijos se organizan en fila o columna.
   (Lo veremos en profundidad en el capítulo de Flexbox) */

display: grid;
/* Activa el modo Grid en el contenedor.
   Los elementos hijos se organizan en una cuadrícula.
   (Lo veremos en el capítulo de Grid) */

display: none;
/* El elemento DESAPARECE completamente.
   No se ve y no ocupa espacio.
   Es como si no existiera en el HTML. */

visibility — otra forma de ocultar

visibility: visible;  /* Visible (por defecto) */
visibility: hidden;   /* Invisible, pero SIGUE OCUPANDO ESPACIO */

¿Cuál es la diferencia entre display: none y visibility: hidden?

/* Esto desaparece y los elementos de alrededor se cierran */
display: none;

/* Esto se vuelve transparente pero el espacio sigue ahí
   (como si pusieramos opacity: 0 pero sin que se pueda ver) */
visibility: hidden;

---

8. Propiedades de transición y animación

Estas propiedades dan vida a tu interfaz. Las interacciones sin animación se sienten “bruscas”.

transition — suaviza los cambios

transition hace que cualquier cambio de propiedad ocurra de forma gradual en vez de instantánea.

/* transition: propiedad duración función-de-tiempo */

transition: all 0.3s ease;
/* "all" = anima TODOS los cambios, 0.3s = dura 300ms, ease = empieza rápido y frena */

transition: background-color 0.2s;
/* Solo anima el color de fondo */

transition: transform 0.3s, box-shadow 0.3s;
/* Anima transform Y box-shadow al mismo tiempo */

/* Funciones de tiempo */
transition: all 0.3s ease;         /* Empieza rápido, frena al final (natural) */
transition: all 0.3s ease-in;      /* Empieza lento, termina rápido */
transition: all 0.3s ease-out;     /* Empieza rápido, termina lento */
transition: all 0.3s ease-in-out;  /* Lento al inicio y al final */
transition: all 0.3s linear;       /* Velocidad constante durante toda la animación */

transform — mover, rotar y escalar sin afectar el layout

transform es especial: mueve visualmente el elemento pero NO cambia el espacio que ocupa en el layout. Por eso es ideal para animaciones: no “empuja” otros elementos.

/* Mover */
transform: translateY(-4px);    /* Sube 4px */
transform: translateY(10px);    /* Baja 10px */
transform: translateX(10px);    /* Se mueve 10px a la derecha */
transform: translateX(-50%);    /* Se mueve 50% de su propio ancho a la izquierda */
transform: translate(-50%, -50%); /* Mover en X e Y a la vez */

/* Escalar */
transform: scale(1.1);   /* Crece un 10% */
transform: scale(0.95);  /* Se reduce un 5% */
transform: scale(1);     /* Sin cambio (por defecto) */

/* Rotar */
transform: rotate(45deg);   /* Rota 45 grados en sentido horario */
transform: rotate(-10deg);  /* Rota 10 grados en sentido antihorario */
transform: rotate(180deg);  /* Da media vuelta */

/* Combinar varios transforms */
transform: translateY(-4px) scale(1.02);
/* Sube 4px Y se agranda un 2% al mismo tiempo */

cursor — el icono del mouse

Pequeño detalle que hace una gran diferencia en la experiencia del usuario.

cursor: default;      /* La flecha normal */
cursor: pointer;      /* La manito — indica que algo es clickeable */
cursor: not-allowed;  /* El símbolo de prohibido — botones deshabilitados */
cursor: grab;         /* La mano abierta — indica que se puede arrastrar */
cursor: grabbing;     /* La mano cerrada — mientras se arrastra */
cursor: text;         /* La I de texto — para zonas de texto */
cursor: crosshair;    /* La cruz — para herramientas de selección */
cursor: wait;         /* El reloj/spinner — mientras carga algo */
cursor: zoom-in;      /* La lupa con + */
cursor: zoom-out;     /* La lupa con - */

---

9. Cómo se combinan las propiedades: ejemplos reales

Aquí está la parte más importante: ver cómo todas estas propiedades trabajan juntas para crear componentes reales. Cada línea tiene un comentario explicando por qué está ahí.

Ejemplo 1: Un botón profesional

Un botón parece simple, pero tiene muchas propiedades trabajando juntas:

.btn {
  /* ---- TEXTO ---- */
  font-family: 'Inter', sans-serif;
  /* La fuente del botón — coherente con el resto de la página */

  font-size: 1rem;
  /* Tamaño legible — ni muy grande ni muy pequeño */

  font-weight: 600;
  /* Semi-bold: destaca sin ser agresivo */

  color: #0a0a0f;
  /* Texto oscuro sobre fondo claro (contraste = legibilidad) */

  text-align: center;
  /* El texto siempre centrado dentro del botón */

  text-decoration: none;
  /* Sin subrayado — imprescindible si el botón es un elemento <a> */

  /* ---- ESPACIADO INTERIOR ---- */
  padding: 0.75rem 2rem;
  /* 0.75rem arriba/abajo (espacio cómodo),
     2rem izquierda/derecha (más aire a los lados — se ve mejor) */

  /* ---- DIMENSIONES ---- */
  display: inline-block;
  /* Se comporta como un elemento de línea (no ocupa todo el ancho),
     pero acepta padding y height. Esencial para botones. */

  /* No ponemos width fijo: el botón se adapta automáticamente al texto */

  /* ---- FONDO ---- */
  background-color: #00ff41;
  /* El color de acento principal — lo que llama la atención */

  /* ---- BORDES ---- */
  border: none;
  /* Sin borde visible — el color de fondo ya define la forma */

  border-radius: 8px;
  /* Esquinas redondeadas — se ve moderno y amigable */

  /* ---- INTERACCIÓN ---- */
  cursor: pointer;
  /* La manito al pasar el mouse — señal visual de "puedes hacer click aquí" */

  transition: transform 0.2s ease, box-shadow 0.2s ease;
  /* Animación suave de 200ms para transform y box-shadow.
     0.2s es suficiente para que se vea fluido sin que retrase. */
}

/* Estado hover — cuando el mouse está encima */
.btn:hover {
  transform: translateY(-2px);
  /* Sube 2px — efecto de que el botón se "levanta" */

  box-shadow: 0 4px 20px rgba(0, 255, 65, 0.3);
  /* Sombra con tono verde = el botón brilla al pasar el mouse */
}

/* Estado active — mientras se hace click */
.btn:active {
  transform: scale(0.98);
  /* Se "aplasta" levemente al hacer clic — retroalimentación táctil visual */
  box-shadow: none;
  /* Sin sombra mientras se presiona */
}

/* Variante secundaria — botón sin relleno */
.btn-secondary {
  background-color: transparent;
  color: #00ff41;
  border: 1px solid #00ff41;
  /* Mismas propiedades de tamaño, fuente y transición que .btn */
}

.btn-secondary:hover {
  background-color: rgba(0, 255, 65, 0.1);
  /* Fondo semitransparente al hacer hover */
}

/* Botón deshabilitado */
.btn:disabled {
  opacity: 0.5;
  /* Se ve transparente — señal visual de "no disponible" */
  cursor: not-allowed;
  /* El símbolo de prohibido — refuerza que no se puede hacer click */
  transform: none;
  /* Sin animación — no tiene sentido si no se puede usar */
}

---

Ejemplo 2: Una tarjeta (card)

Las cards son uno de los componentes más usados en diseño web:

.card {
  /* ---- FONDO ---- */
  background: #13131f;
  /* Fondo oscuro pero no negro puro — más agradable a la vista */

  /* ---- ESPACIADO INTERIOR ---- */
  padding: 1.5rem;
  /* Espacio interno en los 4 lados — el contenido "respira" */

  /* ---- SEPARACIÓN DE OTRAS CARDS ---- */
  margin-bottom: 1.5rem;
  /* Separación entre una card y la siguiente */

  /* ---- DIMENSIONES ---- */
  max-width: 400px;
  /* La card no crece más de 400px de ancho */

  width: 100%;
  /* Pero ocupa todo el ancho disponible hasta ese máximo */

  /* ---- BORDES ---- */
  border: 1px solid #1e1e35;
  /* Borde sutil — define el límite de la card sin que sea agresivo */

  border-radius: 12px;
  /* Esquinas bien redondeadas — más pronunciadas que un botón */

  /* ---- SOMBRA DE PROFUNDIDAD ---- */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  /* Sombra pequeña y difuminada = sensación de que la card flota */

  /* ---- ANIMACIÓN ---- */
  transition: transform 0.3s ease, border-color 0.3s ease;
  /* Animación suave para el efecto hover */
}

/* La card se "levanta" al pasar el mouse */
.card:hover {
  transform: translateY(-4px);
  /* Sube 4px — más pronunciado que el botón porque la card es más grande */

  border-color: rgba(0, 255, 65, 0.3);
  /* El borde cambia a verde semitransparente al hacer hover */
}

/* ---- ELEMENTOS DENTRO DE LA CARD ---- */

/* Imagen en la card */
.card img {
  width: 100%;
  /* La imagen ocupa todo el ancho de la card */

  height: 200px;
  /* Altura fija para que todas las cards tengan el mismo tamaño */

  object-fit: cover;
  /* La imagen se recorta para llenar el espacio sin deformarse */

  border-radius: 8px;
  /* Esquinas redondeadas, pero menos que la card */

  margin-bottom: 1rem;
  /* Separación entre la imagen y el texto */
}

/* Categoría o etiqueta */
.card .tag {
  font-size: 0.75rem;
  /* Texto pequeño para info secundaria */

  font-weight: 600;
  /* Bold para que se lea bien pese al tamaño pequeño */

  color: #00ff41;
  /* Color de acento — destaca como etiqueta */

  text-transform: uppercase;
  /* En mayúsculas — estilo de categoría */

  letter-spacing: 0.1em;
  /* Más espacio entre letras — clásico para textos en mayúsculas pequeños */

  margin-bottom: 0.5rem;
  /* Separación del título */
}

/* Título de la card */
.card h3 {
  font-size: 1.25rem;
  /* Un poco más grande que el texto normal */

  font-weight: 700;
  /* Bold para que destaque como título */

  color: #e4e4e7;
  /* Texto claro sobre fondo oscuro */

  margin-bottom: 0.5rem;
  /* Separación del párrafo */

  line-height: 1.3;
  /* Interlineado compacto — los títulos no necesitan tanto espacio */
}

/* Descripción de la card */
.card p {
  color: #71717a;
  /* Gris para texto secundario — menos énfasis que el título */

  font-size: 0.95rem;
  /* Ligeramente más pequeño que el texto normal */

  line-height: 1.6;
  /* Interlineado generoso — el texto de párrafo necesita espacio para respirar */

  margin-bottom: 1rem;
  /* Separación del botón o link */
}

/* Link de "leer más" en la card */
.card .read-more {
  color: #00ff41;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  /* Sin subrayado — lo hacemos nosotros en hover */

  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  /* Para poner el link junto a un ícono */

  transition: gap 0.2s;
  /* El espacio entre texto e ícono aumenta en hover */
}

.card .read-more:hover {
  text-decoration: underline;
  gap: 0.5rem;
  /* El ícono se separa un poco — efecto sutil */
}

---

Ejemplo 3: Un input de formulario

Los inputs necesitan muchas propiedades para verse bien y dar buena retroalimentación:

.input {
  /* ---- DIMENSIONES ---- */
  width: 100%;
  /* Siempre ocupa todo el ancho del contenedor — formularios responsivos */

  /* ---- TEXTO ---- */
  font-family: inherit;
  /* Hereda la fuente del padre — importante porque los inputs tienen su propia
     fuente por defecto del navegador */

  font-size: 1rem;
  /* Mismo tamaño que el texto normal */

  color: #e4e4e7;
  /* Texto claro — legible sobre fondo oscuro */

  /* ---- ESPACIADO INTERIOR ---- */
  padding: 0.75rem 1rem;
  /* Espacio cómodo para escribir — igual que el botón en vertical */

  /* ---- FONDO Y BORDES ---- */
  background: #13131f;
  /* Fondo oscuro — coherente con la card */

  border: 1px solid #1e1e35;
  /* Borde sutil — define la forma del input */

  border-radius: 8px;
  /* Esquinas redondeadas — coherentes con el resto de la UI */

  /* ---- ELIMINAR ESTILOS POR DEFECTO ---- */
  outline: none;
  /* Quita el borde azul/naranja que los navegadores ponen por defecto.
     ¡IMPORTANTE! Siempre añade tus propios estilos de focus después. */

  /* ---- ANIMACIÓN ---- */
  transition: border-color 0.2s, box-shadow 0.2s;
  /* Anima el borde y la sombra para el efecto de focus */
}

/* Estado focus — cuando el usuario hace click o usa Tab para llegar al input */
.input:focus {
  border-color: #00ff41;
  /* El borde cambia a verde — indica que este input está activo */

  box-shadow: 0 0 0 3px rgba(0, 255, 65, 0.1);
  /* Ring exterior sutil — refuerza el estado de foco (crucial para accesibilidad) */
}

/* Estado de error */
.input.error {
  border-color: #ef4444;
  /* Borde rojo — señal visual de error */
}

.input.error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
  /* Ring rojo en focus si hay error */
}

/* Placeholder — el texto de ayuda antes de que el usuario escriba */
.input::placeholder {
  color: #52525b;
  /* Gris oscuro — visible pero claramente distinguible del texto real */
}

/* Input deshabilitado */
.input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  /* No se puede editar — mismos estilos que el botón deshabilitado */
}

---

Ejemplo 4: Header / Navbar

.header {
  /* ---- LAYOUT ---- */
  display: flex;
  /* Activa Flexbox — los elementos hijos se organizan en fila */

  justify-content: space-between;
  /* Logo a la izquierda, nav a la derecha — separación máxima entre ellos */

  align-items: center;
  /* Centra verticalmente el logo y el nav */

  /* ---- ESPACIADO ---- */
  padding: 1rem 2rem;
  /* Espacio interno: 1rem arriba/abajo, 2rem izquierda/derecha */

  /* ---- FONDO ---- */
  background: #0e0e16;
  /* Fondo ligeramente diferente al body — distingue el header */

  /* ---- SEPARACIÓN DEL CONTENIDO ---- */
  border-bottom: 1px solid #1e1e35;
  /* Línea sutil que separa el header del contenido */

  /* ---- POSICIONAMIENTO FIJO ---- */
  position: sticky;
  /* El header "se pega" al scrollear */

  top: 0;
  /* Se pega en la parte superior (top: 0 es necesario con sticky) */

  z-index: 100;
  /* Va encima de todo el contenido de la página */
}

/* El logo dentro del header */
.header .logo {
  font-size: 1.25rem;
  font-weight: 800;
  /* Grande y bold — es el nombre de la marca */

  color: #e4e4e7;
  text-decoration: none;

  letter-spacing: -0.03em;
  /* Letras un poco más juntas — típico en logos de texto */
}

/* La parte "dev" del logo en verde */
.header .logo span {
  color: #00ff41;
  /* Destaca la parte del nombre */
}

/* La navegación */
.header nav {
  display: flex;
  /* Los links de nav en fila */

  gap: 2rem;
  /* Separación entre links */

  align-items: center;
}

/* Links de navegación */
.header nav a {
  color: #a1a1aa;
  /* Gris — menos énfasis que el logo */

  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;

  transition: color 0.2s;
  /* Anima el cambio de color en hover */
}

.header nav a:hover {
  color: #e4e4e7;
  /* Más claro al hacer hover */
}

.header nav a.active {
  color: #00ff41;
  /* Verde para el link de la página actual */
}

---

Ejemplo 5: Hero section

La sección hero es lo primero que ve el usuario. Debe impactar:

.hero {
  /* ---- DIMENSIONES ---- */
  min-height: 100vh;
  /* Ocupa mínimo toda la altura de la ventana */

  /* ---- LAYOUT ---- */
  display: flex;
  /* Para centrar el contenido */

  flex-direction: column;
  /* El contenido en columna (título encima, subtítulo abajo) */

  justify-content: center;
  /* Centra el contenido verticalmente */

  align-items: center;
  /* Centra el contenido horizontalmente */

  /* ---- ESPACIADO ---- */
  padding: 2rem;
  /* Espacio en los bordes para que el texto no toque el borde en mobile */

  /* ---- FONDO ---- */
  background: #0a0a0f;
  /* Fondo oscuro base */

  /* Decoración de fondo con gradiente radial */
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(0, 255, 65, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(0, 212, 255, 0.1) 0%, transparent 50%);
  /* Dos "manchas" de color en los costados — dan profundidad */

  /* ---- TEXTO CENTRADO ---- */
  text-align: center;
  /* Todo el texto centrado */
}

/* El badge/etiqueta pequeña arriba del título */
.hero .badge {
  display: inline-block;
  /* Para que el padding funcione sin ocupar todo el ancho */

  padding: 0.4rem 1rem;
  /* Espacio interior del badge */

  background: rgba(0, 255, 65, 0.1);
  /* Fondo verde muy transparente */

  border: 1px solid rgba(0, 255, 65, 0.3);
  /* Borde verde semitransparente */

  border-radius: 9999px;
  /* Píldora perfecta */

  font-size: 0.8rem;
  font-weight: 600;
  color: #00ff41;
  text-transform: uppercase;
  letter-spacing: 0.1em;

  margin-bottom: 1.5rem;
  /* Separación del título */
}

/* El título principal */
.hero h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  /* clamp(mínimo, preferido, máximo)
     — mínimo 2.5rem, intenta 6% del ancho de la ventana, máximo 5rem
     — Responsivo sin media queries */

  font-weight: 800;
  /* Extra bold — impacta desde el primer vistazo */

  line-height: 1.1;
  /* Muy compacto — los títulos grandes se ven mejor juntos */

  letter-spacing: -0.04em;
  /* Letras compactas — tendencia moderna en títulos grandes */

  color: #e4e4e7;
  /* Texto claro */

  margin-bottom: 1.5rem;

  /* Texto con gradiente — técnica avanzada */
  background: linear-gradient(135deg, #e4e4e7, #a1a1aa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* El texto "recorta" el gradiente — se ve como si el texto fuera el gradiente */
}

/* El subtítulo */
.hero p {
  font-size: clamp(1rem, 2vw, 1.25rem);
  /* También responsivo */

  color: #71717a;
  /* Gris — menos énfasis que el título */

  line-height: 1.7;
  /* Más relajado que el título */

  max-width: 600px;
  /* Límita el ancho para mejor legibilidad — líneas largas cansan la vista */

  margin-bottom: 2.5rem;
  /* Separación de los botones */
}

/* Los botones del hero */
.hero .cta-group {
  display: flex;
  gap: 1rem;
  /* Los botones en fila con separación */

  flex-wrap: wrap;
  /* Si no caben, se van a la siguiente línea (móvil) */

  justify-content: center;
  /* Centrados */
}

---

10. Hoja de referencia rápida

Cuando no recuerdes qué propiedad usar, consulta esta tabla:

Quiero…	Propiedad que necesito
Cambiar el color del texto	color
Cambiar el fondo	background / background-color
Cambiar la fuente	font-family
Hacer el texto más grande	font-size
Poner el texto en negrita	font-weight: bold
Centrar el texto	text-align: center
Quitar el subrayado de un link	text-decoration: none
Separar letras (estilo elegante)	letter-spacing
Controlar el espacio entre líneas	line-height
Agregar espacio dentro de un elemento	padding
Agregar espacio entre elementos	margin o gap
Centrar un bloque horizontalmente	margin: 0 auto
Redondear esquinas	border-radius
Crear un borde	border
Agregar sombra a un elemento	box-shadow
Agregar sombra al texto	text-shadow
Hacer que el mouse muestre la manito	cursor: pointer
Animar un cambio suavemente	transition
Mover, rotar o escalar un elemento	transform
Ocultar completamente un elemento	display: none
Ocultar pero mantener el espacio	visibility: hidden
Fijar algo en la pantalla	position: fixed
Que algo se pegue al scrollear	position: sticky
Controlar qué elemento va encima	z-index
Hacer responsivo un contenedor	max-width + width: 100%
Cortar texto con “…”	text-overflow: ellipsis
Fondo con imagen	background-image
Fondo con gradiente	linear-gradient() / radial-gradient()
Hacer transparente un elemento	opacity
Hacer transparente solo el fondo	background: rgba(...)

---

⌨️Ejercicio: Estiliza componentes desde cero

Usando solo las propiedades de este capítulo, construye y estiliza los siguientes componentes:

1. Dos botones — uno primario (con fondo de color) y uno secundario (solo borde), ambos con efectos hover y active suaves.
2. Una card — con imagen, categoría, título, descripción y un link de “leer más”. Que se levante al hacer hover.
3. Un campo de formulario — con placeholder, foco visual claro y estado de error.
4. Un header — con logo a la izquierda y links de navegación a la derecha. Que sea sticky.
5. Una hero section — con badge, título grande, subtítulo y dos botones. Que ocupe toda la pantalla.

Requisitos:

• Todos los componentes deben tener transition en sus efectos hover.
• Usa variables CSS (--color-primary, etc.) para los colores repetidos.
• El header debe tener position: sticky.
• Los botones deben tener efecto en :active.

---

Resumen

En este capítulo aprendiste las propiedades CSS más importantes:

• Texto y tipografía: font-family, font-size, font-weight, color, text-align, text-decoration, line-height, letter-spacing, text-transform
• Color y fondo: background-color, background-image, background-size, background-position, gradientes con linear-gradient() y radial-gradient(), opacity
• Dimensiones: width, height, min-width, max-width, min-height, max-height
• Bordes: border, border-radius, outline, box-shadow
• Posicionamiento: position, top/right/bottom/left, z-index, overflow
• Display: block, inline, inline-block, flex, grid, none
• Animación: transition, transform, cursor
• Combinar propiedades: viste cómo un botón, una card, un input, un header y una hero section usan decenas de propiedades juntas

La clave no es memorizar cada propiedad, sino saber que existen y saber dónde buscarlas cuando las necesites.

Recurso oficial

La documentación de MDN Web Docs es la referencia más completa y actualizada sobre CSS. Cuando tengas dudas sobre cualquier propiedad, búscala en developer.mozilla.org.

Siguiente capítuloEl modelo de cajaEntiende cómo padding, margin y border controlan el espacio de cada elemento.

→