Formación corporativa en CSS

Sintaxis de selectores y propiedades

CSS (Cascading Style Sheets) es el lenguaje que permite dar estilo y presentación a los documentos HTML. Para aplicar estilos de manera efectiva, es fundamental comprender cómo funciona la sintaxis básica de CSS y cómo seleccionar los elementos que queremos modificar.

Anatomía de una regla CSS

Una regla CSS está compuesta por dos partes principales: el selector y el bloque de declaraciones. Esta estructura básica se mantiene constante en todo el código CSS que escribamos.

selector {
    property: value;
    property: value;
}

El selector indica qué elementos HTML queremos modificar, mientras que las declaraciones especifican cómo queremos que se vean esos elementos. Cada declaración consta de una propiedad y su valor correspondiente, separados por dos puntos y terminados con punto y coma.

h1 {
    color: blue;
    font-size: 24px;
}

En este ejemplo, estamos seleccionando todos los elementos h1 y aplicándoles un color azul y un tamaño de fuente de 24 píxeles.

Selectores básicos

Los selectores de elemento son la forma más directa de aplicar estilos. Simplemente utilizamos el nombre de la etiqueta HTML que queremos modificar.

p {
    line-height: 1.5;
}

div {
    margin: 10px;
}

Los selectores de clase nos permiten aplicar estilos a elementos específicos que comparten una característica común. Se identifican con un punto seguido del nombre de la clase.

.highlight {
    background-color: yellow;
}

.container {
    width: 100%;
    max-width: 1200px;
}

Los selectores de ID se utilizan para elementos únicos en la página. Se identifican con una almohadilla seguida del nombre del identificador.

#header {
    background-color: navy;
    height: 80px;
}

#main-content {
    padding: 20px;
}

Estilización de texto y fondo

La estilización de texto y fondo constituye uno de los pilares fundamentales del diseño web con CSS. Estos elementos determinan la legibilidad, jerarquía visual y estética general de cualquier página web, siendo esenciales para crear experiencias de usuario atractivas y funcionales.

Fundamentos de la tipografía web

La tipografía en CSS va más allá de simplemente cambiar la fuente de un texto. Implica controlar aspectos como el tamaño, peso, espaciado y alineación para crear una jerarquía visual clara y mejorar la experiencia de lectura.

Las propiedades tipográficas básicas incluyen font-family para definir la fuente, font-size para el tamaño, font-weight para el grosor y line-height para el interlineado. Estas propiedades trabajan en conjunto para establecer la personalidad visual del contenido.

.main-title {
    font-family: Arial, sans-serif;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.4;
}

El espaciado entre caracteres se controla mediante letter-spacing, mientras que word-spacing ajusta la separación entre palabras. Estas propiedades son especialmente útiles para mejorar la legibilidad en títulos o textos decorativos.

.spaced-text {
    letter-spacing: 0.1em;
    word-spacing: 0.2em;
}

Control del color y decoración textual

El color del texto se establece mediante la propiedad color, que acepta valores en diferentes formatos como nombres de colores, códigos hexadecimales, RGB o HSL. Esta propiedad es fundamental para crear contraste y jerarquía visual.

.highlight-text {
    color: #2c3e50;
}

.accent-text {
    color: rgb(231, 76, 60);
}

La decoración de texto incluye propiedades como text-decoration para subrayados, tachados o líneas superiores, y text-transform para controlar la capitalización. Estas herramientas permiten enfatizar contenido específico sin recurrir a elementos HTML adicionales.

.underlined {
    text-decoration: underline;
}

.uppercase {
    text-transform: uppercase;
}

Modelo de caja en CSS

El modelo de caja es uno de los conceptos fundamentales que todo desarrollador web debe dominar para crear diseños precisos y profesionales. Este concepto define cómo el navegador calcula el espacio que ocupa cada elemento HTML en la página, estableciendo las reglas que determinan el tamaño final y la posición de todos los componentes visuales.

