Estudiando Estilos: Introducción a CSS con Ejemplos

¡Bienvenido al mundo del diseño web! Si ya sabes un poco sobre HTML y cómo usar etiquetas para estructurar una página, ahora es el momento de darle vida con CSS (Cascading Style Sheets). CSS es el lenguaje que transforma una página básica en algo visualmente atractivo, controlando colores, fuentes, espaciado, disposición y mucho más. Con CSS, puedes hacer que tu sitio se vea moderno, organizado y adaptable a cualquier pantalla.

En esta guía práctica, te llevaremos de la mano a través de los conceptos esenciales de CSS con ejemplos claros que puedes probar tú mismo. No necesitas ser un experto: esta guía está diseñada para principiantes que quieren empezar a estilizar sus páginas web. ¡Prepárate para darle un toque único a tu HTML!

1. Cómo Vincular CSS a HTML

Para que tus estilos CSS se apliquen a una página HTML, necesitas conectar el código CSS con tu archivo HTML. La forma más práctica y recomendada es crear un archivo separado con extensión .css (por ejemplo, styles.css) y vincularlo al HTML usando la etiqueta <link> dentro de la sección <head>. Esto mantiene tu código limpio, organizado y fácil de mantener, especialmente en proyectos más grandes.

En esta guía, todos los ejemplos usan un archivo externo styles.css para mostrarte la mejor práctica desde el principio.

Para los ejemplos de esta guía, hemos puesto todo el CSS en un archivo externo llamado styles.css y lo enlazamos a esta página para mostrar la mejor práctica.

¿Cómo funciona?

Aquí verías un título centrado y en color rojo, estilizado por el CSS vinculado, si pruebas el código en tu navegador:

HTML:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Ejemplo Vinculación CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Hola, este título tiene estilo gracias a CSS!</h1>
</body>
</html>

CSS:

h1 {
  color: red; /* Cambia el color del texto a rojo */
  text-align: center; /* Centra el texto */
}

2. Selectores Básicos: ID y Clase

¿Cómo funcionan?

Los selectores son la forma en que «apuntas» a los elementos HTML que quieres estilizar. Los dos selectores más comunes son ID y Clase, y cada uno tiene su propio propósito:

Selector por ID (#): Usa # seguido del valor del atributo id para estilizar un elemento único en la página. Un id debe ser único en todo el documento, como un nombre exclusivo para un elemento especial.
Selector por Clase (.): Usa . seguido del valor del atributo class para aplicar estilos a uno o más elementos que comparten la misma clase. Es ideal para grupos de elementos que quieres estilizar de forma similar.

Código para probar:

Aquí verías un div con texto azul en negrita y dos párrafos con fondo amarillo, mostrando cómo los selectores afectan elementos específicos:

HTML:

<div id="principal">Este es un div con ID</div>
<p class="resaltado">Párrafo resaltado 1</p>
<p class="resaltado">Párrafo resaltado 2</p>

CSS:

#principal {
  font-weight: bold; /* Texto en negrita */
  color: blue; /* Color azul */
}
.resaltado {
  background-color: yellow; /* Fondo amarillo */
}

3. Unidades de Medida y Diseño Responsivo

¿Cómo funcionan?

En CSS, las unidades de medida definen tamaños, espaciados y otras dimensiones. Hay dos tipos principales: unidades absolutas (como px, que tienen un tamaño fijo) y unidades relativas (que dependen de otros valores, como el tamaño de la pantalla o la fuente).

Para crear sitios web que se vean bien en cualquier dispositivo (lo que llamamos diseño responsivo), las unidades relativas son tus mejores amigas. Algunas de las más útiles son:

em: Relativa al tamaño de fuente del elemento padre.
rem: Relativa al tamaño de fuente del elemento raíz (<html>). Más predecible que em.
%: Relativa al tamaño del contenedor padre.
vw: Porcentaje del ancho total de la ventana del navegador (viewport width). 100vw es el 100% del ancho.
vh: Porcentaje del alto total de la ventana del navegador (viewport height). 100vh es el 100% del alto.

Ejemplo en acción:

Aquí verías un texto grande con 2rem y una caja que ocupa el 50% del ancho y el 20% del alto de la ventana, ajustándose si cambias el tamaño del navegador.

Código para probar:

HTML:

<p class="text-rem">Texto con tamaño relativo (2rem)</p>
<div class="box-vw-vh">
  Caja con tamaño relativo a la ventana (50vw x 20vh)
