Ejercicio: Introducción a CSS

Objetivo

Dar estilo a una de tus páginas con un archivo CSS externo: variables, tipografía, menú horizontal, tarjetas, animación y diseño adaptable.

Pasos

Marca cada paso a medida que lo completes. Tu avance se guarda en este navegador.

• Crea una carpeta con index.html y estilos.css. Enlaza el CSS con <link> en el <head>.
• Usa cualquiera de tus páginas anteriores (o la plantilla semántica de la lección 6) como base.
• En estilos.css, define variables en :root para un color principal y un color de fondo.
• Añade * { box-sizing: border-box; } y estiliza body con tipografía, line-height y colores.
• Dale estilo a h1, h2 y a (color y, en los enlaces, :hover).
• Convierte tu menú <nav> en una barra horizontal con display: flex y gap.
• Crea una clase .tarjeta con padding, border, border-radius y margin, y aplícala a tus <article>.
• Añade una transición suave a las tarjetas o botones al pasar el cursor.
• Agrega una media query para que, en pantallas de 600 px o menos, el menú pase a columna.
• Abre la página, redimensiona la ventana y usa F12 para inspeccionar tus reglas.

:root {
  --principal: #4f46e5;
  --fondo: #f7f8fc;
  --texto: #1e2235;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, sans-serif;
  line-height: 1.7;
}

h1, h2 { color: var(--principal); }
a { color: var(--principal); }
a:hover { text-decoration: none; }

nav ul {
  display: flex;
  gap: 16px;
  list-style: none;
  padding: 12px 20px;
  margin: 0;
  background: var(--principal);
}
nav a { color: white; text-decoration: none; font-weight: 600; }

main { max-width: 800px; margin: 0 auto; padding: 20px; }

.tarjeta {
  background: white;
  border: 1px solid #dde2ef;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  transition: transform .2s;
}
.tarjeta:hover { transform: translateY(-3px); }

@media (max-width: 600px) {
  nav ul { flex-direction: column; }
}