Cada elemento HTML se comporta como una caja rectangular que contiene diferentes capas de espacio. Estas capas se organizan desde el contenido hacia el exterior, creando una estructura predecible que permite controlar con precisión la apariencia y el espaciado de los elementos.

Anatomía del modelo de caja

El modelo de caja está compuesto por cuatro áreas principales que se superponen desde el centro hacia el exterior:

• Content (contenido): El área donde se muestra el texto, imágenes u otros elementos
• Padding (relleno): El espacio transparente entre el contenido y el borde
• Border (borde): La línea que rodea el padding y el contenido
• Margin (margen): El espacio transparente exterior que separa el elemento de otros elementos

.example-box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 2px solid blue;
  margin: 15px;
}

En este ejemplo, el ancho total que ocupará el elemento será de 254px (200px de contenido + 40px de padding + 4px de borde + 30px de margen), mientras que la altura total será de 169px.

Propiedades de contenido

Las propiedades width y height definen las dimensiones del área de contenido. Estas medidas no incluyen el padding, border ni margin por defecto:

.content-area {
  width: 300px;
  height: 150px;
  background-color: lightblue;
}

Es importante entender que estas dimensiones se refieren únicamente al espacio disponible para el contenido real del elemento.

Posicionamiento en CSS

El posicionamiento es uno de los conceptos fundamentales en CSS que determina cómo se ubican los elementos en una página web. Comprender las diferentes técnicas de posicionamiento te permitirá crear layouts precisos y controlar exactamente dónde aparece cada elemento en tu diseño.

¿Qué es el posicionamiento?

Por defecto, los elementos HTML siguen el flujo normal del documento, apareciendo uno después del otro según su orden en el HTML. Sin embargo, CSS nos proporciona herramientas para alterar este comportamiento y colocar elementos en posiciones específicas.

La propiedad position es la base del sistema de posicionamiento en CSS. Esta propiedad acepta diferentes valores que cambian completamente cómo se comporta un elemento en relación con otros elementos y con la ventana del navegador.

Tipos de posicionamiento

Position static

El valor static es el posicionamiento por defecto de todos los elementos. Los elementos con position: static siguen el flujo normal del documento y no pueden ser movidos usando las propiedades top, right, bottom o left.

.elemento {
    position: static; /* Valor por defecto */
}

Position relative

El posicionamiento relativo permite mover un elemento desde su posición original sin afectar el espacio que ocupa en el flujo del documento. El elemento se desplaza en relación a su posición natural.

.caja-relativa {
    position: relative;
    top: 20px;
    left: 30px;
}

En este ejemplo, la caja se moverá 20 píxeles hacia abajo y 30 píxeles hacia la derecha desde su posición original, pero el espacio que ocupaba originalmente se mantiene reservado.

Position absolute

El posicionamiento absoluto saca completamente el elemento del flujo normal del documento. El elemento se posiciona en relación al ancestro posicionado más cercano (un elemento con position diferente a static).

.contenedor {
    position: relative; /* Contexto de posicionamiento */
}

.elemento-absoluto {
    position: absolute;
    top: 10px;
    right: 15px;
}

El elemento con position: absolute se posicionará a 10 píxeles del borde superior y 15 píxeles del borde derecho de su contenedor posicionado más cercano.

Position fixed

Los elementos con posicionamiento fijo se posicionan en relación a la ventana del navegador y permanecen en la misma posición incluso cuando el usuario hace scroll por la página.

.barra-navegacion {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
}

Esta técnica es muy útil para crear barras de navegación que siempre permanecen visibles o botones de "volver arriba".

Position sticky

El posicionamiento sticky combina características del posicionamiento relativo y fijo. El elemento se comporta como relative hasta que alcanza una posición específica durante el scroll, momento en el que se "pega" como si fuera fixed.

.encabezado-pegajoso {
    position: sticky;
    top: 0;
    background-color: white;
    border-bottom: 1px solid #ddd;
}

