Curso CSS Nivel Medio

Sigue los Módulos del Curso CSS Nivel Medio, para un aprendizaje interactivo, y prueba el CSS en Mini CodePen.

Módulo 1 (versión visual)

Haz clic en la imagen de abajo para probar el CSS del Módulo

📖 1. Selectores avanzados

a) Selectores de atributos

Ejemplo práctico:

html

<a href="https://google.com" target="_blank">Google</a>
<a href="pagina.html">Página interna</a>

css

a[target="_blank"] {
  color: red;
  font-weight: bold;
}

🔎 Visual: El enlace externo (“Google”) aparece en rojo y en negrita, mientras que el interno se mantiene normal.

b) Pseudo‑clases estructurales

Ejemplo práctico:

html

<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
  <li>Elemento 4</li>
</ul>

css

li:nth-child(2n) {
  background: #f0f0f0;
}

🔎 Visual: Los elementos pares (2 y 4) tienen un fondo gris claro, los impares quedan blancos.

c) Pseudo‑clases de exclusión

Ejemplo práctico:

html

<p class="destacado">Texto destacado</p>
<p>Texto normal</p>
<p>Otro texto normal</p>

css

p:not(.destacado) {
  color: gray;
}

🔎 Visual: El primer párrafo se mantiene en negro, los demás se ven en gris.

📖 2. Variables CSS

a) Definición y uso

html

<h1>Título principal</h1>
<h2>Subtítulo</h2>

css

:root {
  --color-principal: #3498db;
  --color-secundario: #2ecc71;
}

h1 {
  color: var(--color-principal);
}
h2 {
  color: var(--color-secundario);
}

🔎 Visual: El <h1> aparece en azul y el <h2> en verde, ambos definidos con variables.

📝 3. Ejercicio visual

Objetivo: Crear una lista de productos con estilos alternos y colores definidos por variables.

html

<ul class="productos">
  <li>Producto A</li>
  <li>Producto B</li>
  <li>Producto C</li>
  <li>Producto D</li>
</ul>

css

:root {
  --bg-par: #e0f7fa;
  --bg-impar: #fce4ec;
}

.productos li:nth-child(odd) {
  background: var(--bg-impar);
}
.productos li:nth-child(even) {
  background: var(--bg-par);
}

🔎 Visual: Los productos alternan entre rosa claro y azul claro, creando un patrón atractivo.

🚀 4. Mini‑proyecto visual

Tarjeta de producto con hover dinámico:

html

<div class="card">
  <h3>Producto Premium</h3>
  <p>Descripción breve del producto.</p>
</div>

css

:root {
  --card-bg: #f4f4f4;
  --card-hover: #d1f2eb;
}

.card {
  background: var(--card-bg);
  padding: 20px;
  transition: background 0.3s;
}

.card:hover {
  background: var(--card-hover);
}

🔎 Visual: La tarjeta aparece en gris claro y, al pasar el ratón, cambia suavemente a verde agua.

✅ Conclusión visual del módulo: Tus alumnos verán cómo los selectores avanzados permiten controlar con precisión los estilos y cómo las variables CSS facilitan la consistencia en el diseño.

MÓDULO 2 CSS