</div>

CSS:

.text-rem {
  font-size: 2rem; /* 2 veces el tamaño de fuente raíz */
}
.box-vw-vh {
  width: 50vw; /* 50% del ancho de la ventana */
  height: 20vh; /* 20% del alto de la ventana */
  background-color: lightblue; /* Fondo azul claro */
  border-radius: 6px; /* Bordes redondeados */
  text-align: center; /* Texto centrado */
  line-height: 20vh; /* Centra el texto verticalmente */
  box-sizing: border-box; /* Incluye padding/borde en el tamaño */
  padding: 5px; /* Espacio interno */
}

4. Margen y Relleno (Box Model)

¿Cómo funciona?

En CSS, cada elemento HTML se comporta como una caja, y el Box Model es el concepto que explica cómo se estructura esa caja. Tiene cuatro partes, de adentro hacia afuera:

Content (Contenido): El contenido real del elemento (texto, imágenes, etc.).
Padding (Relleno): El espacio dentro del borde, entre el contenido y el borde. Se usa para crear «aire» alrededor del contenido interno.
Border (Borde): La línea que rodea el padding y el contenido. Puedes controlar su estilo, grosor y color.
Margin (Margen): El espacio fuera del borde, entre el borde de un elemento y otros elementos cercanos. Se usa para separar elementos entre sí.

Con las propiedades margin y padding, puedes controlar estos espacios para que tus elementos se vean bien organizados.

Ejemplo en acción:

Aquí verías una caja verde con un borde, espacio interno (padding) que separa el texto del borde, y espacio externo (margin) que la aleja de otros elementos.

Código para probar:

HTML:

<div class="caja">Caja con margen y padding</div>

CSS:

.caja {
  background-color: lightgreen; /* Fondo verde claro */
  margin: 20px; /* 20px de espacio externo alrededor */
  padding: 15px; /* 15px de espacio interno */
  border: 2px solid green; /* Borde verde de 2px */
}

5. Fondos y Estilos Básicos

¿Cómo funciona?

Con CSS, puedes hacer que tus elementos destaquen añadiendo fondos atractivos. Puedes usar colores sólidos, imágenes o incluso gradientes para darles personalidad. Las propiedades de fondo te permiten controlar cómo se ven y se ajustan estos estilos, haciendo que tus páginas sean más interesantes visualmente.

Algunas propiedades clave son:

background-image: url('...'): Define la imagen a usar.
background-size: cover;: Escala la imagen para que cubra todo el área del elemento, recortando si es necesario para evitar distorsión.
`background-size: contain;`: Escala la imagen para que encaje completamente dentro del elemento, sin recortarse, manteniendo sus proporciones. Puede dejar espacio vacío.
background-position: center;: Centra la imagen dentro del elemento.

Ejemplo en acción:

Aquí verías una caja con una imagen de fondo que se ajusta perfectamente y se centra, creando un efecto limpio y profesional.

Código para probar:

HTML:

<div class="fondo"></div>

CSS:

.fondo {
  width: 300px;
  height: 200px;
  background-image: url('https://via.placeholder.com/300x200/aaddff/000000?text=Fondo+Ejemplo');
  background-size: cover; /* Cubre todo el área sin distorsionarse */
  background-position: center; /* Centra la imagen */
  border-radius: 6px; /* Bordes redondeados */
  margin: 10px auto; /* Centra la caja horizontalmente */
  border: 1px solid #ccc; /* Borde sutil */
}

6. Posicionamiento de Elementos

¿Cómo funciona?

La propiedad position te da el poder de colocar los elementos exactamente donde los quieres en tu página, incluso fuera del flujo normal del diseño. Esto es útil para crear efectos como menús fijos, superposiciones o elementos que se mueven con precisión. Los valores principales son:

static: Es el valor por defecto. El elemento sigue el flujo normal del documento (uno tras otro, o según Flexbox/Grid). Las propiedades top, bottom, left, right, y z-index no tienen efecto.
relative: El elemento se posiciona relativo a su posición original en el flujo normal. Puedes usar top, bottom, left, right para desplazarlo desde su lugar de origen, pero su espacio original en el layout sigue reservado. Es muy útil para ser el contenedor de referencia de elementos con position: absolute;.
absolute: El elemento se posiciona relativo a su contenedor posicionado más cercano (un ancestro con position no static, generalmente relative). Se saca del flujo normal del documento, y los elementos a su alrededor se comportan como si no existiera.
fixed: El elemento se posiciona relativo a la ventana del navegador (viewport) y permanece fijo en ese lugar incluso cuando haces scroll. También se saca del flujo normal.