Flexbox: Sistema de diseño flexible en CSS

Flexbox (Flexible Box Layout) es uno de los sistemas de diseño más importantes en CSS moderno. Este módulo de especificación CSS proporciona una forma eficiente de organizar, distribuir y alinear elementos dentro de un contenedor, incluso cuando su tamaño es desconocido o dinámico.

La flexibilidad que ofrece Flexbox ha revolucionado la manera en que los desarrolladores abordan el diseño web. Antes de su llegada, crear layouts complejos requería técnicas complicadas con floats, positioning o display table. Flexbox simplifica estas tareas y ofrece un control preciso sobre la disposición de los elementos.

Conceptos fundamentales

El sistema Flexbox se basa en dos componentes principales: el contenedor flex (flex container) y los elementos flex (flex items). El contenedor es el elemento padre que define el contexto flexible, mientras que los elementos flex son sus hijos directos.

.container {
  display: flex;
}

Al aplicar display: flex a un elemento, este se convierte automáticamente en un contenedor flex, y todos sus hijos directos se transforman en elementos flex. Esta transformación activa el comportamiento flexible y permite utilizar todas las propiedades específicas de Flexbox.

Ejes y direcciones

Flexbox opera sobre dos ejes principales: el eje principal (main axis) y el eje transversal (cross axis). Por defecto, el eje principal es horizontal (de izquierda a derecha) y el eje transversal es vertical (de arriba a abajo).

La propiedad flex-direction controla la dirección del eje principal:

.container {
  display: flex;
  flex-direction: row; /* Horizontal, valor por defecto */
}

.container-column {
  display: flex;
  flex-direction: column; /* Vertical */
}

También existen las variantes row-reverse y column-reverse que invierten el orden de los elementos:

.container-reverse {
  display: flex;
  flex-direction: row-reverse; /* De derecha a izquierda */
}

CSS Grid: Sistema de diseño bidimensional

CSS Grid representa una revolución en el diseño web, proporcionando un sistema de layout bidimensional que permite crear estructuras complejas de manera intuitiva y eficiente. A diferencia de otros métodos de posicionamiento, Grid trabaja simultáneamente con filas y columnas, ofreciendo un control preciso sobre la disposición de elementos en una página web.

Fundamentos del sistema Grid

El sistema Grid Layout se basa en la creación de una cuadrícula invisible donde podemos colocar elementos de forma estratégica. Esta cuadrícula se define mediante un contenedor padre que actúa como grid container y elementos hijos que se comportan como grid items.

La activación de Grid es sorprendentemente simple:

.container {
  display: grid;
}

Una vez activado, el contenedor se convierte en un contexto de cuadrícula donde podemos definir la estructura mediante propiedades específicas.

Definición de la estructura básica

Para crear una cuadrícula funcional, necesitamos especificar las dimensiones de columnas y filas. La propiedad grid-template-columns define el ancho de cada columna, mientras que grid-template-rows establece la altura de cada fila:

.container {
  display: grid;
  grid-template-columns: 200px 1fr 100px;
  grid-template-rows: 80px 1fr 60px;
}

En este ejemplo, creamos tres columnas: la primera de 200 píxeles, la segunda que ocupa el espacio restante (1fr), y la tercera de 100 píxeles. Las filas siguen un patrón similar con alturas específicas.

La unidad fr (fracción) es fundamental en Grid, ya que distribuye el espacio disponible de manera proporcional. Si definimos 1fr 2fr 1fr, la segunda columna será el doble de ancha que las otras dos.

Diseño Responsive con CSS

El diseño responsive representa uno de los pilares fundamentales del desarrollo web moderno. Esta metodología permite que nuestros sitios web se adapten automáticamente a diferentes tamaños de pantalla y dispositivos, desde teléfonos móviles hasta monitores de escritorio de gran formato.

