Tutorial Completo de CSS3

/* Selector de elemento */
p { color: blue; }

/* Selector de clase */
.highlight { background: yellow; }

/* Selector de ID */
#header { font-size: 24px; }

/* Selector descendiente */
div p { margin: 10px; }

/* Selector hijo directo */
ul > li { list-style: none; }

/* Pseudo-clases */
a:hover { color: red; }
button:active { transform: scale(0.95); }

.box {
    width: 300px;
    padding: 20px;
    border: 2px solid #667eea;
    margin: 10px;
    box-sizing: border-box; /* Incluye padding y border en el ancho */
}

.container {
    display: flex;
    justify-content: space-between; /* Alineación horizontal */
    align-items: center; /* Alineación vertical */
    gap: 20px; /* Espacio entre elementos */
    flex-wrap: wrap; /* Permite saltos de línea */
}

.item {
    flex: 1; /* Crecimiento flexible */
    min-width: 200px;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
    grid-gap: 20px;
    grid-auto-rows: minmax(100px, auto);
}

.grid-item {
    grid-column: span 2; /* Ocupa 2 columnas */
}

/* Transiciones */
.button {
    transition: all 0.3s ease;
}

.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

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

.element {
    animation: fadeIn 0.6s ease;
}

/* Mobile first approach */
.container {
    padding: 10px;
}

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

/* Desktop */
@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }
}