Ejemplo en acción:

Aquí verías una caja gris clara con una caja coral más pequeña en la esquina superior derecha, posicionada con absolute dentro de un contenedor relative.

Código para probar:

HTML:

<div class="contenedor">
  <div class="absoluto">Posición absoluta</div>
  Este es el contenido del contenedor relativo.
</div>

CSS:

.contenedor {
  position: relative; /* Contenedor de referencia para el elemento absoluto */
  width: 300px;
  height: 150px;
  background: #eee; /* Fondo gris claro */
  margin: 15px auto; /* Centra horizontalmente */
  border-radius: 6px; /* Bordes redondeados */
  border: 1px solid #ccc; /* Borde sutil */
  overflow: hidden; /* Oculta contenido que se desborde */
}

.absoluto {
  position: absolute; /* Se posiciona respecto al contenedor relativo */
  top: 10px; /* 10px desde el borde superior */
  right: 10px; /* 10px desde el borde derecho */
  background: coral; /* Fondo coral */
  padding: 5px; /* Espacio interno */
  border-radius: 4px; /* Bordes redondeados */
  color: white; /* Texto blanco */
  font-weight: bold; /* Texto en negrita */
  font-size: 0.9em; /* Tamaño de fuente ligeramente menor */
}

7. Layouts Modernos con Flexbox

¿Cómo funciona?

Olvídate de los trucos complicados del pasado: Flexbox (Flexible Box Layout) hace que alinear y distribuir elementos sea súper sencillo. Es un sistema de diseño unidimensional, perfecto para organizar elementos en filas o columnas, como barras de navegación, tarjetas o formularios. Con Flexbox, puedes controlar cómo se distribuye el espacio y alinear los elementos con facilidad.

Para empezar, aplica display: flex al contenedor padre. Luego, las propiedades del contenedor (como justify-content o align-items) afectan a sus elementos hijos directos, llamados ítems flex.

Ejemplo en acción:

Aquí verías una caja gris clara con tres cajas grises más oscuras dentro, espaciadas uniformemente y centradas verticalmente, ajustándose si cambias el tamaño de la ventana.

Código para probar:

HTML:

<div class="flex-container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

CSS:

.flex-container {
  display: flex; /* Convierte el contenedor en un contenedor flex */
  justify-content: space-around; /* Distribuye el espacio horizontalmente alrededor de los ítems */
  align-items: center; /* Centra los ítems verticalmente en el cross-axis */
  background-color: #ddd;
  padding: 10px;
  border-radius: 6px;
  margin: 15px 0;
  flex-wrap: wrap; /* Permite que los ítems salten de línea si no caben */
}
.flex-container > div {
  background-color: #aaa;
  padding: 15px;
  border-radius: 4px;
  color: white;
  font-weight: bold;
  margin: 5px; /* Espacio entre ítems */
  min-width: 80px; /* Evita que se aplasten demasiado */
  text-align: center;
}

8. Layouts Avanzados con CSS Grid

¿Cómo funciona?

Si Flexbox es ideal para filas o columnas, CSS Grid es tu herramienta para diseños bidimensionales, donde controlas filas y columnas al mismo timepo. Grid es perfecto para crear estructuras completas de una página, como combinar una cabecera, barra lateral, contenido principal y pie de página en una cuadrícula limpia.

Para usar Grid, estableces display: grid; en el contenedor padre. Luego defines las columnas (grid-template-columns) y filas (grid-template-rows) de la cuadrícula en el contenedor grid. Los elementos hijos directos se convierten en ítems grid y se colocan automáticamente en la cuadrícula o puedes controlarlo manualmente.

Ejemplo en acción:

Aquí verías una cuadrícula con celdas organizadas en filas y columnas, con elementos numerados que se ajustan dinámicamente al tamaño de la pantalla.

Código para probar:

HTML:

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

CSS:

.grid-container {
  display: grid; /* Activa el modelo Grid */
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Columnas dinámicas de al menos 100px */
  gap: 10px; /* Espacio entre celdas */
  margin: 15px 0; /* Margen externo */
}

