{"id":73,"date":"2025-05-01T09:13:43","date_gmt":"2025-05-01T13:13:43","guid":{"rendered":"https:\/\/juredev.com\/blog\/?p=73"},"modified":"2025-05-01T09:25:20","modified_gmt":"2025-05-01T13:25:20","slug":"estudiando-estilos-introduccion-a-css-con-ejemplos","status":"publish","type":"post","link":"https:\/\/juredev.com\/blog\/2025\/05\/estudiando-estilos-introduccion-a-css-con-ejemplos\/","title":{"rendered":"Estudiando Estilos: Introducci\u00f3n a CSS con Ejemplos"},"content":{"rendered":"\n

\u00a1Bienvenido al mundo del dise\u00f1o web! Si ya sabes un poco sobre HTML<\/strong> y c\u00f3mo usar etiquetas para estructurar una p\u00e1gina, ahora es el momento de darle vida con CSS <\/strong>(Cascading Style Sheets). CSS<\/strong> es el lenguaje que transforma una p\u00e1gina b\u00e1sica en algo visualmente atractivo, controlando colores, fuentes, espaciado, disposici\u00f3n y mucho m\u00e1s. Con CSS<\/strong>, puedes hacer que tu sitio se vea moderno, organizado y adaptable a cualquier pantalla.<\/p>\n\n\n\n

En esta gu\u00eda pr\u00e1ctica, te llevaremos de la mano a trav\u00e9s de los conceptos esenciales de CSS <\/strong>con ejemplos claros que puedes probar t\u00fa mismo. No necesitas ser un experto: esta gu\u00eda est\u00e1 dise\u00f1ada para principiantes que quieren empezar a estilizar sus p\u00e1ginas web. \u00a1Prep\u00e1rate para darle un toque \u00fanico a tu HTML<\/strong>!<\/p>\n\n\n\n

1. C\u00f3mo Vincular CSS a HTML<\/h2>\n\n\n\n

Para que tus estilos CSS<\/strong> se apliquen a una p\u00e1gina HTML<\/strong>, necesitas conectar el c\u00f3digo CSS <\/strong>con tu archivo HTML<\/strong>. La forma m\u00e1s pr\u00e1ctica y recomendada es crear un archivo separado con extensi\u00f3n .css (por ejemplo, styles.css) y vincularlo al HTML usando la etiqueta <link><\/code> dentro de la secci\u00f3n <head><\/code>. Esto mantiene tu c\u00f3digo limpio, organizado y f\u00e1cil de mantener, especialmente en proyectos m\u00e1s grandes.<\/p>\n\n\n\n

En esta gu\u00eda, todos los ejemplos usan un archivo externo styles.css para mostrarte la mejor pr\u00e1ctica desde el principio.<\/p>\n\n\n\n

Para los ejemplos de esta gu\u00eda, hemos puesto todo el CSS <\/strong>en un archivo externo llamado styles.css<\/code> y lo enlazamos a esta p\u00e1gina para mostrar la mejor pr\u00e1ctica.<\/p>\n\n\n\n

\u00bfC\u00f3mo funciona?<\/h3>\n\n\n\n

Aqu\u00ed ver\u00edas un t\u00edtulo centrado y en color rojo, estilizado por el CSS vinculado, si pruebas el c\u00f3digo en tu navegador:<\/p>\n\n\n\n

HTML:<\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Ejemplo Vinculaci\u00f3n CSS<\/title>\n  <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n  <h1>Hola, este t\u00edtulo tiene estilo gracias a CSS!<\/h1>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
CSS:<\/p>\n\n\n\n
h1 {\n  color: red; \/* Cambia el color del texto a rojo *\/\n  text-align: center; \/* Centra el texto *\/\n}<\/code><\/pre>\n\n\n\n
2. Selectores B\u00e1sicos: ID y Clase<\/h2>\n\n\n\n
\u00bfC\u00f3mo funcionan?<\/h3>\n\n\n\n
Los selectores son la forma en que \u00abapuntas\u00bb a los elementos HTML que quieres estilizar. Los dos selectores m\u00e1s comunes son ID<\/strong> y Clase<\/strong>, y cada uno tiene su propio prop\u00f3sito:<\/p>\n\n\n\n
    \n
  • Selector por ID (#<\/code>):<\/strong> Usa #<\/code> seguido del valor del atributo id para estilizar un elemento \u00fanico en la p\u00e1gina. Un id debe ser \u00fanico en todo el documento, como un nombre exclusivo para un elemento especial.<\/li>\n\n\n\n
  • Selector por Clase (.<\/code>):<\/strong> Usa .<\/code> seguido del valor del atributo class<\/code> para aplicar estilos a uno o m\u00e1s elementos que comparten la misma clase. Es ideal para grupos de elementos que quieres estilizar de forma similar.<\/li>\n<\/ul>\n\n\n\n
    C\u00f3digo para probar:<\/h3>\n\n\n\n
    Aqu\u00ed ver\u00edas un div<\/code> con texto azul en negrita y dos p\u00e1rrafos con fondo amarillo, mostrando c\u00f3mo los selectores afectan elementos espec\u00edficos:<\/p>\n\n\n\n
    HTML:<\/p>\n\n\n\n
    <div id=\"principal\">Este es un div con ID<\/div>\n<p class=\"resaltado\">P\u00e1rrafo resaltado 1<\/p>\n<p class=\"resaltado\">P\u00e1rrafo resaltado 2<\/p><\/code><\/pre>\n\n\n\n
    CSS:<\/p>\n\n\n\n
    #principal {\n  font-weight: bold; \/* Texto en negrita *\/\n  color: blue; \/* Color azul *\/\n}\n.resaltado {\n  background-color: yellow; \/* Fondo amarillo *\/\n}<\/code><\/pre>\n\n\n\n
    3. Unidades de Medida y Dise\u00f1o Responsivo<\/h2>\n\n\n\n
    \u00bfC\u00f3mo funcionan?<\/h3>\n\n\n\n
    En CSS, las unidades de medida definen tama\u00f1os, espaciados y otras dimensiones. Hay dos tipos principales: unidades absolutas (como px<\/code>, que tienen un tama\u00f1o fijo) y unidades relativas (que dependen de otros valores, como el tama\u00f1o de la pantalla o la fuente).<\/p>\n\n\n\n
    Para crear sitios web que se vean bien en cualquier dispositivo (lo que llamamos dise\u00f1o responsivo<\/strong>), las unidades relativas son tus mejores amigas. Algunas de las m\u00e1s \u00fatiles son:<\/p>\n\n\n\n
      \n
    • em<\/code>: Relativa al tama\u00f1o de fuente del elemento padre.<\/li>\n\n\n\n
    • rem<\/code>: Relativa al tama\u00f1o de fuente del elemento ra\u00edz (<html><\/code>). M\u00e1s predecible que em<\/code>.<\/li>\n\n\n\n
    • %<\/code>: Relativa al tama\u00f1o del contenedor padre.<\/li>\n\n\n\n
    • vw<\/code>: Porcentaje del ancho<\/strong> total de la ventana del navegador (viewport width). 100vw<\/code> es el 100% del ancho.<\/li>\n\n\n\n
    • vh<\/code>: Porcentaje del alto<\/strong> total de la ventana del navegador (viewport height). 100vh<\/code> es el 100% del alto.<\/li>\n<\/ul>\n\n\n\n
      Ejemplo en acci\u00f3n:<\/h3>\n\n\n\n
      Aqu\u00ed ver\u00edas un texto grande con 2rem<\/code> y una caja que ocupa el 50% del ancho y el 20% del alto de la ventana, ajust\u00e1ndose si cambias el tama\u00f1o del navegador.<\/p>\n\n\n\n
      C\u00f3digo para probar:<\/h3>\n\n\n\n
      HTML:<\/p>\n\n\n\n
      <p class=\"text-rem\">Texto con tama\u00f1o relativo (2rem)<\/p>\n<div class=\"box-vw-vh\">\n  Caja con tama\u00f1o relativo a la ventana (50vw x 20vh)\n<\/div><\/code><\/pre>\n\n\n\n
      CSS:<\/p>\n\n\n\n
      .text-rem {\n  font-size: 2rem; \/* 2 veces el tama\u00f1o de fuente ra\u00edz *\/\n}\n.box-vw-vh {\n  width: 50vw; \/* 50% del ancho de la ventana *\/\n  height: 20vh; \/* 20% del alto de la ventana *\/\n  background-color: lightblue; \/* Fondo azul claro *\/\n  border-radius: 6px; \/* Bordes redondeados *\/\n  text-align: center; \/* Texto centrado *\/\n  line-height: 20vh; \/* Centra el texto verticalmente *\/\n  box-sizing: border-box; \/* Incluye padding\/borde en el tama\u00f1o *\/\n  padding: 5px; \/* Espacio interno *\/\n}<\/code><\/pre>\n\n\n\n
      4. Margen y Relleno (Box Model)<\/h2>\n\n\n\n
      \u00bfC\u00f3mo funciona?<\/h3>\n\n\n\n
      En CSS<\/strong>, cada elemento HTML <\/strong>se comporta como una caja, y el Box Model es el concepto que explica c\u00f3mo se estructura esa caja. Tiene cuatro partes, de adentro hacia afuera:<\/p>\n\n\n\n
        \n
      • Content (Contenido):<\/strong> El contenido real del elemento (texto, im\u00e1genes, etc.).<\/li>\n\n\n\n
      • Padding (Relleno):<\/strong> El espacio dentro<\/em> del borde, entre el contenido y el borde. Se usa para crear \u00abaire\u00bb alrededor del contenido interno.<\/li>\n\n\n\n
      • Border (Borde):<\/strong> La l\u00ednea que rodea el padding y el contenido. Puedes controlar su estilo, grosor y color.<\/li>\n\n\n\n
      • Margin (Margen):<\/strong> El espacio fuera<\/em> del borde, entre el borde de un elemento y otros elementos cercanos. Se usa para separar elementos entre s\u00ed.<\/li>\n<\/ul>\n\n\n\n
        Con las propiedades margin<\/code> y padding<\/code>, puedes controlar estos espacios para que tus elementos se vean bien organizados.<\/p>\n\n\n\n
        Ejemplo en acci\u00f3n:<\/h3>\n\n\n\n
        Aqu\u00ed ver\u00edas una caja verde con un borde, espacio interno (padding<\/code>) que separa el texto del borde, y espacio externo (margin<\/code>) que la aleja de otros elementos.<\/p>\n\n\n\n
        C\u00f3digo para probar:<\/h3>\n\n\n\n
        HTML:<\/p>\n\n\n\n
        <div class=\"caja\">Caja con margen y padding<\/div><\/code><\/pre>\n\n\n\n
        CSS:<\/p>\n\n\n\n
        .caja {\n  background-color: lightgreen; \/* Fondo verde claro *\/\n  margin: 20px; \/* 20px de espacio externo alrededor *\/\n  padding: 15px; \/* 15px de espacio interno *\/\n  border: 2px solid green; \/* Borde verde de 2px *\/\n}<\/code><\/pre>\n\n\n\n
        5. Fondos y Estilos B\u00e1sicos<\/h2>\n\n\n\n
        \u00bfC\u00f3mo funciona?<\/h3>\n\n\n\n
        Con CSS<\/strong>, puedes hacer que tus elementos destaquen a\u00f1adiendo fondos atractivos. Puedes usar colores s\u00f3lidos, im\u00e1genes o incluso gradientes para darles personalidad. Las propiedades de fondo te permiten controlar c\u00f3mo se ven y se ajustan estos estilos, haciendo que tus p\u00e1ginas sean m\u00e1s interesantes visualmente.<\/p>\n\n\n\n
        Algunas propiedades clave son:<\/p>\n\n\n\n
          \n
        • background-image: url('...')<\/code>: Define la imagen a usar.<\/li>\n\n\n\n
        • background-size: cover;<\/code>: Escala la imagen para que cubra todo el \u00e1rea del elemento, recortando si es necesario para evitar distorsi\u00f3n.<\/li>\n\n\n\n
        • `background-size: contain;`: Escala la imagen para que encaje completamente dentro del elemento, sin recortarse, manteniendo sus proporciones. Puede dejar espacio vac\u00edo.<\/li>\n\n\n\n
        • background-position: center;<\/code>: Centra la imagen dentro del elemento.<\/li>\n<\/ul>\n\n\n\n
          Ejemplo en acci\u00f3n:<\/h3>\n\n\n\n
          Aqu\u00ed ver\u00edas una caja con una imagen de fondo que se ajusta perfectamente y se centra, creando un efecto limpio y profesional.<\/p>\n\n\n\n
          C\u00f3digo para probar:<\/h3>\n\n\n\n
          HTML:<\/p>\n\n\n\n
          <div class=\"fondo\"><\/div><\/code><\/pre>\n\n\n\n
          CSS:<\/p>\n\n\n\n
          .fondo {\n  width: 300px;\n  height: 200px;\n  background-image: url('https:\/\/via.placeholder.com\/300x200\/aaddff\/000000?text=Fondo+Ejemplo');\n  background-size: cover; \/* Cubre todo el \u00e1rea sin distorsionarse *\/\n  background-position: center; \/* Centra la imagen *\/\n  border-radius: 6px; \/* Bordes redondeados *\/\n  margin: 10px auto; \/* Centra la caja horizontalmente *\/\n  border: 1px solid #ccc; \/* Borde sutil *\/\n}<\/code><\/pre>\n\n\n\n
          6. Posicionamiento de Elementos<\/h2>\n\n\n\n
          \u00bfC\u00f3mo funciona?<\/h3>\n\n\n\n
          La propiedad position<\/code> te da el poder de colocar los elementos exactamente donde los quieres en tu p\u00e1gina, incluso fuera del flujo normal del dise\u00f1o. Esto es \u00fatil para crear efectos como men\u00fas fijos, superposiciones o elementos que se mueven con precisi\u00f3n. Los valores principales son:<\/p>\n\n\n\n
            \n
          • static<\/code>: Es el valor por defecto. El elemento sigue el flujo normal del documento (uno tras otro, o seg\u00fan Flexbox\/Grid). Las propiedades top<\/code>, bottom<\/code>, left<\/code>, right<\/code>, y z-index<\/code> no tienen efecto<\/strong>.<\/li>\n\n\n\n
          • relative<\/code>: El elemento se posiciona relativo a su posici\u00f3n original<\/em> en el flujo normal. Puedes usar top<\/code>, bottom<\/code>, left<\/code>, right<\/code> para desplazarlo desde su lugar de origen, pero su espacio original en el layout sigue reservado. Es muy \u00fatil para ser el contenedor de referencia de elementos con position: absolute;<\/code>.<\/li>\n\n\n\n
          • absolute<\/code>: El elemento se posiciona relativo a su contenedor posicionado m\u00e1s cercano<\/em> (un ancestro con position<\/code> no static<\/code>, generalmente relative<\/code>). Se saca del flujo normal del documento, y los elementos a su alrededor se comportan como si no existiera.<\/li>\n\n\n\n
          • fixed<\/code>: El elemento se posiciona relativo a la ventana del navegador (viewport)<\/em> y permanece fijo en ese lugar incluso cuando haces scroll. Tambi\u00e9n se saca del flujo normal.<\/li>\n<\/ul>\n\n\n\n
            Ejemplo en acci\u00f3n:<\/h3>\n\n\n\n
            Aqu\u00ed ver\u00edas una caja gris clara con una caja coral m\u00e1s peque\u00f1a en la esquina superior derecha, posicionada con absolute<\/code> dentro de un contenedor relative<\/code>.<\/p>\n\n\n\n
            C\u00f3digo para probar:<\/h3>\n\n\n\n
            HTML:<\/p>\n\n\n\n
            <div class=\"contenedor\">\n  <div class=\"absoluto\">Posici\u00f3n absoluta<\/div>\n  Este es el contenido del contenedor relativo.\n<\/div><\/code><\/pre>\n\n\n\n
            CSS:<\/p>\n\n\n\n
            .contenedor {\n  position: relative; \/* Contenedor de referencia para el elemento absoluto *\/\n  width: 300px;\n  height: 150px;\n  background: #eee; \/* Fondo gris claro *\/\n  margin: 15px auto; \/* Centra horizontalmente *\/\n  border-radius: 6px; \/* Bordes redondeados *\/\n  border: 1px solid #ccc; \/* Borde sutil *\/\n  overflow: hidden; \/* Oculta contenido que se desborde *\/\n}\n\n.absoluto {\n  position: absolute; \/* Se posiciona respecto al contenedor relativo *\/\n  top: 10px; \/* 10px desde el borde superior *\/\n  right: 10px; \/* 10px desde el borde derecho *\/\n  background: coral; \/* Fondo coral *\/\n  padding: 5px; \/* Espacio interno *\/\n  border-radius: 4px; \/* Bordes redondeados *\/\n  color: white; \/* Texto blanco *\/\n  font-weight: bold; \/* Texto en negrita *\/\n  font-size: 0.9em; \/* Tama\u00f1o de fuente ligeramente menor *\/\n}<\/code><\/pre>\n\n\n\n
            7. Layouts Modernos con Flexbox<\/h2>\n\n\n\n
            \u00bfC\u00f3mo funciona?<\/h3>\n\n\n\n
            Olv\u00eddate de los trucos complicados del pasado: Flexbox<\/strong> (Flexible Box Layout) hace que alinear y distribuir elementos sea s\u00faper sencillo. Es un sistema de dise\u00f1o unidimensional, perfecto para organizar elementos en filas o columnas, como barras de navegaci\u00f3n, tarjetas o formularios. Con Flexbox<\/strong>, puedes controlar c\u00f3mo se distribuye el espacio y alinear los elementos con facilidad.<\/p>\n\n\n\n
            Para empezar, aplica display: flex<\/code> al contenedor padre. Luego, las propiedades del contenedor (como justify-content<\/code> o align-items<\/code>) afectan a sus elementos hijos directos, llamados \u00edtems flex.<\/p>\n\n\n\n
            Ejemplo en acci\u00f3n:<\/h3>\n\n\n\n
            Aqu\u00ed ver\u00edas una caja gris clara con tres cajas grises m\u00e1s oscuras dentro, espaciadas uniformemente y centradas verticalmente, ajust\u00e1ndose si cambias el tama\u00f1o de la ventana.<\/p>\n\n\n\n
            C\u00f3digo para probar:<\/h3>\n\n\n\n
            HTML:<\/p>\n\n\n\n
            <div class=\"flex-container\">\n  <div>Item 1<\/div>\n  <div>Item 2<\/div>\n  <div>Item 3<\/div>\n<\/div><\/code><\/pre>\n\n\n\n
            CSS:<\/p>\n\n\n\n
            .flex-container {\n  display: flex; \/* Convierte el contenedor en un contenedor flex *\/\n  justify-content: space-around; \/* Distribuye el espacio horizontalmente alrededor de los \u00edtems *\/\n  align-items: center; \/* Centra los \u00edtems verticalmente en el cross-axis *\/\n  background-color: #ddd;\n  padding: 10px;\n  border-radius: 6px;\n  margin: 15px 0;\n  flex-wrap: wrap; \/* Permite que los \u00edtems salten de l\u00ednea si no caben *\/\n}\n.flex-container > div {\n  background-color: #aaa;\n  padding: 15px;\n  border-radius: 4px;\n  color: white;\n  font-weight: bold;\n  margin: 5px; \/* Espacio entre \u00edtems *\/\n  min-width: 80px; \/* Evita que se aplasten demasiado *\/\n  text-align: center;\n}<\/code><\/pre>\n\n\n\n
            8. Layouts Avanzados con CSS Grid<\/h2>\n\n\n\n
            \u00bfC\u00f3mo funciona?<\/h3>\n\n\n\n
            Si Flexbox <\/strong>es ideal para filas o columnas, CSS Grid<\/strong> es tu herramienta para dise\u00f1os bidimensionales, donde controlas filas y columnas al mismo timepo. Grid <\/strong>es perfecto para crear estructuras completas de una p\u00e1gina, como combinar una cabecera, barra lateral, contenido principal y pie de p\u00e1gina en una cuadr\u00edcula limpia.<\/p>\n\n\n\n
            Para usar Grid<\/strong>, estableces display: grid;<\/code> en el contenedor padre. Luego defines las columnas (grid-template-columns<\/code>) y filas (grid-template-rows<\/code>) de la cuadr\u00edcula en el contenedor grid<\/strong>. Los elementos hijos directos se convierten en \u00edtems grid<\/strong> y se colocan autom\u00e1ticamente en la cuadr\u00edcula o puedes controlarlo manualmente.<\/p>\n\n\n\n
            Ejemplo en acci\u00f3n:<\/h3>\n\n\n\n
            Aqu\u00ed ver\u00edas una cuadr\u00edcula con celdas organizadas en filas y columnas, con elementos numerados que se ajustan din\u00e1micamente al tama\u00f1o de la pantalla.<\/p>\n\n\n\n
            C\u00f3digo para probar:<\/h3>\n\n\n\n
            HTML:<\/p>\n\n\n\n
            <div class=\"grid-container\">\n  <div>1<\/div>\n  <div>2<\/div>\n  <div>3<\/div>\n  <div>4<\/div>\n  <div>5<\/div>\n  <div>6<\/div>\n<\/div><\/code><\/pre>\n\n\n\n
            CSS:<\/p>\n\n\n\n
            .grid-container {\n  display: grid; \/* Activa el modelo Grid *\/\n  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); \/* Columnas din\u00e1micas de al menos 100px *\/\n  gap: 10px; \/* Espacio entre celdas *\/\n  margin: 15px 0; \/* Margen externo *\/\n}\n\n.grid-container > div {\n  background-color: #8bc34a; \/* Fondo verde claro *\/\n  padding: 20px; \/* Espacio interno *\/\n  text-align: center; \/* Texto centrado *\/\n  border-radius: 6px; \/* Bordes redondeados *\/\n  color: white; \/* Texto blanco *\/\n  font-weight: bold; \/* Texto en negrita *\/\n}<\/code><\/pre>\n\n\n\n
            9. Pseudoclases y Pseudoelementos<\/h2>\n\n\n\n
            \u00bfC\u00f3mo funcionan?<\/h3>\n\n\n\n
            Las Pseudoclases y Pseudoelementos te permiten aplicar estilos m\u00e1s all\u00e1 de lo que puedes seleccionar directamente con selectores de etiqueta, clase<\/code> o ID<\/code>.<\/p>\n\n\n\n
              \n
            • Pseudoclases:<\/strong> (Empiezan con :<\/code> un solo dos puntos) Seleccionan elementos bas\u00e1ndose en un estado<\/strong> (ej: cuando un enlace ha sido visitado :visited<\/code>, cuando se pasa el mouse por encima :hover<\/code>, cuando un input est\u00e1 enfocado :focus<\/code>, o bas\u00e1ndose en su posici\u00f3n<\/strong> en la estructura (ej: el primer hijo :first-child<\/code>).<\/li>\n\n\n\n
            • Pseudoelementos:<\/strong> (Empiezan con ::<\/code> doble dos puntos) Permiten seleccionar y dar estilo a partes de un elemento<\/strong> que no existen como elementos HTML <\/strong>propios, o insertar contenido decorativo<\/strong>. Los m\u00e1s comunes son ::before<\/code> (inserta contenido antes del elemento) y ::after<\/code> (inserta contenido despu\u00e9s).<\/li>\n<\/ul>\n\n\n\n
              Ejemplo en acci\u00f3n:<\/h3>\n\n\n\n
              Aqu\u00ed ver\u00edas un enlace con un emoicon \u00ab\ud83d\udc49\u00bb antes del texto, que cambia de color y se subraya al pasar el mouse, mostrando el efecto din\u00e1mico.<\/p>\n\n\n\n
              C\u00f3digo para probar:<\/h3>\n\n\n\n
              HTML:<\/p>\n\n\n\n
              <a href=\"#\" class=\"link-example\">Enlace con pseudoclase (:hover) y pseudoelemento (::before)<\/a><\/code><\/pre>\n\n\n\n
              CSS:<\/p>\n\n\n\n
              .link-example {\n  text-decoration: none; \/* Quita el subrayado por defecto *\/\n  color: #3498db; \/* Azul inicial *\/\n  font-weight: bold; \/* Texto en negrita *\/\n  transition: color 0.3s ease; \/* Cambio suave de color *\/\n}\n\n.link-example:hover {\n  color: red; \/* Cambia a rojo al pasar el mouse *\/\n  text-decoration: underline; \/* A\u00f1ade subrayado *\/\n}\n\n.link-example::before {\n  content: \"\ud83d\udc49 \"; \/* A\u00f1ade una flecha antes del texto *\/\n  font-size: 0.9em; \/* Ligeramente m\u00e1s peque\u00f1o *\/\n}<\/code><\/pre>\n\n\n\n
              10. Animaciones y Transiciones<\/h2>\n\n\n\n
              \u00bfC\u00f3mo funcionan?<\/h3>\n\n\n\n
              A\u00f1adir movimiento a tus p\u00e1ginas web puede hacerlas m\u00e1s din\u00e1micas y atractivas. CSS <\/strong>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.<\/p>\n\n\n\n