CSS

Pordavid

1. Introducción: ¿Qué es CSS y en qué se diferencia CSS3?

«Si HTML es el esqueleto de una web, CSS es la piel, el estilo y la personalidad. CSS3 no fue una versión única, sino el inicio de un sistema de ‘módulos’ que permitió actualizar partes del lenguaje de forma independiente. Hoy en día, CSS permite crear interfaces complejas, animaciones de cine y diseños adaptables sin necesidad de recurrir a imágenes pesadas o código JavaScript complejo.»

2. Conceptos Fundamentales y Atributos

Para que tus lectores entiendan cómo funciona, debes detallar estos tres pilares:

A. Selectores (¿A quién le damos estilo?)

  • Selector de Etiqueta: Apunta a elementos HTML (ej: p { color: red; }).
  • Clases (.nombre): Reutilizables en varios elementos. Atributo HTML: class="nombre".
  • IDs (#nombre): Únicos para un solo elemento. Atributo HTML: id="nombre".
  • Pseudo-clases: Estilos según el estado (ej: :hover al pasar el ratón, :focus al clicar).

B. El Modelo de Caja (Box Model)

Es el concepto más importante. Todo elemento es una caja con:

  • width / height: Dimensiones del contenido.
  • padding: Espacio interno entre el contenido y el borde.
  • border: La línea que rodea la caja.
  • margin: Espacio externo que separa esta caja de otras.

C. Propiedades Modernas (CSS3 y posteriores)

  • Flexbox (display: flex): Para alinear elementos en una sola dimensión (filas o columnas).
  • Grid (display: grid): Para crear diseños de rejilla complejos en dos dimensiones.
  • Variables CSS (--color-principal): Permiten reutilizar valores en todo el documento.
  • Media Queries (@media): La base del diseño responsive (adaptar la web a móviles).

3. Ejemplo de Código Completo (Demo CSS)

Este código utiliza técnicas modernas de 2026 para que el ejemplo sea profesional:

/* 1. Variables Globales */
:root {
    --color-fondo: #f4f4f9;
    --color-primario: #3498db;
    --color-texto: #333;
    --transicion: all 0.3s ease;
}

/* 2. Estilos de Base */
body {
    background-color: var(--color-fondo);
    font-family: 'Segoe UI', Tahoma, sans-serif;
    color: var(--color-texto);
    margin: 0;
    padding: 20px;
}

/* 3. El Modelo de Caja y Selectores */
.tarjeta {
    background: white;
    border: 2px solid var(--color-primario);
    border-radius: 12px; /* CSS3: Bordes redondeados */
    padding: 20px;
    margin: 20px auto;
    max-width: 400px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* CSS3: Sombras */
    transition: var(--transicion);
}

/* 4. Pseudo-clase Hover */
.tarjeta:hover {
    transform: translateY(-10px); /* CSS3: Transformaciones */
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

/* 5. Flexbox para el botón */
.boton-contenedor {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

.boton-accion {
    background-color: var(--color-primario);
    color: white;
    padding: 10px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

/* 6. Diseño Responsivo (Media Query) */
@media (max-width: 600px) {
    .tarjeta {
        max-width: 100%;
        padding: 10px;
    }
}

4. Resumen: ¿Qué cambió con CSS3?

CaracterísticaCSS (Clásico)CSS3 / Actual (2026)
BordesSolo rectosRedondeados (border-radius)
ColoresBásicos (Hex, RGB)Transparencias (RGBA) y Degradados
LayoutFloats y tablas (difícil)Flexbox y Grid (fácil)
AnimaciónSolo con JavaScript/FlashAnimaciones nativas (@keyframes)
FuentesSolo fuentes del sistemaFuentes personalizadas (@font-face)

Para obtener información técnica actualizada sobre los últimos módulos de CSS lanzados este año, puedes consultar la Referencia de CSS en MDN Web Docs o el validador oficial del W3C CSS Validator.

Aquí tienes un ejemplo profesional de un menú de navegación «Hamburguesa» totalmente responsive. Este diseño es el estándar en 2026: limpio, sin dependencias de JavaScript para lo básico y optimizado para SEO y accesibilidad.

1. Código HTML (Estructura Semántica)

Utilizamos la etiqueta <nav> y un checkbox oculto para controlar el menú en móviles sin necesidad de programar scripts complejos.

<nav class="navbar">
    <!-- Logotipo -->
    <div class="logo">MiProyecto<span>2026</span></div>

    <!-- Checkbox oculto para el menú móvil (Hack CSS) -->
    <input type="checkbox" id="menu-toggle" class="menu-check">
    
    <!-- Icono de hamburguesa (visible solo en móviles) -->
    <label for="menu-toggle" class="hamburger">
        <span></span>
        <span></span>
        <span></span>
    </label>

    <!-- Enlaces de navegación -->
    <ul class="nav-links">
        <li><a href="#" class="active">Inicio</a></li>
        <li><a href="#">Servicios</a></li>
        <li><a href="#">Proyectos</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#" class="btn-contacto">Contacto</a></li>
    </ul>
</nav>

2. Código CSS (Estilos y Responsividad)

Este código define cómo se ve el menú en ordenadores y cómo se transforma automáticamente al llegar a pantallas pequeñas.

/* Variables de diseño */
:root {
    --color-fondo: #2c3e50;
    --color-acento: #3498db;
    --color-texto: #ffffff;
    --transicion: all 0.4s ease;
}

/* Estilos base del Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-fondo);
    padding: 1rem 5%;
    height: 70px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-texto);
    cursor: pointer;
}

.logo span {
    color: var(--color-acento);
}

/* Lista de enlaces (Escritorio) */
.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-links a {
    text-decoration: none;
    color: var(--color-texto);
    font-weight: 500;
    transition: var(--transicion);
}

.nav-links a:hover, .nav-links a.active {
    color: var(--color-acento);
}

/* Botón especial */
.btn-contacto {
    background-color: var(--color-acento);
    padding: 8px 20px;
    border-radius: 50px;
    color: white !important;
}

/* Ocultar el checkbox y el icono hamburguesa por defecto */
.menu-check, .hamburger {
    display: none;
}

/* --- MEDIA QUERY (Diseño Móvil) --- */
@media (max-width: 768px) {
    .hamburger {
        display: block;
        cursor: pointer;
    }

    .hamburger span {
        display: block;
        width: 25px;
        height: 3px;
        background: var(--color-texto);
        margin: 5px;
        transition: var(--transicion);
    }

    .nav-links {
        position: fixed;
        top: 70px;
        right: -100%; /* Oculto a la derecha */
        background-color: #34495e;
        width: 100%;
        height: calc(100vh - 70px);
        flex-direction: column;
        align-items: center;
        padding-top: 50px;
        transition: var(--transicion);
    }

    /* Mostrar menú cuando el checkbox esté marcado */
    .menu-check:checked ~ .nav-links {
        right: 0;
    }

    /* Animación simple del icono hamburguesa */
    .menu-check:checked ~ .hamburger span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
    .menu-check:checked ~ .hamburger span:nth-child(2) { opacity: 0; }
    .menu-check:checked ~ .hamburger span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }
}

¿Cómo funciona este ejemplo?

  1. Flexbox: Usamos display: flex para alinear el logo a la izquierda y los enlaces a la derecha de forma sencilla.
  2. Checkbox Hack: El truco de la línea .menu-check:checked ~ .nav-links permite que, al hacer clic en el icono (que es un <label> vinculado al input), el menú cambie su posición de right: -100% a right: 0.
  3. Transiciones: La propiedad transition hace que el menú se deslice suavemente en lugar de aparecer de golpe.
  4. Sticky: El menú se queda pegado arriba mientras el usuario hace scroll gracias a position: sticky.

Puedes probar este código directamente en el Editor de HTML en línea de W3Schools para ver cómo cambia de tamaño al reducir la ventana.

Aquí tienes la continuación para tu artículo, integrando un diseño visualmente impactante para el menú y la guía completa sobre Tablas en HTML5, que es un contenido esencial para cualquier curso de desarrollo web.

1. Upgrade Visual: Menú con Degradado (Gradients)

Para darle un toque moderno (estilo 2026), puedes sustituir el color sólido del fondo del menú en tu CSS por un degradado lineal. Esto mejora mucho la estética del artículo:

/* Sustituye la propiedad background-color en .navbar */
.navbar {
    background: linear-gradient(135deg, #2c3e50 0%, #000000 100%);
    border-bottom: 2px solid var(--color-acento);
    /* ... resto de propiedades ... */
}

/* Efecto hover con brillo */
.nav-links a:hover {
    text-shadow: 0 0 10px var(--color-acento);
    color: #fff;
}

2. Tablas en HTML5: Estructura y Datos

Las tablas hoy en día no se usan para diseñar la estructura de la web (para eso usamos Flexbox/Grid), sino exclusivamente para mostrar datos tabulares.

Etiquetas de la Tabla:

  • <table>: El contenedor principal.
  • <caption>: El título o descripción de la tabla (importante para accesibilidad).
  • <thead>: Agrupa el contenido de la cabecera.
  • <tbody>: Agrupa el cuerpo de los datos.
  • <tfoot>: Agrupa el pie de la tabla (sumas, totales).
  • <tr>: Define una fila (Table Row).
  • <th>: Define una celda de encabezado (Table Header). Suele ir en negrita y centrada por defecto.
  • <td>: Define una celda de datos (Table Data).

Atributos Clave:

  • colspan: Permite que una celda se extienda horizontalmente sobre varias columnas.
  • rowspan: Permite que una celda se extienda verticalmente sobre varias filas.
  • scope: Atributo en <th> (valores: col o row) que indica si la cabecera es para una columna o fila, vital para lectores de pantalla.

3. Ejemplo de Tabla Profesional (Demo)

Este ejemplo combina la estructura semántica completa con estilos CSS modernos:

HTML:

<section id="precios">
    <h2>Comparativa de Planes 2026</h2>
    <table class="tabla-estilizada">
        <caption>Tabla comparativa de servicios mensuales</caption>
        <thead>
            <tr>
                <th scope="col">Plan</th>
                <th scope="col">Almacenamiento</th>
                <th scope="col">Precio</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Básico</td>
                <td>20GB</td>
                <td>9.99€</td>
            </tr>
            <tr>
                <td>Premium</td>
                <td>100GB</td>
                <td>19.99€</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2">Soporte 24/7 incluido en todos los planes</td>
                <td>✔</td>
            </tr>
        </tfoot>
    </table>
</section>

.tabla-estilizada {
    width: 100%;
    border-collapse: collapse; /* Quita los espacios entre bordes */
    margin: 25px 0;
    font-size: 0.9em;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.tabla-estilizada thead tr {
    background-color: #3498db;
    color: #ffffff;
    text-align: left;
}

.tabla-estilizada th, .tabla-estilizada td {
    padding: 12px 15px;
    border-bottom: 1px solid #dddddd;
}

/* Estilo de filas alternas (Zebra) */
.tabla-estilizada tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

/* Efecto al pasar el ratón por la fila */
.tabla-estilizada tbody tr:hover {
    background-color: #f1f1f1;
    cursor: pointer;
}

.tabla-estilizada {
    width: 100%;
    border-collapse: collapse; /* Quita los espacios entre bordes */
    margin: 25px 0;
    font-size: 0.9em;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.tabla-estilizada thead tr {
    background-color: #3498db;
    color: #ffffff;
    text-align: left;
}

.tabla-estilizada th, .tabla-estilizada td {
    padding: 12px 15px;
    border-bottom: 1px solid #dddddd;
}

/* Estilo de filas alternas (Zebra) */
.tabla-estilizada tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

/* Efecto al pasar el ratón por la fila */
.tabla-estilizada tbody tr:hover {
    background-color: #f1f1f1;
    cursor: pointer;
}

CSS para tabla:

.tabla-estilizada {
    width: 100%;
    border-collapse: collapse; /* Quita los espacios entre bordes */
    margin: 25px 0;
    font-size: 0.9em;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.tabla-estilizada thead tr {
    background-color: #3498db;
    color: #ffffff;
    text-align: left;
}

.tabla-estilizada th, .tabla-estilizada td {
    padding: 12px 15px;
    border-bottom: 1px solid #dddddd;
}

/* Estilo de filas alternas (Zebra) */
.tabla-estilizada tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

/* Efecto al pasar el ratón por la fila */
.tabla-estilizada tbody tr:hover {
    background-color: #f1f1f1;
    cursor: pointer;
}

Grid y Flexbox

Es un error común confundir Flexbox con Grid, pero para tu artículo es vital diferenciarlos: mientras Flexbox es ideal para alinear elementos en una sola dirección (como el menú que hicimos), CSS Grid Layout es un sistema de diseño bidimensional diseñado para crear estructuras de páginas completas (filas y columnas al mismo tiempo).

Aquí tienes la explicación técnica y un ejemplo práctico para tu web:

1. Conceptos Clave de CSS Grid

Para explicarlo en tu artículo, usa estos términos técnicos:

  • Grid Container: El elemento padre que tiene display: grid.
  • Grid Tracks: El espacio entre dos líneas de la cuadrícula (básicamente las filas o columnas).
  • Grid Cell: El «cuadrado» individual (la intersección de una fila y una columna).
  • Gap: El espacio o callejón entre celdas (antes llamado grid-gap).
  • Fr (Fractional Unit): Una unidad nueva en CSS que representa una fracción del espacio libre en el contenedor.

2. Atributos Principales del Contenedor

  • grid-template-columns: Define cuántas columnas hay y qué ancho tienen.
  • grid-template-rows: Define el alto de las filas.
  • gap: Define la separación entre elementos (ej: gap: 20px;).
  • grid-template-areas: Permite poner nombre a secciones para crear layouts visuales muy potentes.

3. Ejemplo Práctico: Layout de una Página (Demo Grid)

Este código crea una estructura clásica de página web (Cabecera, Sidebar, Contenido y Pie) de forma ultra sencilla.

HTML:

<div class="contenedor-grid">
    <header class="header">Cabecera</header>
    <nav class="sidebar">Navegación Lateral</nav>
    <main class="contenido">Contenido Principal</main>
    <footer class="footer">Pie de página</footer>
</div>

CSS (La magia de Grid):

.contenedor-grid {
    display: grid;
    /* Definimos 3 columnas: la lateral de 200px y el resto se reparte */
    grid-template-columns: 200px 1fr 1fr;
    /* Definimos las filas: alto automático para cabecera y pie, 400px para el medio */
    grid-template-rows: auto 400px auto;
    gap: 10px;
    padding: 10px;
}

/* Posicionamiento de los elementos */
.header {
    grid-column: 1 / 4; /* Ocupa desde la línea 1 hasta la 4 (toda la fila) */
    background-color: #3498db;
    color: white;
    padding: 20px;
}

.sidebar {
    grid-row: 2 / 3; /* Se queda en la segunda fila */
    background-color: #ecf0f1;
    padding: 20px;
}

.contenido {
    grid-column: 2 / 4; /* Ocupa las dos últimas columnas */
    background-color: #ffffff;
    border: 1px solid #ddd;
    padding: 20px;
}

.footer {
    grid-column: 1 / 4;
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 10px;
}

4. ¿Cuándo usar Grid vs Flexbox? (Para tu conclusión)

Es la pregunta que todos los lectores se harán. Una buena regla para tu artículo sería:

  1. Usa Flexbox para componentes pequeños y alineaciones en una dirección (botones, menús horizontales, centrado de iconos).
  2. Usa Grid para el esqueleto global de la web o galerías de imágenes complejas donde necesitas control total de filas y columnas.

Bootstrap

En el ecosistema del desarrollo web de 2026, Bootstrap sigue siendo el framework de CSS más popular del mundo. Para tu artículo, es vital definirlo como la herramienta que permite pasar de «escribir código desde cero» a «ensamblar piezas prefabricadas».

¿Qué es Bootstrap?

Bootstrap es una biblioteca de código abierto (originalmente creada por Twitter) que contiene miles de líneas de CSS y JavaScript ya escritos. Su objetivo es permitir a los desarrolladores crear interfaces responsive (móviles primero) de forma extremadamente rápida y consistente. 

¿Qué añade exactamente al CSS? (Lo que facilita el trabajo)

Bootstrap no inventa un nuevo lenguaje, sino que encapsula el CSS complejo en Clases de Utilidad. Aquí te detallo lo que aporta:

1. El Sistema de Rejilla (Grid System) basado en Flexbox 

En lugar de calcular porcentajes o usar display: grid manualmente, Bootstrap divide la pantalla en 12 columnas imaginarias. 

  • Facilidad: Solo añades la clase col-6 a un elemento y Bootstrap se encarga de que ocupe exactamente la mitad de la pantalla, gestionando los márgenes automáticamente. 

2. Componentes UI Listos para Usar

Bootstrap incluye una librería de elementos diseñados profesionalmente que solo requieren copiar y pegar el HTML:

  • Botones: Clase btn btn-primary.
  • Alertas: Clase alert alert-danger.
  • Tarjetas (Cards): Estructuras para mostrar productos o noticias.
  • Modales: Ventanas emergentes que ya incluyen el comportamiento de abrir y cerrar. 

3. Clases de Utilidad (Utility First)

Facilita cambios rápidos sin tocar tu archivo .css. Ejemplos:

  • Márgenes: mt-3 (margin-top de nivel 3).
  • Colores de texto: text-success (verde para éxito).
  • Alineación: d-flex justify-content-center (centrado instantáneo). 

4. Normalización (Reboot)

Cada navegador (Chrome, Safari, Firefox) interpreta los estilos base de forma distinta. Bootstrap añade un archivo llamado Reboot que «limpia» estas diferencias para que tu web se vea igual en todos los dispositivos. 

Ejemplo Comparativo: Crear un Botón Moderno

Sin Bootstrap (CSS puro):

.mi-boton {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s;
}
.mi-boton:hover { background-color: #0056b3; }

Con Bootstrap:

<!-- No necesitas escribir nada de CSS, solo usar las clases -->
<button class="btn btn-primary">Enviar</button>

Cómo incluirlo en tu proyecto

Para que tus lectores puedan probarlo en tu artículo, deben añadir este enlace en el <head> de su HTML:

<!-- CSS de Bootstrap v5.3+ (Versión estable en 2026) -->
<link href="cdn.jsdelivr.net" rel="stylesheet">

Ventajas y Desventajas (Para tu conclusión)

  • Pro: Velocidad de desarrollo increíble y diseño profesional por defecto.
  • Con: Muchas webs terminan pareciéndose entre sí (el «look Bootstrap») y el archivo base puede ser pesado si no usas todos sus componentes. 

Para profundizar en la documentación oficial, puedes dirigir a tus lectores a GetBootstrap.com. 

aquí tienes el desglose técnico y funcional de Bootstrap actualizado a los estándares de 2026. Bootstrap se basa en un sistema de «Utility-First» (utilidades primero) y componentes robustos.

1. El Sistema de Rejilla (The Grid System)

Es el corazón de Bootstrap. Se basa en Flexbox y divide la pantalla en 12 columnas.

  • container: El contenedor principal que centra el contenido y da márgenes laterales.
  • row: Una fila que envuelve las columnas (elimina el padding lateral del contenedor).
  • col-[breakpoint]-[número]: Define cuántas de las 12 columnas ocupa un elemento.
    • Breakpoints: sm (móvil), md (tablet), lg (escritorio), xl, xxl.
    • Ejemplo: col-md-6 ocupa media pantalla en tablets y superior.

2. Componentes de Interfaz (UI Components)

Son bloques de código HTML/CSS listos para copiar y usar.

  • Navbar: Menús de navegación complejos con soporte para logos, enlaces, desplegables y buscador, totalmente responsive.
  • Buttons (btn): Estilos predefinidos para acciones.
    • Variantes: btn-primary (azul), btn-secondary (gris), btn-success (verde), btn-danger (rojo), btn-outline-* (solo borde).
  • Cards (card): Contenedores flexibles para contenido con opciones para cabeceras, pies, imágenes y botones.
  • Modals: Ventanas emergentes (pop-ups) interactivas para notificaciones o formularios.
  • Alerts: Mensajes de retroalimentación (ej. alert-warning para avisos).
  • Forms: Clases como form-control (inputs) y form-select que dan un aspecto moderno y uniforme a los formularios.
  • Carousels: Deslizadores de imágenes con controles de navegación.

3. Utilidades (Utilities)

Las utilidades permiten modificar el diseño directamente en el HTML sin escribir una sola línea de CSS.

A. Espaciado (Spacing)

Usa el formato {propiedad}{lado}-{tamaño} (del 0 al 5).

  • m- (margin) y p- (padding).
  • Lados: t (top), b (bottom), s (start/izquierda), e (end/derecha), x (izquierda y derecha), y (arriba y abajo).
  • Ejemplo: mt-5 aplica un margen superior grande; px-2 un padding lateral pequeño.

B. Tipografía

  • h1 a h6: Clases para dar apariencia de título a cualquier texto.
  • display-1 a display-6: Títulos mucho más grandes y estilizados.
  • text-center, text-end, text-start: Alineación de texto.
  • fw-bold: Texto en negrita.

C. Colores y Fondos

  • Texto: text-primary, text-white, text-muted (gris suave).
  • Fondo: bg-dark, bg-light, bg-gradient (añade un sutil degradado).

D. Flexbox (Layout instantáneo)

Bootstrap expone todo el poder de Flexbox mediante clases:

  • d-flex: Convierte el contenedor en flexible.
  • justify-content-between: Separa los elementos al máximo.
  • align-items-center: Centra los elementos verticalmente.

4. Ejemplo Práctico Integrado

Aquí ves cómo se combinan la rejilla, un componente (card) y utilidades:

html

<div class="container my-5">
    <div class="row">
        <!-- Columna que ocupa 12 espacios en móvil y 4 en escritorio -->
        <div class="col-12 col-md-4">
            <div class="card shadow"> <!-- Componente Card con utilidad de sombra -->
                <img src="imagen.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title fw-bold">Producto Pro</h5> <!-- Utilidad negrita -->
                    <p class="card-text text-muted">Descripción breve usando utilidades de color.</p>
                    <a href="#" class="btn btn-primary w-100">Comprar</a> <!-- Botón ancho completo -->
                </div>
            </div>
        </div>
    </div>
</div>

Usa el código con precaución.

Resumen para tu artículo

Para cerrar esta sección, puedes decir que Bootstrap facilita el CSS porque:

  1. Elimina la necesidad de Media Queries manuales gracias a su rejilla.
  2. Garantiza la consistencia visual en toda la web.
  3. Acelera el prototipado, permitiendo maquetar una página funcional en minutos.

Puedes consultar la lista completa de utilidades en la Documentación Oficial de Bootstrap.

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *