Manual de CSS - Guía Interactiva

🎯 Consejos Esenciales para Iniciarse ▼

💡 Aprende CSS correctamente! Estos consejos te ayudarán a escribir estilos eficientes y mantenibles desde el inicio.

🔍 1. Entiende la cascada y especificidad

CSS significa "Cascading Style Sheets". Los estilos se aplican en cascada, y la especificidad determina qué regla prevalece.

                /* Especificidad de menor a mayor */

                /* Elemento: especificidad = 1 */
                p {
                color:
                blue; }

                /* Clase: especificidad = 10 */
                .texto {
                color:
                green; }

                /* ID: especificidad = 100 */
                #principal {
                color:
                red; }

                /* Inline styles: especificidad = 1000 */
                /* style="color: purple" */
              

📁 2. Organiza tu código CSS

Mantén tu código ordenado agrupando estilos relacionados.

                /* ===== RESET Y GLOBALES ===== */
                * {
                margin:
                0;
                padding:
                0;
                box-sizing:
                border-box; }

                /* ===== TIPOGRAFÍA ===== */
                body {
                font-family:
                'Arial', sans-serif;
                font-size:
                16px; }

                /* ===== LAYOUT ===== */
                .container {
                max-width:
                1200px;
                margin:
                0 auto; }

                /* ===== COMPONENTES ===== */
                .button {
                padding:
                10px 20px;
                border-radius:
                5px; }
              

📝 3. Usa nombres de clases descriptivos

Los nombres deben describir el propósito, no la apariencia.

✅ Buenos nombres:

                  .header-navigation { }
                  .product-card { }
                  .error-message { }
                  .user-profile-avatar { }
                

❌ Malos nombres:

                  .rojo { }
                  .grande { }
                  .div1 { }
                  .cosa { }
                

🎨 4. Evita !important

Usa !important solo como último recurso. Rompe la cascada natural de CSS.

⚠️ Consejo: Si necesitas !important, probablemente hay un problema de especificidad que deberías resolver de otra manera.

📱 5. Piensa en responsive desde el inicio

Diseña con el enfoque "mobile-first" usando media queries para pantallas más grandes.

                /* Estilos base (móvil) */
                .container {
                padding:
                10px; }

                /* Tablet y superiores */
                @media (min-width: 768px) {
                .container {
                padding:
                20px; } }

                /* Desktop */
                @media (min-width: 1024px) {
                .container {
                padding:
                40px; } }
              

🔧 6. Utiliza variables CSS (Custom Properties)

Las variables hacen tu código más mantenible y fácil de actualizar.

                :root {
                --color-primary:
                #667eea;
                --color-secondary:
                #764ba2;
                --spacing-unit:
                8px;
                --font-main:
                'Arial', sans-serif; }

                .button {
                background:
                var(--color-primary);
                padding:
                var(--spacing-unit);
                font-family:
                var(--font-main); }
              

🎯 7. Aprende las herramientas de desarrollo

Las DevTools del navegador (F12) son esenciales para depurar CSS.

🔑 Atajos útiles:

F12 o Ctrl+Shift+I: Abrir DevTools
Ctrl+Shift+C: Modo inspector (seleccionar elemento en la página)
Editar estilos en tiempo real para experimentar

📂 Formas de Incluir CSS ▼

1️⃣ CSS Externo (Recomendado)

El método más profesional y mantenible. Crea un archivo .css separado.

                <!-- En el HTML -->
                <head>
                <link
                rel="stylesheet"
                href="estilos.css">
                </head>
              

                /* En estilos.css */
                body {
                background-color:
                #f0f0f0;
                font-family:
                Arial, sans-serif; }

                .container {
                max-width:
                1200px;
                margin:
                0 auto; }
              

✅ Ventajas:

Código limpio y organizado
Reutilizable en múltiples páginas
Mejor rendimiento (se cachea)
Fácil de mantener

2️⃣ CSS Interno