La filosofía del diseño responsive se basa en crear una única versión de nuestro sitio web que funcione correctamente en todos los dispositivos. En lugar de desarrollar versiones separadas para móvil y escritorio, utilizamos técnicas CSS específicas que permiten que el contenido se reorganice y redimensione de forma inteligente.

Fundamentos del diseño adaptativo

El concepto de responsive design surgió de la necesidad de abordar la creciente diversidad de dispositivos con acceso a internet. Los usuarios acceden a contenido web desde pantallas que van desde los 320 píxeles de ancho en dispositivos móviles hasta más de 2000 píxeles en monitores ultrawide.

La base técnica del diseño responsive descansa en tres pilares principales: layouts flexibles, imágenes adaptables y media queries. Estos elementos trabajan en conjunto para crear experiencias de usuario coherentes independientemente del dispositivo utilizado.

Los layouts flexibles utilizan unidades relativas como porcentajes en lugar de píxeles fijos. Las imágenes adaptables se redimensionan automáticamente para ajustarse a su contenedor. Las media queries permiten aplicar estilos CSS específicos según las características del dispositivo.

Viewport y configuración inicial

El viewport es el área visible de una página web en el navegador del usuario. Para que nuestro diseño responsive funcione correctamente, necesitamos configurar el viewport mediante una etiqueta meta en el HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Esta configuración indica al navegador que el ancho del viewport debe coincidir con el ancho del dispositivo y que el nivel de zoom inicial debe ser del 100%. Sin esta configuración, los navegadores móviles intentarán mostrar la versión de escritorio reducida, lo que resulta en texto ilegible y una experiencia de usuario deficiente.

El device-width hace referencia al ancho real del dispositivo en píxeles CSS, no en píxeles físicos. Esta distinción es importante porque los dispositivos modernos tienen densidades de píxeles muy altas, pero utilizan píxeles CSS para mantener la legibilidad del contenido.

Variables y Funciones CSS

CSS ha evolucionado significativamente desde sus inicios, incorporando características que permiten escribir código más mantenible y reutilizable. Las variables CSS (también conocidas como propiedades personalizadas) y las funciones CSS representan dos de las herramientas más importantes para crear hojas de estilo modernas y eficientes.

Variables CSS (Custom Properties)

Las variables CSS son propiedades personalizadas que permiten almacenar valores específicos para reutilizarlos a lo largo de toda la hoja de estilos. Esta funcionalidad elimina la repetición de código y facilita enormemente el mantenimiento de proyectos web.

Declaración de variables

Las variables CSS se declaran utilizando el prefijo -- seguido del nombre que queramos asignar. La declaración más común se realiza en el selector :root, que hace que las variables estén disponibles globalmente:

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size-large: 24px;
  --spacing-medium: 16px;
}

Uso de variables con la función var()

Para utilizar una variable declarada, empleamos la función var() que acepta el nombre de la variable como parámetro:

.header {
  background-color: var(--primary-color);
  font-size: var(--font-size-large);
  padding: var(--spacing-medium);
}

.button {
  background-color: var(--secondary-color);
  margin: var(--spacing-medium);
}

Valores de respaldo

La función var() permite definir un valor de respaldo que se utilizará si la variable no está definida:

.element {
  color: var(--text-color, #333333);
  font-size: var(--custom-size, 16px);
}

Funciones CSS Esenciales

CSS proporciona diversas funciones integradas que permiten realizar cálculos y manipulaciones de valores de forma dinámica.

Función calc()

La función calc() permite realizar operaciones matemáticas directamente en CSS, combinando diferentes unidades de medida:

.container {
  width: calc(100% - 40px);
  height: calc(100vh - 80px);
  margin: calc(var(--spacing-medium) * 2);
}

.sidebar {
  width: calc(25% + 10px);
  padding: calc(1rem + 5px);
}

Funciones de color

CSS ofrece varias funciones para trabajar con colores de forma dinámica:

Función rgb() y rgba():

.box {
  background-color: rgb(52, 152, 219);
  border-color: rgba(52, 152, 219, 0.5);
}

Función hsl() y hsla():

.gradient-box {
  background-color: hsl(204, 70%, 53%);
  box-shadow: 0 4px 8px hsla(204, 70%, 53%, 0.3);
}

Funciones de dimensiones

Las funciones min(), max() y clamp() proporcionan control responsivo sobre las dimensiones:

Función min():

.responsive-width {
  width: min(90%, 800px);
  font-size: min(4vw, 24px);
}

Función max():

.minimum-height {
  height: max(300px, 50vh);
  padding: max(16px, 2vw);
}

Función clamp():

.fluid-typography {
  font-size: clamp(16px, 4vw, 32px);
  padding: clamp(8px, 2vw, 24px);
}

Transformación, Transición y Animación en CSS

El CSS moderno nos ofrece herramientas extraordinarias para crear experiencias visuales dinámicas y atractivas en nuestras páginas web. Las transformaciones, transiciones y animaciones son tres pilares fundamentales que permiten dar vida a los elementos HTML, creando interfaces más interactivas y profesionales.

Transformaciones CSS

Las transformaciones CSS permiten modificar la apariencia y posición de los elementos sin alterar el flujo normal del documento. La propiedad transform es la base de estas modificaciones visuales.

Transformaciones básicas

Las transformaciones más comunes incluyen rotación, escalado, traslación y inclinación:

.rotate-element {
  transform: rotate(45deg);
}

.scale-element {
  transform: scale(1.5);
}

.translate-element {
  transform: translate(50px, 100px);
}

.skew-element {
  transform: skew(15deg, 10deg);
}

Combinando transformaciones

Una característica importante es que podemos combinar múltiples transformaciones en una sola declaración:

.complex-transform {
  transform: rotate(30deg) scale(1.2) translate(20px, 10px);
}

El orden de las transformaciones es crucial, ya que cada una se aplica sobre el resultado de la anterior.

Transform-origin

La propiedad transform-origin define el punto de referencia desde el cual se aplican las transformaciones:

.custom-origin {
  transform: rotate(45deg);
  transform-origin: top left;
}

Transiciones CSS

Las transiciones CSS crean cambios suaves entre diferentes estados de un elemento. Son ideales para efectos hover, focus y otros cambios de estado.

Sintaxis básica de transiciones

La propiedad transition controla cómo se animan los cambios de propiedades:

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

.smooth-button:hover {
  background-color: red;
}

Propiedades de transición

Podemos controlar varios aspectos de las transiciones:

• transition-property: específica qué propiedades se animan
• transition-duration: define la duración de la transición
• transition-timing-function: controla la velocidad de la animación
• transition-delay: establece un retraso antes de iniciar

.detailed-transition {
  width: 100px;
  height: 100px;
  background-color: green;
  transition-property: width, height, background-color;
  transition-duration: 0.5s, 0.3s, 0.2s;
  transition-timing-function: ease-in-out;
  transition-delay: 0.1s;
}

Funciones de temporización

Las funciones de temporización más utilizadas incluyen:

• ease: inicio lento, aceleración media, final lento
• linear: velocidad constante
• ease-in: inicio lento, aceleración gradual
• ease-out: inicio rápido, desaceleración gradual
• ease-in-out: combinación de ease-in y ease-out

.timing-examples {
  transition: transform 1s ease-in-out;
}

CSS Avanzado

El CSS avanzado representa el siguiente paso natural después de dominar los fundamentos básicos de las hojas de estilo. Mientras que los conceptos básicos nos permiten aplicar colores, fuentes y espaciado simple, las técnicas avanzadas nos abren las puertas a crear layouts complejos, animaciones fluidas y interfaces responsivas que se adaptan perfectamente a cualquier dispositivo.

Flexbox: la revolución del diseño flexible

Flexbox (Flexible Box Layout) ha transformado completamente la manera en que estructuramos nuestros diseños web. Esta tecnología nos permite crear layouts flexibles que se adaptan automáticamente al contenido y al espacio disponible, eliminando muchas de las frustraciones tradicionales del diseño CSS.

El concepto fundamental de Flexbox se basa en dos elementos: el contenedor flex (flex container) y los elementos flex (flex items). Cuando aplicamos display: flex a un contenedor, todos sus hijos directos se convierten automáticamente en elementos flexibles.

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

La dirección principal (main axis) y la dirección cruzada (cross axis) son conceptos clave para entender cómo funciona Flexbox. Por defecto, la dirección principal es horizontal, pero podemos cambiarla usando flex-direction.

.vertical-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  flex: 0 0 auto; /* No crece ni se encoge */
}

