HTML Editor:

Hasil :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width"/>
  <title>Demo HTML</title>
  <style>  
    /*---- Variable ----*/
    :root{
      --red: red;
      --biru-muda: white;
      --jeruk: orange;
      --gelap: darkgreen;
      --abu: grey;
      --font-s: normal bold 14px Arial;
      --font-m: normal 400 16px Verdana;
      --font-l: italic 400 18px Tahoma;
      --font-xl: oblique 20px monospace;
      --font-xxl: normal bolder 22px 'Helvetica', sans-serif;
    }
    
  /*---- Style CSS ----*/
    .satu{
    color: var(--red);
    border: 1px solid var(--red);
    background:var(--abu);
    font: var(--font-s)
    }
    .dua{
    color: var(--biru-muda);
    border: 1px solid var(--biru-muda);
    background:var(--gelap);
    font: var(--font-m)
    }
    .tiga{
    color: var(--jeruk);
    border: 1px solid var(--jeruk);
    background:var(--red);
    font: var(--font-l)
    }
    .empat{
    color: var(--gelap);
    border: 1px solid var(--gelap);
    background:var(--biru-muda);
    font: var(--font-xl)
    }
    .lima{
    color: var(--abu);
    border: 1px solid var(--abu);
    background:var(--jeruk);
    font: var(--font-xxl)
    }
  </style>
</head>
<body>
  <h2 align="center">Fungsi var() - DEMO</h2>
<p class='satu'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<p class='dua'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<p class='tiga'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<p class='empat'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<p class='lima'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p></body>
</html>

Coding Blogger Fungsi var() pada CSS variabel

HTML Demo

CSS Variabel