Estilos dentro de la etiqueta <style> en el HTML.

                <head>
                <style>
                body {
                background-color:
                #f0f0f0; }

                .titulo {
                color:
                #333;
                font-size:
                24px; }
                </style>
                </head>
              

⚠️ Úsalo solo para: Páginas únicas o estilos específicos de una sola página.

3️⃣ CSS en Línea (Inline)

Estilos directamente en el atributo style del elemento HTML.

                <p
                style="color: red; font-size: 18px; margin: 10px;">
                Texto con estilos en línea
                </p>
              

❌ Evítalo porque:

Difícil de mantener
No se puede reutilizar
Mezcla contenido con presentación
Dificulta el responsive design

4️⃣ Import en CSS

Importar un CSS desde otro archivo CSS.

                /* En tu archivo CSS principal */
                @import
                url('reset.css');
                @import
                url('typography.css');
                @import
                url('layout.css');

                /* Tus estilos propios */
                body {
                background:
                white; }
              

💡 Mejor práctica: Usa <link> en el HTML en lugar de @import para mejor rendimiento.

🎯 Selectores CSS ▼

🔵 Selectores Básicos

Selector de Elemento

Selecciona todos los elementos del tipo especificado.

Selector de Clase

Selecciona elementos con la clase especificada.

                    .destacado {
                    font-weight:
                    bold; }
                  

Selector de ID

Selecciona el elemento con el ID especificado.

                    #header {
                    background:
                    navy; }
                  

Selector Universal

Selecciona todos los elementos.

🔗 Selectores Combinadores

                /* Selector descendiente (espacio) */
                div p {
                color:
                red; }

                /* Hijo directo (>) */
                div > p {
                color:
                blue; }

                /* Hermano adyacente (+) */
                h2 + p {
                margin-top:
                0; }

                /* Hermanos generales (~) */
                h2 ~ p {
                color:
                gray; }
              

