◀ ▶

G. Propiedades personalizadas

En CSS3 se pueden definir constantes y usar su valor a lo largo del código CSS.
El nombre de la propiedad personalizada debe iniciar con 2 guiones (--).
Deben definirse en la regla para el elemento raíz, que en este caso es (html).
Para usar el valor, debe colocarse dentro de la expresión var(--propiedad).

Ejemplo

<head>

<style>

html {

--colTexto: yellow;

--colFondo: blue;

}

h1 {

color: var(--colTexto);

background-color:

var(--colFondo);

}

p {

color: var(--colTexto);

background-color: black;

}

</style>

</head>

<body>

<p>Este es un ejemplo.</p>

<p>Aprende CSS.</p>

<h2>Subsección</h2>

<p>Juega con colores.</p>

<p>

Gilberto Pacheco Gallegos.

</p>

</footer>

</body>