.grid-container > div {
  background-color: #8bc34a; /* Fondo verde claro */
  padding: 20px; /* Espacio interno */
  text-align: center; /* Texto centrado */
  border-radius: 6px; /* Bordes redondeados */
  color: white; /* Texto blanco */
  font-weight: bold; /* Texto en negrita */
}

9. Pseudoclases y Pseudoelementos

¿Cómo funcionan?

Las Pseudoclases y Pseudoelementos te permiten aplicar estilos más allá de lo que puedes seleccionar directamente con selectores de etiqueta, clase o ID.

Pseudoclases: (Empiezan con : un solo dos puntos) Seleccionan elementos basándose en un estado (ej: cuando un enlace ha sido visitado :visited, cuando se pasa el mouse por encima :hover, cuando un input está enfocado :focus, o basándose en su posición en la estructura (ej: el primer hijo :first-child).
Pseudoelementos: (Empiezan con :: doble dos puntos) Permiten seleccionar y dar estilo a partes de un elemento que no existen como elementos HTML propios, o insertar contenido decorativo. Los más comunes son ::before (inserta contenido antes del elemento) y ::after (inserta contenido después).

Ejemplo en acción:

Aquí verías un enlace con un emoicon «👉» antes del texto, que cambia de color y se subraya al pasar el mouse, mostrando el efecto dinámico.

Código para probar:

HTML:

<a href="#" class="link-example">Enlace con pseudoclase (:hover) y pseudoelemento (::before)</a>

CSS:

.link-example {
  text-decoration: none; /* Quita el subrayado por defecto */
  color: #3498db; /* Azul inicial */
  font-weight: bold; /* Texto en negrita */
  transition: color 0.3s ease; /* Cambio suave de color */
}

.link-example:hover {
  color: red; /* Cambia a rojo al pasar el mouse */
  text-decoration: underline; /* Añade subrayado */
}

.link-example::before {
  content: "👉 "; /* Añade una flecha antes del texto */
  font-size: 0.9em; /* Ligeramente más pequeño */
}

10. Animaciones y Transiciones

¿Cómo funcionan?

Añadir movimiento a tus páginas web puede hacerlas más dinámicas y atractivas. CSS te ofrece dos formas principales de lograrlo: transiciones y animaciones. Ambas son perfectas para mejorar la experiencia del usuario, como resaltar botones al pasar el mouse o crear efectos suaves.

Transiciones: Son la opción más simple. Permiten que una propiedad CSS (como el color o la posición) cambie suavemente entre dos estados, por ejemplo, al pasar el mouse. Tú defines qué propiedad animar, cuánto tiempo dura y cómo debe ser el cambio (con la propiedad transition).
Animaciones: Son más potentes y te dan control total. Con @keyframes, creas una secuencia de estilos en diferentes momentos, y luego aplicas esa secuencia a un elemento con la propiedad animation, ajustando duración, repeticiones y más.

Ejemplo en acción:

Aquí verías un botón que cambia de color, se eleva ligeramente y ajusta su sombra al pasar el mouse, con transiciones suaves que hacen el efecto más natural.

Código para probar:

HTML:

<button class="btn-transition">Botón con transición al pasar el mouse</button>

CSS:

.btn-transition {
  background-color: #3498db; /* Azul inicial */
  color: white; /* Texto blanco */
  padding: 12px 24px; /* Espacio interno */
  border: none; /* Sin borde */
  border-radius: 6px; /* Bordes redondeados */
  cursor: pointer; /* Cursor de mano al pasar el mouse */
  font-size: 1rem; /* Tamaño de fuente */
  margin-top: 10px; /* Margen superior */
  display: inline-block; /* Comportamiento como bloque en línea */
  font-weight: bold; /* Texto en negrita */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Sombra suave */
  transition: background-color 0.3s ease, transform 0.1s ease, box-shadow 0.3s ease; /* Transiciones suaves */
}

.btn-transition:hover {
  background-color: #2980b9; /* Azul más oscuro */
  transform: translateY(-2px); /* Se eleva ligeramente */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Sombra más intensa */
}

.btn-transition:active {
  background-color: #1f618d; /* Azul aún más oscuro al clic */
  transform: translateY(0); /* Vuelve a su posición */
  box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Sombra reducida */
}

11. Variables CSS (Propiedades Personalizadas)

¿Cómo funcionan?

Las variables CSS (o propiedades personalizadas) son como cajas donde guardas valores (colores, tamaños, espaciados) para reutilizarlos en todo tu código. Esto hace que tus estilos sean más fáciles de mantener y actualizar, especialmente en proyectos grandes. Por ejemplo, si cambias un color en una variable, se actualiza en todos los lugares donde la usas.

Las variables se definen con un nombre que empieza con -- (por ejemplo, --color-principal) y se suelen declarar en el selector :root para que estén disponibles en toda la página. Luego, las usas con la función var(--nombre-variable).

Ejemplo en acción:

Aquí verías elementos que comparten el mismo color y sombra definidos en variables, mostrando cómo un cambio en la variable afecta todo automáticamente.

Código para probar:

CSS:

:root {
  --color-principal: #e74c3c; /* Rojo llamativo */
  --espaciado-base: 15px; /* Espaciado estándar */
  --sombra-ligera: 0 2px 4px rgba(0,0,0,0.1); /* Sombra suave */
}

h2 {
  border-bottom: 2px solid var(--color-principal); /* Borde con el color variable */
}

.uses-variable {
  color: var(--color-principal); /* Texto rojo *
  border: 1px solid var(--color-principal); /* Borde rojo */
  padding: 10px; /* Espacio interno */
  margin: 10px 0; /* Margen externo */
  border-radius: 4px; /* Bordes redondeados */
  display: inline-block; /* Comportamiento como bloque en línea */
  box-shadow: var(--sombra-ligera); /* Sombra variable */
}

12. Buenas Prácticas de Accesibilidad en CSS

¿Cómo funcionan?

La accesibilidad web (o a11y) se trata de crear sitios que todos puedan usar, incluidas personas con discapacidades visuales, auditivas, motoras o cognitivas. CSS juega un papel clave al garantizar que tus diseños sean legibles y navegables para todos. Aquí van algunas prácticas esenciales:

Contraste suficiente: Usa colores con suficiente diferencia entre el texto y el fondo para que sean fáciles de leer, especialmente para personas con baja visión.
No dependas solo del color: Añade texto, iconos o negritas para señalar información (como errores o éxitos), no solo colores.
Texto escalable: Usa unidades relativas como rem o em para que los usuarios puedan ajustar el tamaño del texto en su navegador.
Foco visible: Asegúrate de que los elementos interactivos (botones, enlaces, formularios) muestren un contorno claro cuando se navegan con el teclado (estado :focus). ¡Nunca elimines el outline sin reemplazarlo por otro estilo visible!

Ejemplo en acción:

Aquí verías texto con buen contraste, mensajes con negritas además de colores, y elementos con contornos claros al navegar con la tecla Tab.

Código para probar:

HTML:

<button>Botón accesible</button>
<a href="#">Enlace accesible</a>
<p class="error-message">Error: Revisa los datos</p>
<p class="success-message">¡Éxito: Todo correcto!</p>

CSS:

body {
  background-color: white; /* Fondo claro */
  color: #222; /* Texto oscuro para buen contraste */
  font-size: 1rem; /* Tamaño base escalable */
  line-height: 1.5; /* Mejora la legibilidad */
}

button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid blue; /* Contorno visible al enfocar */
  outline-offset: 2px; /* Separa el contorno del elemento */
}

