CSS - Hojas de Estilo en Cascada

Domina el arte de dar estilo a tus páginas web

150+ Propiedades
Responsive Design
Animaciones

🎨 ¿Qué es CSS?

CSS (Cascading Style Sheets) es el lenguaje que describe cómo deben mostrarse los elementos HTML en la pantalla, papel o en otros medios. Controla el diseño, colores, fuentes y efectos visuales de una página web.

Sin CSS

Título Simple

Texto normal sin estilo.

→

Con CSS

Título Elegante

Texto con estilo atractivo.

📝 Sintaxis de CSS

h1 {
color : blue ;
font-size : 32px ;
}
Selector

Selecciona los elementos HTML a los que se aplicarán los estilos

Propiedad

La característica que quieres cambiar (color, tamaño, margen, etc.)

Valor

El valor específico para la propiedad (azul, 32px, center, etc.)

🎯 Selectores CSS

Selectores de Elemento

Selecciona elementos por su etiqueta HTML

p { color: red; }

Selectores de Clase

Selecciona elementos con una clase específica

.destacado { background: yellow; }

Selectores de ID

Selecciona un elemento único por su ID

#header { height: 100px; }

Selectores de Atributo

Selecciona elementos con un atributo específico

input[type="text"] { border: 1px solid; }

Pseudo-clases

Selecciona elementos en un estado específico

a:hover { color: blue; }

Combinadores

Combina selectores para mayor especificidad

div > p { margin: 0; }

HTML de Ejemplo:

<div id="container">
    <h1 class="titulo">Título</h1>
    <p class="destacado">Párrafo destacado</p>
    <p>Párrafo normal</p>
    <a href="#">Enlace</a>
    <input type="text" placeholder="Escribe algo">
</div>

Resultado:

Título

Párrafo destacado

Párrafo normal

Enlace

✨ Propiedades Principales

Este texto cambiará según las propiedades seleccionadas. ¡Pruébalo!

p { color: #3498db; font-size: 16px; font-weight: normal; }
margin
border
padding
content

Área de demostración de fondos

📱 Responsive Design

Caja 1
Caja 2
Caja 3

Media Queries:

/* Mobile First */
.container {
    width: 100%;
}

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

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

🎭 Animaciones y Transiciones

¡Anímame!
/* Animación de rebote */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-30px); }
}

.elemento {
    animation: bounce 1s infinite;
}

🔧 Métodos de Aplicación

CSS Externo

Archivo .css separado enlazado en el HTML

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

✅ Ventajas:

  • Reutilizable
  • Mantenible
  • Cacheable

CSS Interno

Estilos dentro de la etiqueta <style> en el HTML

<style> p { color: red; } </style>

✅ Ventajas:

  • Rápido de implementar
  • Útil para páginas únicas

CSS en Línea

Estilos directamente en elementos con el atributo style

<p style="color: blue;">Texto</p>

✅ Ventajas:

  • Alta especificidad
  • Útil para estilos dinámicos

🛠️ Herramientas y Recursos

🖌️ Preprocesadores

  • SASS/SCSS: Variables, mixins, nesting
  • Less: Similar a SASS con sintaxis diferente
  • Stylus: Sintaxis flexible y poderosa

📚 Frameworks CSS

  • Bootstrap: Framework más popular
  • Tailwind CSS: CSS utility-first
  • Bulma: Moderno y basado en Flexbox

🔍 Herramientas de Desarrollo

  • DevTools del navegador: Inspeccionar y modificar CSS
  • CSS Grid Generator: Herramientas visuales para Grid
  • Flexbox Froggy: Juego para aprender Flexbox

💪 Área de Práctica

Editor CSS:

Resultado:

¡Dale estilo!

💡 Consejos para Maestros CSS

Mobile First

Empieza diseñando para móviles y luego escala para pantallas más grandes

Variables CSS

Usa variables (custom properties) para mantener consistencia

Especificidad

Evita !important y entiende cómo funciona la cascada

Performance

Minimiza el CSS y usa propiedades que no causen repaint