Guía Completa de CSS3

Conceptos fundamentales y ejemplos prácticos

¿Qué es CSS3?

CSS3 (Cascading Style Sheets Level 3) es la última evolución del lenguaje de hojas de estilo CSS. Introduce nuevas características que permiten crear diseños más sofisticados y efectos visuales avanzados sin necesidad de scripts o imágenes.

Cómo vincular CSS a HTML

Existen tres formas principales de aplicar CSS a un documento HTML:

1. CSS externo (recomendado)

<link rel="stylesheet" href="styles.css">

2. CSS interno

<style>
body {
font-family: Arial, sans-serif;
}
</style>

3. CSS en línea

<p style="color: blue;">Este texto es azul</p>

Selectores Básicos

Los selectores permiten elegir elementos HTML para aplicarles estilos.

1. Selector de etiqueta

p { color: blue; }

Este párrafo está seleccionado por su etiqueta.

2. Selector de clase

.special { color: red; }

Este párrafo tiene la clase "special".

3. Selector de ID

#unique-element { background: yellow; }

Este párrafo tiene el ID "unique-element".

Propiedades Básicas

Color y fondo

.demo {
color: white;
background-color: #3498db;
}

Este elemento tiene color de texto blanco y fondo azul.

Margin y Padding

.demo {
margin: 20px;
padding: 15px;
}

Este elemento tiene margin y padding aplicado.

Tamaño de fuente

.demo {
font-size: 24px;
}

Texto con tamaño de fuente de 24px.

Modelo de Caja (Box Model)

Todos los elementos HTML son considerados "cajas" con las siguientes propiedades: content, padding, border y margin.

.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #3498db;
margin: 20px;
background: #2ecc71;
}

Caja de demostración

Box-sizing

La propiedad box-sizing controla cómo se calcula el tamaño total de un elemento.

/* Valor por defecto */
.content-box {
box-sizing: content-box;
width: 200px;
padding: 20px; /* El ancho total será 200px + 40px + 10px = 250px */
border: 5px solid blue;
}

/* Modelo más intuitivo */
.border-box {
box-sizing: border-box;
width: 200px; /* El padding y border están incluidos en estos 200px */
padding: 20px;
border: 5px solid blue;
}

Display y Posicionamiento

Propiedad Display

Controla cómo se muestra un elemento y cómo interactúa con otros elementos.

.block { display: block; } /* Ocupa todo el ancho disponible */
.inline { display: inline; } /* Solo ocupa el espacio necesario */
.inline-block { display: inline-block; } /* Combinación de ambos */
.none { display: none; } /* Oculta el elemento */

Posicionamiento

.static { position: static; } /* Valor por defecto */
.relative { position: relative; } /* Relativo a su posición normal */
.absolute { position: absolute; } /* Relativo al contenedor posicionado más cercano */
.fixed { position: fixed; } /* Relativo a la ventana del navegador */
.sticky { position: sticky; } /* Híbrido entre relative y fixed */

Elemento con position: absolute;

Flexbox (Diseño Flexible)

Flexbox es un modelo de layout unidimensional que permite distribuir el espacio entre los elementos de una interfaz.

.container {
display: flex;
justify-content: center; /* Alineación horizontal */
align-items: center; /* Alineación vertical */
flex-wrap: wrap; /* Permitir múltiples líneas */
}

Item 1

Item 2

Item 3

CSS Grid (Cuadrícula)

CSS Grid es un sistema de layout bidimensional que permite crear diseños complejos con filas y columnas.

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* Tres columnas de igual tamaño */
grid-gap: 10px; /* Espacio entre elementos */
}

1

2

3

4

5

6

Responsive Design (Media Queries)

Las media queries permiten aplicar estilos específicos según las características del dispositivo, principalmente el ancho de pantalla.

/* Estilos para móviles (por defecto) */
.container {
width: 100%;
}

/* Estilos para tablets */
@media (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
}

/* Estilos para escritorio */
@media (min-width: 1024px) {
.container {
width: 980px;
}
}

Redimensiona la ventana de tu navegador para ver cómo responde este diseño.

Elemento flexible

Elemento flexible

Elemento flexible

Transiciones y Animaciones

Transiciones

Permiten cambiar propiedades CSS suavemente a lo largo de un período de tiempo.

.button {
transition: all 0.3s ease;
}

.button:hover {
transform: scale(1.1);
background-color: #e74c3c;
}

Pasa el cursor

Animaciones

Permiten crear animaciones más complejas con múltiples keyframes.

@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}

.element {
animation: pulse 2s infinite;
}

Efectos Visuales Avanzados

Sombras

.box {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

Elemento con sombras aplicadas

Gradientes

.gradient {
background: linear-gradient(135deg, #3498db, #2ecc71);
}

Filtros

.image {
filter: blur(2px) grayscale(50%);
}

Variables CSS (Custom Properties)

Las variables CSS permiten almacenar valores específicos para reutilizarlos en todo el documento.

:root {
--color-primary: #3498db;
--color-secondary: #2ecc71;
--spacing: 1rem;
--border-radius: 8px;
}

.element {
background-color: var(--color-primary);
padding: var(--spacing);
border-radius: var(--border-radius);
}

Este elemento utiliza variables CSS