.error-message {
  color: #e74c3c; /* Rojo para errores */
  font-weight: bold; /* Negrita para no depender solo del color */
}

.success-message {
  color: #2ecc71; /* Verde para éxito */
  font-weight: bold; /* Negrita adicional */
}

13. Organización y Escalabilidad del Código CSS

¿Cómo funciona?

Cuando tus proyectos crecen, mantener el CSS organizado es clave para que el código sea fácil de entender, modificar y escalar, especialmente si trabajas en equipo. Una forma popular de lograrlo es con la metodología BEM (Block, Element, Modifier), que usa nombres de clases claros y estructurados:

Block: Una entidad independiente (ej: .card, .button, .header).
Element: Una parte de un Block que no tiene sentido por sí sola (ej: .card__title, .card__description, .header__logo). Se unen al Block con doble guion bajo (__).
Modifier: Una bandera en un Block o Element para cambiar su apariencia o comportamiento (ej: .card--highlighted, .button--disabled, .header--fixed). Se unen al Block o Element con doble guion (--).

BEM hace que tu CSS sea predecible y fácil de mantener, incluso en proyectos grandes.

Ejemplo en acción:

Aquí se mostrarían dos «tarjetas» (cards), una normal y otra con un estilo «resaltado» (highlighted), demostrando cómo se usan las clases .card, .card__title, .card__description y el modificador .card--highlighted.

