HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paleta de Colores con Variables CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Explorando Variables CSS</h1>
</header>
<main>
<p>Las variables CSS nos permiten personalizar fácilmente los estilos de nuestro proyecto.</p>
<button>Haz clic aquí</button>
</main>
</body>
</html>
CSS
/* Definiendo Variables CSS */
:root {
--color-primario: #4A90E2;
--color-secundario: #50E3C2;
--color-texto: #333;
--color-fondo: #F5F5F5;
--fuente-principal: 'Arial', sans-serif;
--tamaño-texto: 16px;
--peso-texto: 400;
}
/* Estilos Globales */
body {
font-family: var(--fuente-principal);
font-size: var(--tamaño-texto);
font-weight: var(--peso-texto);
background-color: var(--color-fondo);
color: var(--color-texto);
text-align: center;
margin: 0;
padding: 0;
}
/* Encabezado */
header {
background-color: var(--color-primario);
color: white;
padding: 20px;
}
/* Botón */
button {
background-color: var(--color-secundario);
border: none;
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s ease;
}
button:hover {
background-color: var(--color-primario);
color: white;
}