🎭 Pseudo-clases

                /* Estados de enlace */
                a:link {
                color:
                blue; }
                a:visited {
                color:
                purple; }
                a:hover {
                color:
                red; }
                a:active {
                color:
                orange; }

                /* Pseudo-clases estructurales */
                li:first-child {
                font-weight:
                bold; }
                li:last-child {
                border-bottom:
                none; }
                li:nth-child(odd) {
                background:
                #f0f0f0; }
                li:nth-child(3) {
                color:
                red; }

                /* Otros útiles */
                input:focus {
                border-color:
                blue; }
                input:disabled {
                opacity:
                0.5; }
                p:not(.destacado) {
                color:
                gray; }
              

✨ Pseudo-elementos

                /* Primera letra */
                p::first-letter {
                font-size:
                2em;
                font-weight:
                bold; }

                /* Primera línea */
                p::first-line {
                color:
                blue; }

                /* Antes y después */
                .quote::before {
                content:
                '"';
                font-size:
                2em; }

                .quote::after {
                content:
                '"';
                font-size:
                2em; }

                /* Selección de texto */
                ::selection {
                background:
                yellow;
                color:
                black; }
              

🎯 Selectores de Atributo

                /* Tiene el atributo */
                [disabled] {
                opacity:
                0.5; }

                /* Valor exacto */
                [type="text"] {
                border:
                1px solid gray; }

                /* Contiene el valor */
                [class*="btn"] {
                padding:
                10px; }

                /* Empieza con */
                [href^="https"] {
                color:
                green; }

                /* Termina con */
                [href$=".pdf"] {
                color:
                red; }
              

💡 Tip: Combina selectores para mayor especificidad: .container .button:hover

📦 Box Model ▼

🎯 Concepto clave: Todo elemento en CSS es una caja rectangular con contenido, padding, borde y margen.

📐 Componentes del Box Model

                /* De adentro hacia afuera */
                .caja {
                /* 1. Contenido */
                width:
                300px;
                height:
                200px;

                /* 2. Padding (relleno interno) */
                padding:
                20px;
                /* o individual: */
                padding-top:
                10px;
                padding-right:
                20px;
                padding-bottom:
                10px;
                padding-left:
                20px;

                /* 3. Borde */
                border:
                2px solid black;
                /* o detallado: */
                border-width:
                2px;
                border-style:
                solid;
                border-color:
                black;

                /* 4. Margin (espacio externo) */
                margin:
                10px;
                /* o individual: */
                margin-top:
                10px;
                margin-right:
                20px;
                margin-bottom:
                10px;
                margin-left:
                20px; }
              

📏 Atajos para padding y margin

                /* Un valor: todos los lados */
                padding:
                20px;

                /* Dos valores: vertical horizontal */
                padding:
                10px 20px;

                /* Tres valores: arriba horizontal abajo */
                padding:
                10px 20px 30px;

                /* Cuatro valores: arriba derecha abajo izquierda */
                padding:
                10px 20px 30px 40px;
              

🎛️ Box-sizing

                /* Por defecto (content-box) */
                .caja-default {
                width:
                300px;
                padding:
                20px;
                border:
                2px solid black;
                /* Ancho total = 300 + 40 + 4 = 344px */
                }

                /* Recomendado: border-box */
                .caja-mejor {
                box-sizing:
                border-box;
                width:
                300px;
                padding:
                20px;
                border:
                2px solid black;
                /* Ancho total = 300px (incluye padding y border) */
                }
              

✅ Mejor práctica global:

                  * {
                  box-sizing:
                  border-box; }
                

🎨 Bordes Avanzados

                /* Bordes redondeados */
                .card {
                border-radius:
                10px;
                /* o individual: */
                border-top-left-radius:
                10px;
                border-top-right-radius:
                10px;
                border-bottom-right-radius:
                10px;
                border-bottom-left-radius:
                10px; }

                /* Círculo perfecto */
                .circle {
                width:
                100px;
                height:
                100px;
                border-radius:
                50%; }

                /* Diferentes estilos de borde */
                .ejemplos {
                border-style:
                solid;
                /* sólido */
                border-style:
                dashed;
                /* guiones */
                border-style:
                dotted;
                /* puntos */
                border-style:
                double;
                /* doble */
                border-style:
                groove;
                /* ranura */ }
              

📍 Margin Collapse

Los márgenes verticales de elementos adyacentes se colapsan (se fusionan).

                /* Estos márgenes se colapsan */
                .elemento1 {
                margin-bottom:
                30px; }

                .elemento2 {
                margin-top:
                20px; }
                /* El espacio entre ellos será 30px, no 50px */
              

💡 Consejo: Usa solo margin-bottom o margin-top consistentemente para evitar confusión con margin collapse.

🎨 Colores y Tipografía ▼

🌈 Formas de Definir Colores

                /* Por nombre */
                .ejemplo1 {
                color:
                red;
                background-color:
                blue; }

                /* Hexadecimal */
                .ejemplo2 {
                color:
                #FF0000;
                /* rojo */
                color:
                #F00;
                /* rojo (forma corta) */
                }

                /* RGB */
                .ejemplo3 {
                color:
                rgb(255, 0, 0);
                /* rojo */
                color:
                rgba(255, 0, 0, 0.5);
                /* rojo 50% opaco */
                }

                /* HSL (Hue, Saturation, Lightness) */
                .ejemplo4 {
                color:
                hsl(0, 100%, 50%);
                /* rojo */
                color:
                hsla(0, 100%, 50%, 0.5);
                /* rojo 50% opaco */ }
              

🔤 Propiedades de Tipografía

                .texto {
                /* Familia de fuente */
                font-family:
                'Arial', 'Helvetica', sans-serif;

                /* Tamaño */
                font-size:
                16px;
                /* píxeles */
                font-size:
                1.5em;
                /* relativo al padre */
                font-size:
                1.5rem;
                /* relativo a root */

                /* Peso */
                font-weight:
                normal;
                /* 400 */
                font-weight:
                bold;
                /* 700 */
                font-weight:
                600;
                /* semi-bold */

                /* Estilo */
                font-style:
                normal;
                font-style:
                italic;
                font-style:
                oblique;

                /* Altura de línea */
                line-height:
                1.6;
                /* multiplicador */
                line-height:
                24px;
                /* valor fijo */

                /* Espaciado entre letras */
                letter-spacing:
                2px;

                /* Espaciado entre palabras */
                word-spacing:
                5px;

                /* Alineación */
                text-align:
                left;
                text-align:
                center;
                text-align:
                right;
                text-align:
                justify;

                /* Decoración */
                text-decoration:
                none;
                text-decoration:
                underline;
                text-decoration:
                line-through;
                text-decoration:
                overline;

                /* Transformación */
                text-transform:
                uppercase;
                text-transform:
                lowercase;
                text-transform:
                capitalize; }
              

📝 Google Fonts

                <!-- En el HTML -->
                <head>
                <link
                href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
                rel="stylesheet">
                </head>
              

                /* En el CSS */
                body {
                font-family:
                'Roboto', sans-serif; }
              

🎨 Gradientes

                /* Gradiente lineal */
                .fondo1 {
                background:
                linear-gradient(to right, #667eea, #764ba2); background:
                linear-gradient(45deg, red, blue);
                background:
                linear-gradient(to bottom, red 0%, yellow 50%, green
                  100%); }

                /* Gradiente radial */
                .fondo2 {
                background:
                radial-gradient(circle, red, yellow, green); background:
                radial-gradient(ellipse at top, #667eea, #764ba2); }
              

🖼️ Sombras

                /* Sombra de texto */
                .texto {
                text-shadow:
                2px 2px 4px rgba(0, 0, 0, 0.5);
                /* horizontal vertical blur color */
                }

                /* Sombra de caja */
                .caja {
                box-shadow:
                0 4px 6px rgba(0, 0, 0, 0.1);
                /* horizontal vertical blur spread color */

                /* Sombra interior */
                box-shadow:
                inset 0 2px 4px rgba(0, 0, 0, 0.3);

                /* Múltiples sombras */
                box-shadow:
                0 2px 4px rgba(0,0,0,0.1),
                0 8px 16px rgba(0,0,0,0.1); }
              

💡 Tip: Usa rem para tamaños de fuente (más accesible) y em para spacing relacionado con texto.

📐 Flexbox ▼

🎯 Flexbox es ideal para: Layouts en una dimensión (fila o columna), alineación de elementos, distribución de espacio.

🎛️ Contenedor Flex (padre)

                .container {
                /* Activar flexbox */
                display:
                flex;

                /* Dirección principal */
                flex-direction:
                row;
                /* horizontal (default) */
                flex-direction:
                row-reverse;
                /* horizontal invertido */
                flex-direction:
                column;
                /* vertical */
                flex-direction:
                column-reverse;
                /* vertical invertido */

                /* Ajuste de línea */
                flex-wrap:
                nowrap;
                /* no ajustar (default) */
                flex-wrap:
                wrap;
                /* ajustar a nueva línea */
                flex-wrap:
                wrap-reverse;
                /* ajustar invertido */

                /* Alineación en eje principal (horizontal si row) */
                justify-content:
                flex-start;
                /* inicio */
                justify-content:
                flex-end;
                /* final */
                justify-content:
                center;
                /* centro */
                justify-content:
                space-between;
                /* espaciado entre */
                justify-content:
                space-around;
                /* espaciado alrededor */
                justify-content:
                space-evenly;
                /* espaciado uniforme */

                /* Alineación en eje secundario (vertical si row) */
                align-items:
                stretch;
                /* estirar (default) */
                align-items:
                flex-start;
                /* inicio */
                align-items:
                flex-end;
                /* final */
                align-items:
                center;
                /* centro */
                align-items:
                baseline;
                /* línea base de texto */

                /* Alineación de múltiples líneas */
                align-content:
                flex-start;
                align-content:
                flex-end;
                align-content:
                center;
                align-content:
                space-between;
                align-content:
                space-around;

                /* Espacio entre items */
                gap:
                20px;
                /* ambos ejes */
                row-gap:
                20px;
                /* entre filas */
                column-gap:
                10px;
                /* entre columnas */ }
              

📦 Items Flex (hijos)

                .item {
                /* Orden de aparición */
                order:
                1;
                /* default es 0 */

                /* Crecer para ocupar espacio */
                flex-grow:
                1;
                /* puede crecer */

                /* Encogerse si es necesario */
                flex-shrink:
                1;
                /* puede encogerse */

                /* Tamaño base */
                flex-basis:
                200px;
                /* tamaño inicial */

                /* Atajo para grow, shrink y basis */
                flex:
                1;
                /* grow: 1, shrink: 1, basis: 0 */
                flex:
                0 0 200px;
                /* grow: 0, shrink: 0, basis: 200px */

                /* Alineación individual */
                align-self:
                auto;
                /* heredar del padre */
                align-self:
                flex-start;
                align-self:
                flex-end;
                align-self:
                center;
                align-self:
                stretch; }
              

✨ Ejemplos Prácticos

                /* Centrar perfectamente */
                .centrado {
                display:
                flex;
                justify-content:
                center;
                align-items:
                center;
                height:
                100vh; }

                /* Barra de navegación */
                .navbar {
                display:
                flex;
                justify-content:
                space-between;
                align-items:
                center;
                padding:
                1rem; }

                /* Grid de tarjetas responsivo */
                .cards {
                display:
                flex;
                flex-wrap:
                wrap;
                gap:
                20px; }

                .card {
                flex:
                1 1 300px;
                /* mínimo 300px */
                }

                /* Sidebar + Contenido */
                .layout {
                display:
                flex;
                gap:
                20px; }

                .sidebar {
                flex:
                0 0 250px;
                /* ancho fijo */
                }

                .content {
                flex:
                1;
                /* ocupa el resto */ }
              

🎓 Memoriza: justify-content = eje principal, align-items = eje secundario

🎯 CSS Grid ▼

🎯 Grid es ideal para: Layouts bidimensionales (filas y columnas), diseños complejos, alineación precisa.

🏗️ Contenedor Grid (padre)

                .container {
                /* Activar grid */
                display:
                grid;

                /* Definir columnas */
                grid-template-columns:
                200px 200px 200px;
                /* 3 columnas fijas */
                grid-template-columns:
                1fr 1fr 1fr;
                /* 3 columnas iguales */
                grid-template-columns:
                1fr 2fr 1fr;
                /* central más grande */
                grid-template-columns:
                repeat(3, 1fr);
                /* atajo */
                grid-template-columns:
                repeat(auto-fit, minmax(250px, 1fr));
                /* responsivo */

                /* Definir filas */
                grid-template-rows:
                100px 200px 100px;
                grid-template-rows:
                auto 1fr auto;
                /* header, content, footer */

                /* Espaciado */
                gap:
                20px;
                /* ambos ejes */
                row-gap:
                20px;
                /* entre filas */
                column-gap:
                10px;
                /* entre columnas */

                /* Alineación de items */
                justify-items:
                start;
                /* horizontal */
                justify-items:
                end;
                justify-items:
                center;
                justify-items:
                stretch;
                /* default */

                align-items:
                start;
                /* vertical */
                align-items:
                end;
                align-items:
                center;
                align-items:
                stretch;
                /* default */

                /* Alineación de la grid completa */
                justify-content:
                start;
                justify-content:
                end;
                justify-content:
                center;
                justify-content:
                space-between;
                justify-content:
                space-around;
                justify-content:
                space-evenly;

                align-content:
                start;
                align-content:
                end;
                align-content:
                center;
                align-content:
                space-between; }
              

📦 Items Grid (hijos)

                .item {
                /* Posicionar por líneas */
                grid-column-start:
                1;
                grid-column-end:
                3;
                /* ocupa 2 columnas */

                /* Atajo */
                grid-column:
                1 / 3;
                /* de línea 1 a 3 */
                grid-column:
                1 / span 2;
                /* desde 1, ocupa 2 */

                /* Filas */
                grid-row:
                1 / 3;
                grid-row:
                1 / span 2;

                /* Área nombrada */
                grid-area:
                header;

                /* Alineación individual */
                justify-self:
                start;
                justify-self:
                end;
                justify-self:
                center;

                align-self:
                start;
                align-self:
                end;
                align-self:
                center; }
              

🗺️ Grid Template Areas

                .container {
                display:
                grid;
                grid-template-columns:
                200px 1fr 200px;
                grid-template-rows:
                auto 1fr auto;
                grid-template-areas:
                "header header header"
                "sidebar content ads"
                "footer footer footer"; }

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

✨ Ejemplos Prácticos

                /* Galería responsiva */
                .galeria {
                display:
                grid;
                grid-template-columns:
                repeat(auto-fill, minmax(200px, 1fr)); gap:
                10px; }

                /* Dashboard layout */
                .dashboard {
                display:
                grid;
                grid-template-columns:
                repeat(12, 1fr);
                gap:
                20px; }

                .widget-grande {
                grid-column:
                span 6;
                /* ocupa 6 columnas */
                }

                .widget-pequeno {
                grid-column:
                span 3;
                /* ocupa 3 columnas */
                }

                /* Calendario */
                .calendario {
                display:
                grid;
                grid-template-columns:
                repeat(7, 1fr);
                /* 7 días */
                gap:
                2px; }

                /* Layout de página completa */
                .pagina {
                display:
                grid;
                min-height:
                100vh;
                grid-template-rows:
                auto 1fr auto; }

                .header {
                /* altura automática */ }
                .main {
                /* toma todo el espacio disponible */
                } .footer {
                /* altura automática */ }
              

🎓 Tip: auto-fit colapsa tracks vacíos, auto-fill los mantiene. Usa auto-fit para grids responsivos.

📍 Position y Display ▼

🎭 Display

                /* Valores principales */
                .elemento {
                display:
                block;
                /* ocupa todo el ancho */
                display:
                inline;
                /* en línea con texto */
                display:
                inline-block;
                /* en línea pero con dimensiones */
                display:
                none;
                /* oculto (no ocupa espacio) */
                display:
                flex;
                /* contenedor flexible */
                display:
                grid;
                /* contenedor grid */
                display:
                inline-flex;
                /* flex en línea */
                display:
                inline-grid;
                /* grid en línea */
                }

                /* Diferencias importantes */
                .block {
                display:
                block;
                width:
                100px;
                /* ✅ funciona */
                height:
                100px;
                /* ✅ funciona */
                margin:
                20px;
                /* ✅ funciona en todos lados */
                }

                .inline {
                display:
                inline;
                width:
                100px;
                /* ❌ ignorado */
                height:
                100px;
                /* ❌ ignorado */
                margin:
                20px;
                /* ⚠️ solo horizontal */ }
              

📍 Position

                /* Static - default, flujo normal */
                .static {
                position:
                static;
                /* top, right, bottom, left no funcionan */
                }

                /* Relative - relativo a su posición normal */
                .relative {
                position:
                relative;
                top:
                10px;
                /* se mueve 10px abajo */
                left:
                20px;
                /* se mueve 20px derecha */
                /* mantiene su espacio original */
                }

                /* Absolute - relativo al ancestro positioned más cercano
                  */
                .absolute {
                position:
                absolute;
                top: 0;
                right:
                0;
                /* sale del flujo normal */
                /* no ocupa espacio */
                }

                /* Fixed - relativo a la ventana del navegador */
                .fixed {
                position:
                fixed;
                bottom:
                20px;
                right:
                20px;
                /* permanece en posición al hacer scroll */
                }

                /* Sticky - híbrido entre relative y fixed */
                .sticky {
                position:
                sticky;
                top: 0;
                /* se comporta como relative hasta que alcanza top: 0
                  */
                /* luego se vuelve fixed */
                }
              

📐 Z-index

                /* Controla el orden de apilamiento */
                .capa1 {
                position:
                relative;
                /* necesita position para z-index */
                z-index:
                1; }

                .capa2 {
                position:
                relative;
                z-index:
                10;
                /* aparece encima */
                }

                .capa3 {
                position:
                relative;
                z-index:
                -1;
                /* aparece debajo */ }
              

✨ Ejemplos Prácticos

                /* Modal centrado */
                .modal {
                position:
                fixed;
                top:
                50%;
                left:
                50%;
                transform:
                translate(-50%, -50%);
                z-index:
                1000; }

                /* Badge en esquina */
                .container {
                position:
                relative; }

                .badge {
                position:
                absolute;
                top:
                -10px;
                right:
                -10px;
                background:
                red;
                border-radius:
                50%; }

                /* Header sticky */
                .header {
                position:
                sticky;
                top: 0;
                background:
                white;
                z-index:
                100; }

                /* Botón flotante */
                .fab {
                position:
                fixed;
                bottom:
                20px;
                right:
                20px;
                width:
                60px;
                height:
                60px;
                border-radius:
                50%;
                z-index:
                999; }
              

💡 Recuerda: Para usar z-index, el elemento debe tener position diferente de static.

📱 Diseño Responsivo ▼

📏 Media Queries

                /* Sintaxis básica */
                @media (condición) {
                /* estilos que se aplican cuando se cumple la condición
                  */
                }

                /* Por ancho de pantalla */
                @media (min-width: 768px) {
                .container {
                padding:
                20px; } }

                @media (max-width: 767px) {
                .container {
                padding:
                10px; } }

                /* Rango */
                @media (min-width: 768px) and (max-width: 1024px)
                { .container {
                max-width:
                960px; } }

                /* Orientación */
                @media (orientation: landscape) {
                /* horizontal */
                }

                @media (orientation: portrait) {
                /* vertical */
                }

                /* Tipo de medio */
                @media print {
                .no-imprimir {
                display:
                none; } }

                @media screen {
                /* solo para pantallas */
                }
              

📊 Breakpoints Comunes

                /* Mobile First Approach (recomendado) */

                /* Estilos base: móvil (default) */
                .container {
                padding:
                10px;
                font-size:
                14px; }

                /* Tablet pequeña (576px+) */
                @media (min-width: 576px) {
                .container {
                padding:
                15px; } }

                /* Tablet (768px+) */
                @media (min-width: 768px) {
                .container {
                padding:
                20px;
                font-size:
                16px; } }

                /* Desktop (1024px+) */
                @media (min-width: 1024px) {
                .container {
                max-width:
                1200px;
                padding:
                30px; } }

                /* Desktop grande (1440px+) */
                @media (min-width: 1440px) {
                .container {
                max-width:
                1400px; } }
              

🎯 Técnicas Responsivas

                /* Unidades relativas */
                .texto {
                font-size:
                16px;
                /* fijo */
                font-size:
                1rem;
                /* relativo a root */
                font-size:
                1em;
                /* relativo al padre */
                font-size:
                2vw;
                /* 2% del viewport width */
                font-size:
                2vh;
                /* 2% del viewport height */
                }

                /* Imágenes responsivas */
                img {
                max-width:
                100%;
                height:
                auto;
                display:
                block; }

                /* Videos responsivos */
                .video-container {
                position:
                relative;
                padding-bottom:
                56.25%;
                /* 16:9 */
                height:
                0;
                overflow:
                hidden; }

                .video-container iframe {
                position:
                absolute;
                top: 0;
                left:
                0;
                width:
                100%;
                height:
                100%; }

                /* Tipografía fluida */
                h1 {
                font-size:
                clamp(24px, 5vw, 48px);
                /* mínimo: 24px, preferido: 5vw, máximo: 48px */
                }
              

🎨 Layout Responsivo

                /* Grid responsivo automático */
                .grid {
                display:
                grid;
                grid-template-columns:
                repeat(auto-fit, minmax(250px, 1fr));
                gap:
                20px; }

                /* Flexbox responsivo */
                .flex-grid {
                display:
                flex;
                flex-wrap:
                wrap;
                gap:
                20px; }

                .flex-grid > * {
                flex:
                1 1 300px;
                /* mínimo 300px */
                }

                /* Ocultar/mostrar según dispositivo */
                .mobile-only {
                display:
                block; }

                .desktop-only {
                display:
                none; }

                @media (min-width: 768px) {
                .mobile-only {
                display:
                none; }

                .desktop-only {
                display:
                block; } }
              

⚠️ No olvides: Incluir el meta viewport en tu HTML:

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

🎯 Mejor práctica: Diseña mobile-first. Es más fácil expandir un diseño simple que simplificar uno complejo.

✨ Transiciones y Animaciones ▼

🔄 Transiciones

                /* Sintaxis completa */
                .boton {
                background:
                blue;
                transition-property:
                background;
                /* qué animar */
                transition-duration:
                0.3s;
                /* duración */
                transition-timing-function:
                ease;
                /* aceleración */
                transition-delay:
                0s;
                /* retraso */
                }

                .boton:hover {
                background:
                red; }

                /* Atajo (recomendado) */
                .boton {
                background:
                blue;
                transition:
                background 0.3s ease; }

                /* Múltiples propiedades */
                .card {
                transition:
                transform 0.3s ease, box-shadow 0.3s ease; }

                /* Todo */
                .elemento {
                transition:
                all 0.3s ease; }

                /* Timing functions comunes */
                transition-timing-function:
                linear;
                /* constante */
                transition-timing-function:
                ease;
                /* default */
                transition-timing-function:
                ease-in;
                /* acelera */
                transition-timing-function:
                ease-out;
                /* desacelera */
                transition-timing-function:
                ease-in-out;
                /* acelera y desacelera */
                transition-timing-function:
                cubic-bezier(0.4, 0, 0.2, 1);
                /* personalizado */
              

🎬 Animaciones con @keyframes

                /* Definir animación */
                @keyframes deslizar {
                from {
                transform:
                translateX(-100%);
                opacity:
                0; }

                to {
                transform:
                translateX(0);
                opacity:
                1; } }

                /* Con porcentajes */
                @keyframes rebote {
                0% {
                transform:
                translateY(0); }

                50% {
                transform:
                translateY(-20px); }

                100% {
                transform:
                translateY(0); } }

                /* Aplicar animación */
                .elemento {
                animation-name:
                deslizar;
                animation-duration:
                1s;
                animation-timing-function:
                ease;
                animation-delay:
                0s;
                animation-iteration-count:
                infinite;
                /* o número */
                animation-direction:
                normal;
                /* normal, reverse, alternate */
                animation-fill-mode:
                forwards;
                /* mantiene estado final */
                }

                /* Atajo */
                .elemento {
                animation:
                deslizar 1s ease 0s infinite normal forwards; }
              

🎨 Ejemplos Prácticos

                /* Hover suave */
                .boton {
                background:
                #667eea;
                transform:
                scale(1);
                transition:
                all 0.3s ease; }

                .boton:hover {
                background:
                #764ba2;
                transform:
                scale(1.05); }

                /* Rotación infinita */
                @keyframes girar {
                from {
                transform:
                rotate(0deg); }
                to {
                transform:
                rotate(360deg); } }

                .loading {
                animation:
                girar 2s linear infinite; }

                /* Fade in al cargar */
                @keyframes fadeIn {
                from {
                opacity:
                0;
                transform:
                translateY(20px); }
                to {
                opacity:
                1;
                transform:
                translateY(0); } }

                .aparecer {
                animation:
                fadeIn 0.6s ease; }

                /* Pulso */
                @keyframes pulso {
                0%, 100% {
                transform:
                scale(1); }
                50% {
                transform:
                scale(1.1); } }

                .notificacion {
                animation:
                pulso 2s ease-in-out infinite; }
              

Tip de rendimiento: Anima solo transform y opacity para mejor performance. Evita animar width, height, margin, etc.

Mejores Prácticas y Consejos ▼

Organización del Código

                /* Estructura recomendada */

                /* ===== 1. RESET/NORMALIZE ===== */
                * {
                margin:
                0;
                padding:
                0;
                box-sizing:
                border-box; }

                /* ===== 2. VARIABLES ===== */
                :root {
                --color-primary:
                #667eea;
                --spacing-unit:
                8px; }

                /* ===== 3. TIPOGRAFÍA BASE ===== */
                body {
                font-family:
                Arial, sans-serif;
                line-height:
                1.6; }

                /* ===== 4. LAYOUT ===== */
                .container { }
                .grid { }

                /* ===== 5. COMPONENTES ===== */
                .button { }
                .card { }

                /* ===== 6. UTILIDADES ===== */
                .text-center {
                text-align:
                center; }
                .hidden {
                display:
                none; }

                /* ===== 7. MEDIA QUERIES ===== */
                @media (min-width: 768px) {
                /* responsive styles */
                }
              

Nomenclatura BEM

                /* Block Element Modifier */

                /* Bloque: componente independiente */
                .card { }

                /* Elemento: parte del bloque */
                .card__title { }
                .card__body { }
                .card__footer { }

                /* Modificador: variación del bloque o elemento */
                .card--featured { }
                .card--large { }
                .card__title--bold { }
              

                <!-- HTML correspondiente -->
                <div
                class="card card--featured">
                <h2
                class="card__title card__title--bold">Título</h2>
                <div
                class="card__body">Contenido</div>
                <div
                class="card__footer">Pie</div>
                </div>
              

Errores Comunes a Evitar

Usar demasiada especificidad

                  div#container .wrapper ul li a.link
                  {
                  /* Difícil de sobrescribir */
                  }
                

Usa clases específicas

                  .nav-link {
                  /* Fácil de mantener */
                  }
                

Repetir código

                  .button-primary {
                  padding:
                  10px 20px;
                  border-radius:
                  5px;
                  background:
                  blue; }

                  .button-secondary {
                  padding:
                  10px 20px;
                  border-radius:
                  5px;
                  background:
                  gray; }
                

Usa clases base

                  .button {
                  padding:
                  10px 20px;
                  border-radius:
                  5px; }

                  .button--primary {
                  background:
                  blue; }
                  .button--secondary {
                  background:
                  gray; }
                

Herramientas Útiles

Can I Use: Verifica compatibilidad de navegadores
CSS Validator: Valida tu código CSS
PurgeCSS: Elimina CSS no utilizado
Autoprefixer: Añade prefijos de navegador automáticamente
Sass/SCSS: Preprocesador CSS con variables, anidamiento
PostCSS: Transforma CSS con plugins

Recursos para aprender más:

MDN Web Docs - Documentación completa
CSS-Tricks - Tutoriales y trucos
Flexbox Froggy - Juego para aprender Flexbox
Grid Garden - Juego para aprender Grid
CodePen - Experimenta con CSS en vivo

Siguiente paso: Una vez domines CSS, aprende JavaScript para añadir interactividad, y explora frameworks modernos como Tailwind CSS o metodologías como CSS-in-JS.

Manual 🎨 CSS

🔍 1. Entiende la cascada y especificidad

📁 2. Organiza tu código CSS

📝 3. Usa nombres de clases descriptivos

🎨 4. Evita !important

📱 5. Piensa en responsive desde el inicio

🔧 6. Utiliza variables CSS (Custom Properties)

🎯 7. Aprende las herramientas de desarrollo

1️⃣ CSS Externo (Recomendado)

2️⃣ CSS Interno

3️⃣ CSS en Línea (Inline)

4️⃣ Import en CSS

🔵 Selectores Básicos

🔗 Selectores Combinadores

🎭 Pseudo-clases

✨ Pseudo-elementos

🎯 Selectores de Atributo

📐 Componentes del Box Model

📏 Atajos para padding y margin

🎛️ Box-sizing

🎨 Bordes Avanzados

📍 Margin Collapse

🌈 Formas de Definir Colores

🔤 Propiedades de Tipografía

📝 Google Fonts

🎨 Gradientes

🖼️ Sombras

🎛️ Contenedor Flex (padre)

📦 Items Flex (hijos)

✨ Ejemplos Prácticos

🏗️ Contenedor Grid (padre)

📦 Items Grid (hijos)

🗺️ Grid Template Areas

✨ Ejemplos Prácticos

🎭 Display

📍 Position

📐 Z-index

✨ Ejemplos Prácticos

📏 Media Queries

📊 Breakpoints Comunes

🎯 Técnicas Responsivas

🎨 Layout Responsivo

🔄 Transiciones

🎬 Animaciones con @keyframes

🎨 Ejemplos Prácticos

Organización del Código

Nomenclatura BEM

Errores Comunes a Evitar

Herramientas Útiles