Proprits personnalises (--*) : variables CSS

--some-keyword: left;
--some-color: #123456;
--some-complex-value: 3px 6px rgb(20 32 54);

<p id="premierParagraphe">
  Ce paragraphe devrait tre sur fond bleu avec un texte jaune.
</p>
<p id="secondParagraphe">
  Ce paragraphe devrait tre sur fond jaune avec un texte bleu.
</p>
<div id="conteneur">
  <p id="troisiemeParagraphe">
    Ce paragraphe devrait avoir un fond vert et un texte jaune.
  </p>
</div>

:root {
  --premiere-couleur: #1166ff;
  --seconde-couleur: #ffff77;
}

#premierParagraphe {
  background-color: var(--premiere-couleur);
  color: var(--seconde-couleur);
}

#secondParagraphe {
  background-color: var(--seconde-couleur);
  color: var(--premiere-couleur);
}

#conteneur {
  --premiere-couleur: #229900;
}

#troisiemeParagraphe {
  background-color: var(--premiere-couleur);
  color: var(--seconde-couleur);
}

<ol>
  <li class="one">lment un</li>
  <li class="two">lment deux</li>
  <li class="three">lment trois</li>
</ol>

@property --itemSize {
  syntax: "<length> | <percentage>";
  inherits: true;
  initial-value: 200px;
}

@property --borderWidth {
  syntax: "<length>";
  inherits: false;
  initial-value: 10px;
}

ol {
  --itemSize: 100px;
  --borderWidth: 1px;
}
.two {
  --itemSize: initial;
  --borderWidth: inherit;
}
.three {
  --itemSize: large;
  --borderWidth: 3%;
}

li {
  width: var(--itemSize);
  border: var(--borderWidth) solid red;
  background-color: yellow;
  margin-bottom: 10px;
}