¿Qué es CSS3?
El lenguaje de la presentación visual
CSS (Cascading Style Sheets) es el lenguaje que controla cómo se ve una página web. Mientras HTML define la estructura (qué hay), CSS define la presentación (cómo se ve). CSS3 es la versión actual, con animaciones, degradados, Flexbox, Grid y variables nativas.
CSS funciona por cascada: los estilos se aplican en orden y los más específicos o los declarados después sobrescriben a los anteriores. El navegador combina las hojas de estilo del sitio, del usuario y las propias del navegador.
styles.css y enlazarlo con <link rel="stylesheet" href="styles.css"> dentro del <head> del HTML.Sintaxis CSS
Cómo se escribe una regla de estilo
h1 {
color: #264de4; /* propiedad: valor */
font-size: 2rem;
text-align: center;
}
/* Múltiples selectores separados por coma */
h1, h2, h3 {
font-family: 'Lato', sans-serif;
}
/* Las 3 formas de incluir CSS */
/* 1) Externo (recomendado): <link rel="stylesheet" href="s.css"> */
/* 2) Interno: <style> h1 { color: blue; } </style> */
/* 3) En línea: <h1 style="color:blue"> (no recomendado) */
Selectores
Elegir qué elementos se estilizan
Selecciona todos los elementos de ese tipo en el HTML.
h1 { font-size: 2rem; }
Selecciona todos los elementos con ese atributo class. El más usado. Se puede aplicar a múltiples elementos.
background: white;
border-radius: 12px;
}
Selecciona el elemento único con ese id. Solo debe existir un elemento con cada ID en la página.
position: fixed;
top: 0;
}
Selecciona absolutamente todos los elementos. Útil para resets de estilos al inicio del CSS.
box-sizing: border-box;
margin: 0;
padding: 0;
}
A B selecciona B dentro de A. A > B solo hijos directos. A + B hermano inmediato.
ul > li { list-style: none; }
Aplican estilos según el estado del elemento: al pasar el mouse, al hacer clic, al ser el primero, etc.
input:focus { outline: blue; }
li:first-child {color:red;}
| Pseudoclase | Descripción |
|---|---|
| :hover | Cuando el cursor pasa sobre el elemento |
| :focus | Cuando el elemento tiene el foco (ej. campo de formulario) |
| :active | Mientras se mantiene presionado el clic |
| :visited | Enlace que ya fue visitado |
| :first-child | Primer hijo de su padre |
| :last-child | Último hijo de su padre |
| :nth-child(n) | El hijo número n (puede ser par, impar o fórmula) |
| :not(selector) | Todos los elementos que NO coincidan con el selector |
| ::before / ::after | Pseudoelementos: insertan contenido antes o después del elemento |
Box Model (Modelo de Caja)
Cómo CSS mide y espacía cada elemento
Todo elemento HTML es una caja rectangular. El Box Model define sus dimensiones con 4 capas: content → padding → border → margin.
/* Tamaño del contenido */
width: 300px;
height: 150px;
/* Espacio interno (entre contenido y borde) */
padding: 20px; /* todos los lados */
padding: 10px 20px; /* vertical horizontal */
padding-top: 10px;
/* Borde visible */
border: 2px solid #264de4;
border-radius: 12px; /* esquinas redondeadas */
/* Espacio externo (entre la caja y otros elementos) */
margin: 20px auto; /* centrar horizontalmente */
/* Hace que padding y border no aumenten el tamaño */
box-sizing: border-box;
}
Colores en CSS3
Formas de definir colores
/* Por nombre */
color: blue;
/* Hexadecimal (# + 6 dígitos) */
color: #264de4;
/* RGB (rojo, verde, azul) 0–255 */
color: rgb(38, 77, 228);
/* RGBA (con transparencia 0–1) */
color: rgba(38, 77, 228, 0.5);
/* HSL (matiz, saturación, luminosidad) */
color: hsl(226, 75%, 52%);
/* Gradiente lineal (CSS3) */
background: linear-gradient(90deg, #264de4, #e44d26);
/* Gradiente radial */
background: radial-gradient(circle, #264de4, #0a1a5e);
}
👁 Vista previa de gradientes
Tipografía
Control total del texto
font-family: 'Lato', Arial, sans-serif;
font-size: 1.2rem; /* rem = relativo al root */
font-weight: 700; /* 100–900 ó bold/normal */
font-style: italic;
line-height: 1.6; /* interlineado */
letter-spacing: 0.1em; /* espaciado entre letras */
text-align: center; /* left | right | justify */
text-transform: uppercase;/* MAYÚSCULAS, lowercase... */
text-decoration: underline;
text-shadow: 2px 2px 4px rgba(0,0,0,.3);
}
/* Fuentes de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue');
Fondos y Sombras
background, box-shadow y efectos visuales CSS3
background-color: #264de4;
background-image: url("imagen.jpg");
background-size: cover; /* cubre todo el área */
background-position: center;
background-repeat: no-repeat;
}
.sombra-caja {
/* x y difuminado color */
box-shadow: 4px 4px 20px rgba(0,0,0,.25);
/* Sombra interna */
box-shadow: inset 0 2px 8px rgba(0,0,0,.15);
}
.opacidad {
opacity: 0.7; /* 0 = transparente, 1 = sólido */
filter: blur(4px) brightness(1.2);
}
👁 Vista previa de sombras
Flexbox
Layout flexible en una dimensión
Flexbox organiza elementos en una fila o columna, distribuyendo el espacio disponible de forma inteligente. Es ideal para menús, barras de navegación, centrado vertical y distribución de elementos.
display: flex; /* activa flexbox */
flex-direction: row; /* row | column | row-reverse */
justify-content: center; /* eje principal */
align-items: center; /* eje secundario */
flex-wrap: wrap; /* permite múltiples filas */
gap: 16px; /* espacio entre elementos */
}
.item {
flex: 1; /* crece proporcionalmente */
flex-grow: 2; /* crece el doble */
align-self: flex-end; /* alineación individual */
}
👁 justify-content: space-between
| Propiedad | Valores clave |
|---|---|
| justify-content | flex-start · flex-end · center · space-between · space-around · space-evenly |
| align-items | flex-start · flex-end · center · stretch · baseline |
| flex-direction | row · row-reverse · column · column-reverse |
| flex-wrap | nowrap · wrap · wrap-reverse |
| gap | Espacio uniforme entre todos los ítems (CSS3 moderno) |
CSS Grid
Layout en dos dimensiones (filas y columnas)
CSS Grid es el sistema de layout más poderoso. Permite crear cuadrículas complejas de filas y columnas. Es ideal para el diseño general de páginas, galerías y dashboards.
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
grid-template-rows: auto;
gap: 20px;
}
/* Columnas responsivas automáticas */
.grid-auto {
display: grid;
grid-template-columns:
repeat(auto-fill, minmax(250px, 1fr));
}
/* Elemento que ocupa 2 columnas */
.item-ancho {
grid-column: span 2;
}
👁 CSS Grid 3 columnas
Transiciones y Animaciones
Movimiento sin JavaScript
.boton {
background: #264de4;
/* propiedad duración efecto delay */
transition: all .3s ease-in-out;
}
.boton:hover {
background: #e44d26;
transform: scale(1.1);
}
/* ── ANIMACIONES: bucles y secuencias ── */
@keyframes girar {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.rueda {
/* nombre duración efecto iteraciones */
animation: girar 2s linear infinite;
}
/* ── TRANSFORM: mover, rotar, escalar ── */
.transformar {
transform: translateX(20px) rotate(45deg);
}
👁 Demos en vivo
animation: girar
transition: hover me
Diseño Responsivo
Media Queries: adaptar a cualquier pantalla
El diseño responsivo hace que la página se vea bien en móvil, tablet y escritorio. CSS3 lo logra con Media Queries que aplican estilos según el tamaño de pantalla.
.grid {
display: grid;
grid-template-columns: 1fr; /* 1 columna en móvil */
}
/* Tablet: pantallas ≥ 768px */
@media (min-width: 768px) {
.grid {
grid-template-columns: repeat(2, 1fr); /* 2 columnas */
}
}
/* Escritorio: pantallas ≥ 1024px */
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(3, 1fr); /* 3 columnas */
}
}
/* Unidades relativas recomendadas */
.hero {
font-size: clamp(1rem, 4vw, 3rem); /* min fluido max */
width: 100%;
max-width: 1200px;
}
| Unidad | Descripción |
|---|---|
| px | Píxeles fijos — no escala con el zoom del usuario |
| rem | Relativo al tamaño de fuente raíz (recomendado) |
| em | Relativo al tamaño de fuente del elemento padre |
| % | Porcentaje del elemento contenedor |
| vw / vh | Porcentaje del ancho / alto de la ventana del navegador |
| fr | Fracción del espacio disponible en Grid |
| clamp(min,ideal,max) | Valor fluido con límites mínimo y máximo (CSS3 moderno) |
Variables CSS (Custom Properties)
Reutilizar valores en todo el proyecto
:root {
--color-primario: #264de4;
--color-secundario: #e44d26;
--fuente-titulo: 'Bebas Neue', sans-serif;
--espacio-base: 16px;
--radio-borde: 12px;
}
/* Usar las variables con var() */
.tarjeta {
background: var(--color-primario);
font-family: var(--fuente-titulo);
border-radius: var(--radio-borde);
padding: var(--espacio-base);
}
:root para variables globales, aplica box-sizing: border-box a todos los elementos, prefiere rem sobre px, usa el enfoque Mobile First (diseña para móvil y luego agrega media queries para pantallas más grandes) y organiza el CSS por secciones con comentarios.