Curso de CSS para estudiantes

¿Qué es CSS?

CSS significa Cascading Style Sheets, o hojas de estilo en cascada. Se utiliza para dar apariencia visual a una página web. Mientras HTML define la estructura, CSS define colores, tipografía, espacios, distribución y efectos visuales.

HTML organiza el contenido; CSS lo presenta con estilo, orden y armonía.

Sintaxis básica y cascade

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

Un selector indica qué elemento se va a modificar y luego se definen las propiedades con sus valores. La palabra "cascada" significa que las reglas se aplican en orden y pueden sobrescribirse entre sí según su especificidad.

La prioridad en CSS se determina por: importancia (!important), especificidad (ID > clase > elemento), y finalmente el orden en el código.

p { color: black; }
.texto { color: green; }
#principal { color: red; }

En este ejemplo, el estilo del ID gana porque tiene mayor especificidad.

Selectores y pseudo-clases

Selectores básicos

h1 { color: darkblue; }
p { line-height: 1.6; }
button { background: #4f46e5; }

Clases, IDs y atributos

.card {
  border-radius: 12px;
}

#titulo-principal {
  font-weight: bold;
}

input[type='text'] {
  border: 1px solid #999;
}

Combinadores y pseudo-clases

Los combinadores permiten seleccionar elementos relativos a otros.