.main-content {
  flex: 1; /* Ocupa todo el espacio disponible */
}

.footer {
  flex: 0 0 auto;
}

Grid: arquitectura bidimensional

CSS Grid nos proporciona un sistema de diseño bidimensional que permite crear layouts complejos con un control preciso sobre filas y columnas. A diferencia de Flexbox, que es principalmente unidimensional, Grid nos permite trabajar simultáneamente en ambas dimensiones.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
  min-height: 100vh;
}

.header {
  grid-column: 1 / -1; /* Ocupa todas las columnas */
}

.sidebar {
  grid-column: 1;
  grid-row: 2;
}

.main {
  grid-column: 2;
  grid-row: 2;
}

Las áreas de grid nos permiten crear layouts semánticos y fáciles de mantener:

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 150px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }

CSS moderno ha ampliado enormemente su superficie con cascade layers, container queries, subgrid, nesting nativo, color perceptualmente uniforme (oklch), mezcla de colores (color-mix), tematización automática (light-dark) y view transitions. En esta lección exploramos las técnicas y metodologías que permiten escribir hojas de estilo escalables, accesibles y fáciles de mantener.

Técnicas modernas en CSS 3

Uso de variables CSS

Las variables CSS, también conocidas como custom properties, permiten definir valores reutilizables en tu hoja de estilos. Esto facilita la gestión y modificación de estilos.

:root {
--color-primario: #3498db;
--margen-base: 16px;
}

body {
color: var(--color-primario);
margin: var(--margen-base);
}

Flexbox y Grid Layout

Flexbox y Grid Layout son sistemas de diseño que proporcionan una estructura flexible y adaptable. Flexbox es ideal para diseños unidimensionales, mientras que Grid Layout es perfecto para estructuras bidimensionales.

Ejemplo de Flexbox

.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.item {
margin: 10px;
}

Ejemplo de Grid Layout

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}

.grid-item {
background-color: #f1f1f1;
padding: 20px;
}

Metodologías en CSS 3

BEM (Block, Element, Modifier)

BEM es una metodología de nomenclatura que facilita la escritura de CSS mantenible y escalable. Se basa en bloques, elementos y modificadores.

/* Bloque */
.menu {}

/* Elemento */
.menu__item {}

/* Modificador */
.menu__item--activo {}

OOCSS (Object-Oriented CSS)

OOCSS promueve la separación de estructura y apariencia, lo que mejora la reutilización de código y la consistencia en los estilos.

/* Estructura */
.card {
padding: 20px;
border: 1px solid #ddd;
}

/* Apariencia */
.card--oscuro {
background-color: #333;
color: #fff;
}

SMACSS (Scalable and Modular Architecture for CSS)

SMACSS divide los estilos en cinco categorías: base, layout, module, state y theme. Esto ayuda a mantener un código CSS organizado y fácil de manejar.

/* Base */
body {
font-family: Arial, sans-serif;
}

/* Layout */
.header, .footer {
background-color: #333;
color: #fff;
}

/* Module */
.card {
padding: 20px;
border: 1px solid #ddd;
}

/* State */
.is-hidden {
display: none;
}

/* Theme */
.theme-dark .card {
background-color: #333;
color: #fff;
}