Código para probar:

HTML:

<div class="card">
  <h3 class="card__title">Título de la Tarjeta</h3>
  <p class="card__description">Esta es una descripción corta.</p>
</div>
<div class="card card--highlighted">
  <h3 class="card__title">Título de la Tarjeta Resaltada</h3>
  <p class="card__description">Descripción de la tarjeta resaltada.</p>
</div>

CSS:

.card {
  padding: 15px; /* Espacio interno */
  border: 1px solid #ccc; /* Borde gris */
  border-radius: 6px; /* Bordes redondeados */
  margin-bottom: 15px; /* Espacio entre tarjetas */
  background-color: #fff; /* Fondo blanco */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Sombra suave */
}

.card--highlighted {
  border-color: #f39c12; /* Borde naranja */
  background-color: #fcf8e3; /* Fondo amarillo claro */
  box-shadow: 0 4px 8px rgba(0,0,0,0.08); /* Sombra más intensa */
}

.card__title {
  font-weight: bold; /* Texto en negrita */
  margin-top: 0; /* Sin margen superior */
  margin-bottom: 8px; /* Margen inferior */
  color: #2c3e50; /* Color oscuro */
}

.card__description {
  font-size: 0.95em; /* Tamaño ligeramente menor */
  color: #555; /* Gris oscuro */
  margin-bottom: 0; /* Sin margen inferior */
}

Recursos para la Práctica y Próximos Pasos

Si llegaste hasta acá, has cubierto los conceptos esenciales de CSS para empezar a dar estilo a tus páginas web. Recuerda que la práctica hace al maestro. Te animo a:

Prueba los ejemplos: Explora los archivos index.html y styles.css de esta guía en mi Gis. Cópialos, ábrelos en tu editor de código, y cámbiales colores, tamaños o posiciones. ¡Juega con ellos y no tengas miedo de romper algo, es parte del aprendizaje!
Modificar los ejemplos: Cambia colores, tamaños, posiciones. ¡Rompe cosas y arréglalas! Es la mejor forma de aprender.
Crear tus propios proyectos simples: Intenta replicar el layout de una tarjeta simple, una barra de navegación o una sección de un sitio web usando Flexbox o Grid.
Explorar recursos adicionales: CSS es vasto. Aquí tienes algunos lugares excelentes para seguir aprendiendo:

¡No te detengas aquí! CSS es una habilidad fundamental y creativa en el desarrollo web. Sigue practicando, explorando y construyendo.

Estudiando Estilos: Introducción a CSS con Ejemplos

1. Cómo Vincular CSS a HTML

¿Cómo funciona?

2. Selectores Básicos: ID y Clase

¿Cómo funcionan?

Código para probar:

3. Unidades de Medida y Diseño Responsivo

¿Cómo funcionan?

Ejemplo en acción:

Código para probar:

4. Margen y Relleno (Box Model)

¿Cómo funciona?

Ejemplo en acción:

Código para probar:

5. Fondos y Estilos Básicos

¿Cómo funciona?

Ejemplo en acción:

Código para probar:

6. Posicionamiento de Elementos

¿Cómo funciona?

Ejemplo en acción:

Código para probar:

7. Layouts Modernos con Flexbox

¿Cómo funciona?

Ejemplo en acción:

Código para probar:

8. Layouts Avanzados con CSS Grid

¿Cómo funciona?

Ejemplo en acción:

Código para probar:

9. Pseudoclases y Pseudoelementos

¿Cómo funcionan?

Ejemplo en acción:

Código para probar:

10. Animaciones y Transiciones

¿Cómo funcionan?

Ejemplo en acción:

Código para probar:

11. Variables CSS (Propiedades Personalizadas)

¿Cómo funcionan?

Ejemplo en acción:

Código para probar:

12. Buenas Prácticas de Accesibilidad en CSS

¿Cómo funcionan?

Ejemplo en acción:

Código para probar:

13. Organización y Escalabilidad del Código CSS

¿Cómo funciona?

Ejemplo en acción:

Código para probar:

Recursos para la Práctica y Próximos Pasos

Deja una respuesta Cancelar la respuesta