nav a:hover { color: #fff; }
li > a { text-decoration: none; }
section + section { margin-top: 40px; }

Las pseudo-clases como :hover, :focus, :active y :nth-child() seleccionan estados o posiciones específicas.

Propiedades esenciales de CSS

Texto y tipografía

color: define el color del texto.
font-family: define la tipografía.
font-size: tamaño de texto.
line-height: altura de línea.
font-weight: grosor de la letra.

body {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

Espacios y cajas

margin: espacio fuera de la caja.
padding: espacio dentro de la caja.
border: borde alrededor del contenido.
box-sizing: controla si el padding y borde se suman al ancho.

.caja {
  box-sizing: border-box;
  margin: 20px;
  padding: 16px;
  border: 1px solid #ccc;
}

Fondo y color

background-color: color de fondo.
background-image: imagen de fondo.
background-size: tamaño del fondo.
background-position: posición de la imagen.
opacity: transparencia.

.hero {
  background-color: #0f172a;
  background-image: linear-gradient(135deg, #2563eb, #14b8a6);
  color: white;
}

Tamaño y visualización

display: define cómo se muestra un elemento.
width y height: dimensiones.
max-width y min-height: límites de tamaño.
overflow: controla el contenido que sobresale.

.contenedor {
  display: block;
  width: 100%;
  max-width: 1200px;
}

img {
  max-width: 100%;
  height: auto;
}

Colores y unidades

CSS permite definir colores de muchas maneras y usar unidades relativas o absolutas para medidas.

Tipos de colores

Nombres: red, blue, rebeccapurple.
Hexadecimal: #ff0000, #00ff00.
RGB / RGBA: rgb(255,0,0), rgba(255,0,0,0.5).
HSL / HSLA: hsl(0, 100%, 50%), hsla(0, 100%, 50%, 0.6).
Gradientes: lineales y radiales.

.fondo-color {
  background: linear-gradient(90deg, #0ea5e9, #7c3aed);
}

.texto-transparente {
  color: rgba(255, 255, 255, 0.85);
}

Unidades y operaciones

Las unidades pueden ser:

px: píxeles fijos.
em, rem: relativos a la fuente.
%: relativos al contenedor.
vw y vh: relativos a la ventana.

.tarjeta {
  width: calc(100% - 40px);
  padding: 2rem;
  margin: 1rem auto;
}

CSS también puede calcular valores con calc(), min(), max() y clamp(). Esto permite operaciones matemáticas como sumar, restar o combinar unidades.

.banner {
  width: calc(100% - 2rem);
  font-size: clamp(1rem, 2vw, 1.5rem);
  padding: min(3vw, 24px);
}

Unidades comunes y cuándo usar cada una

px: unidad absoluta. Ideal para bordes finos, iconos o layouts muy controlados. No escala con la fuente del usuario.
rem: relativo al tamaño de fuente raíz (html). Es útil para escalado consistente en todo el sitio.
em: relativo al tamaño de fuente del elemento actual. Se usa para componentes que deben escalar desde su contenedor.
%: relativo al contenedor padre. Muy útil para anchuras y alturas flexibles en diseños responsivos.
vw y vh: relativos al ancho y alto de la ventana. Útiles para secciones de pantalla completa y tipografía responsiva.
fr: unidad especial de Grid que divide el espacio disponible. Ideal para distribuciones flexibles en cuadrículas.
ch y ex: relativos al ancho del carácter “0” y a la altura de la “x”. Se usan para tipografía y diseño de texto.

Ejemplos de uso práctico

html {
  font-size: 16px;
}

body {
  font-size: 1rem;     /* 16px */
}

h1 {
  font-size: 2rem;     /* 32px */
}

.card {
  width: 90%;
  max-width: 50rem;
  padding: 1.5rem;
}

.menu {
  gap: 1em;
}

.banner {
  height: 50vh;
}

Custom properties y variables CSS

Las custom properties son variables que puedes definir en CSS y reutilizar en cualquier regla.

Cómo se definen

:root {
  --color-principal: #2563eb;
  --texto: #f8fafc;
  --espacio: 1.5rem;
}

Cómo se usan

.boton {
  background-color: var(--color-principal);
  color: var(--texto);
  padding: var(--espacio);
}

Las custom properties son muy útiles para mantener un diseño consistente y cambiar temas con facilidad.

Ventajas

Reutilización de valores en todo el sitio.
Cambios rápidos de paleta o espaciado.
Se pueden cambiar dinámicamente con JavaScript.

Valores por defecto y herencia

.boton {
  color: var(--texto, black);
}

Si la variable no existe, puedes proporcionar un valor por defecto después de la coma.

Box model y prioridad

Box model en detalle

Cada elemento tiene:

content: contenido.
padding: espacio interno.
border: borde.
margin: espacio externo.

.caja {
  box-sizing: border-box;
  padding: 16px;
  border: 1px solid #dee2e6;
  margin: 24px;
}

Especificidad y orden

La prioridad en la cascada se aplica así:

Estilos en línea (style="...").
ID (#id).
Clase (.clase), atributo, pseudo-clase.
Selector de elemento (div, p).
Regla última definida gana si la especificidad es igual.

p { color: blue; }
.texto { color: red; }
#principal { color: green; }

Herencia

Algunas propiedades se heredan a los elementos hijos, como color y font-family. Otras no, como margin o padding.

Usar inherit o initial permite controlar la herencia manualmente.

Flexbox a fondo

Flexbox es ideal para alinear y distribuir elementos en una sola dimensión: fila o columna.

Contenedor flexible

.fila {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

justify-content distribuye elementos en el eje principal. align-items alinea en el eje secundario.

Ítems flexibles

.item {
  flex: 1 1 200px;
  order: 1;
  align-self: flex-start;
}

flex combina grow, shrink y basis. order cambia el orden visual. align-self ajusta un solo elemento diferente al resto.

Casos de uso

barra de navegación
botones en fila
marcos centrados vertical y horizontalmente

CSS Grid a fondo

Grid maneja filas y columnas, por lo que es perfecto para diseños en dos dimensiones.

Contenedor de grid

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 20px;
}

.item-1 {
  grid-column: 1 / span 2;
}

.item-2 {
  grid-row: 1 / 3;
}

repeat() repite columnas. 1fr distribuye espacio disponible. gap controla separación entre filas y columnas.

Áreas de grid

.layout {
  grid-template-areas:
    'header header'
    'sidebar content'
    'footer footer';
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

Las áreas permiten diseñar plantillas con nombres claros.

Transiciones, transformaciones y animaciones

Transformaciones

Las transformaciones modifican la forma de un elemento sin afectar el resto del flujo.

.tarjeta {
  transform: translateX(20px) scale(1.05) rotate(2deg);
}

translate: mueve el elemento.
scale: agranda o reduce.
rotate: rota.
skew: inclina.

Transiciones

Las transiciones animan los cambios de propiedad cuando cambian de estado.

.boton {
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.boton:hover {
  background-color: #2563eb;
  transform: translateY(-3px);
}

Animaciones

Las animaciones con @keyframes definen etapas y luego se aplican con animation.

@keyframes aparecer {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.card {
  animation: aparecer 0.6s ease forwards;
}

Las animaciones pueden repetirse con infinite o tener retrasos con animation-delay.

Responsive y adaptabilidad

Diseño responsivo permite que las páginas funcionen bien en pantallas pequeñas y grandes.

Unidades relativas

rem: relativo al tamaño de la fuente raíz.
em: relativo al tamaño de la fuente del elemento.
vw y vh: porcentaje del ancho y alto de la ventana.

Media queries

@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
  }

  .hero {
    padding: 3rem 1.5rem;
  }
}

La estrategia móvil primero usa estilos base para móviles y luego aplica reglas para pantallas más grandes.

Fluid layout

Combina minmax(), clamp() y porcentajes para que los diseños se adapten de forma natural.

Actividades del módulo

En clase

Crear estilos para títulos, párrafos y botones.
Aplicar clases a varios elementos.
Diseñar una tarjeta con borde, sombra y padding.

Para la casa

Estilizar una página HTML completa.
Aplicar Flexbox o Grid a una sección.
Hacer que la página se vea bien en móvil y escritorio.

Proyecto

Diseñar una landing page con estructura clara y estilo profesional.
Usar colores, tipografía y espaciado de forma coherente.