CSS - Colores, tipografías y tamaños

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Colores y fuentes</title>
  <link rel="stylesheet" href="../../examples/css/04_colores_fuentes.css">
</head>
<body>
  <h1>Estilos base</h1>
  <p>Texto</p>
  <p class="importante">Importante</p>
  <p class="muted">Atenuado</p>
</body>
</html>

Descargar ZIP Arquitectura del ejemplo

Archivos externos de este ejemplo

04_colores_fuentes.css

:root{
--color-primario:#E00034;
--gris:#666
}
body{
font-family:system-ui,sans-serif;
line-height:1.6;
padding:16px
}
h1{
font-size:1.6rem
}
.importante{
color:var(--color-primario);
font-weight:700
}
.muted{
color:var(--gris)
}