<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/variables.css">
</head>
<body>
<h1>Hola que tal</h1>
<h2>Muy bien</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic dolore provident minus commodi veniam, nihil necessitatibus sint nulla. Quidem explicabo facere repellendus perspiciatis ea! Impedit in eum sapiente! Et, quaerat.</p>
<div id="anuncio">Esto es un anuncio</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
html{
--gris:blue; /* las variables se definen con dos guiones: -- */
--blanco:yellow;
--tamanyo:2em;
}
h1{
color:var(--gris);
}
#anuncio{
--blanco:white; /*sobreescribiendo la variable blanco */
color:var(--blanco);
background-color: var(--gris);
font-size: var(--tamanyo);
}
ul{
background-color: var(--gris);
color: var(--blanco);
}
