¿Qué es CSS?
CSS (Cascading Style Sheets) es el lenguaje que controla la presentación visual de las páginas web. Define colores, tipografías, espaciados, layout, animaciones y responsividad.
Hay tres formas de aplicar CSS. La mejor práctica es usar un archivo externo:
HTML + CSS
<!-- 1. Externo (RECOMENDADO) -->
<link rel="stylesheet" href="styles.css">
<!-- 2. Interno (en el <head>) -->
<style>
body { background: #020b18; }
</style>
<!-- 3. Inline (evitar, difícil de mantener) -->
<p style="color: red; font-size: 18px;">Texto rojo</p>Selectores CSS
Los selectores indican a qué elementos HTML se aplican los estilos.
CSS
/* Selector de etiqueta — aplica a todos los <p> */
p {
color: #e0f0ff;
font-size: 16px;
}
/* Selector de clase — aplica a class="tarjeta" */
.tarjeta {
background: #0a1e3c;
border-radius: 12px;
padding: 20px;
}
/* Selector de ID — aplica a id="header" */
#header {
background: #020b18;
height: 70px;
}
/* Selector descendente — <a> dentro de .nav */
.nav a {
color: #00b4ff;
text-decoration: none;
}
/* Pseudo-clase — estado hover */
.btn:hover {
background: #0066ff;
transform: translateY(-2px);
}
/* Pseudo-element — primera línea */
p::first-line {
font-weight: bold;
}
/* Selector de atributo */
input[type="email"] {
border: 1px solid #00b4ff;
}
/* Combinando selectores */
h1, h2, h3 {
font-family: 'Segoe UI', sans-serif;
}
/* Hijo directo */
.lista > li {
list-style: none;
}El Box Model
Todo elemento en CSS es una "caja" compuesta por cuatro capas: content → padding → border → margin.
CSS
.caja {
/* Tamaño del contenido */
width: 300px;
height: 150px;
/* Espaciado INTERNO */
padding: 20px; /* todos los lados */
padding: 10px 20px; /* arriba/abajo | izq/der */
padding: 5px 10px 15px 20px; /* top | right | bottom | left */
/* Marco */
border: 2px solid #00b4ff;
border-radius: 12px;
/* Espaciado EXTERNO */
margin: 0 auto; /* centrado horizontal */
margin-bottom: 24px;
/* CRITICAL: box-sizing incluye padding y border en el width */
box-sizing: border-box;
/* Sombra */
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
/* Buena práctica: aplicarlo globalmente */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}Colores y Tipografías
CSS
/* ── COLORES ──────────────────────────────────── */
.elemento {
color: red; /* nombre */
color: #ff5733; /* hexadecimal */
color: rgb(255, 87, 51); /* RGB */
color: rgba(0, 180, 255, 0.8); /* RGB con opacidad */
color: hsl(200, 100%, 50%); /* HSL */
}
/* Degradados */
.fondo {
background: linear-gradient(135deg, #020b18, #0a1e3c);
background: radial-gradient(circle, #0066ff, #020b18);
}
/* Variables CSS (custom properties) */
:root {
--color-primario: #00b4ff;
--color-fondo: #020b18;
}
.boton {
background: var(--color-primario);
border: 1px solid var(--color-primario);
}
/* ── TIPOGRAFÍAS ──────────────────────────────── */
body {
font-family: 'Segoe UI', system-ui, sans-serif;
font-size: 16px;
line-height: 1.6;
}
h1 {
font-size: clamp(1.8rem, 5vw, 3rem); /* responsive */
font-weight: 800;
letter-spacing: -0.02em;
}
code {
font-family: 'Consolas', 'Courier New', monospace;
font-size: 0.9em;
}Posicionamiento
CSS
/* static (default) — flujo normal del documento */
.estatico { position: static; }
/* relative — desplazamiento desde su posición normal */
.relativo {
position: relative;
top: 10px; /* se mueve 10px hacia abajo */
left: 20px; /* se mueve 20px a la derecha */
}
/* absolute — se posiciona respecto al padre relative */
.padre { position: relative; }
.absoluto {
position: absolute;
top: 0;
right: 0; /* esquina superior derecha del padre */
}
/* fixed — fijo en la pantalla (navbar, botón flotante) */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000; /* por encima de otros elementos */
}
/* sticky — se "pega" al hacer scroll */
.sidebar {
position: sticky;
top: 70px; /* se pega a 70px del tope */
}Transiciones y Animaciones
CSS
/* ── TRANSICIONES ─────────────────────────────── */
.boton {
background: #0066ff;
color: white;
padding: 12px 24px;
border-radius: 8px;
/* propiedad | duración | función | delay */
transition: background 0.3s ease, transform 0.2s ease;
}
.boton:hover {
background: #00b4ff;
transform: translateY(-3px); /* sube 3px */
box-shadow: 0 8px 20px rgba(0, 180, 255, 0.3);
}
/* ── ANIMACIONES con @keyframes ───────────────── */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.card {
animation: fadeIn 0.5s ease forwards;
}
/* Animación de pulso */
@keyframes pulso {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.alerta {
animation: pulso 2s infinite;
}
/* Animación de rotación */
@keyframes rotar {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.loader {
animation: rotar 1s linear infinite;
}Ejercicios Resueltos
EJERCICIO 1
Tarjeta de perfil animada
Creá una tarjeta de perfil con foto, nombre, rol y botón, con efecto hover animado.
- 1Estructuramos la tarjeta con clases semánticas.
- 2Usamos box-shadow y transition para el efecto hover.
- 3La foto usa border-radius: 50% para hacerla circular.
CSS — Solución
.perfil-card {
background: #0a1e3c;
border: 1px solid rgba(0, 180, 255, 0.2);
border-radius: 16px;
padding: 32px;
text-align: center;
max-width: 280px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.perfil-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 180, 255, 0.2);
}
.perfil-foto {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #00b4ff;
margin-bottom: 16px;
}
.perfil-nombre {
font-size: 1.2rem;
font-weight: 700;
color: #e0f0ff;
margin-bottom: 4px;
}
.perfil-rol {
font-size: 0.85rem;
color: #00b4ff;
margin-bottom: 20px;
}
.perfil-btn {
background: #0066ff;
color: white;
border: none;
padding: 10px 24px;
border-radius: 8px;
cursor: pointer;
transition: background 0.3s;
}
.perfil-btn:hover { background: #00b4ff; }Ejercicios Propuestos
PROPUESTO 1
Navbar sticky con hover
Creá una barra de navegación que se quede fija al hacer scroll.
- Logo a la izquierda, links a la derecha.
- Fondo semitransparente con blur.
- Links con efecto hover (underline animado o color).
- Responsive: ocultar links en mobile.
PROPUESTO 2
Botón con animación de partículas
Diseñá un botón "premium" con múltiples efectos CSS.
- Gradiente en el fondo.
- Efecto glow al hacer hover.
- Animación de "ola" con ::before y ::after.
- Transform scale al hacer click con :active.