HTML External Style Sheet

Penulisan style menggunakan eksternal CSS file sangat efisien dan efektif untuk menerapkan style di banyak halaman web. Saat kita butuk mengubah style, cukup mengubah pada 1 file ekstensi .css maka seluruh halaman web dengan link referensi file tersebut akan berubah.

Contoh:
Buat terlebih dahulu file berekstensi .css dengan nama sample.css dan berisikan code sebagai berikut:
h1 {
    color:blue;
    font-family:verdana;
    font-size:14pt;
}
{
    color:red;
    font-family:courier;
    font-size:11pt;
}

p#beda {
    color:green;
}

p.kelompok {
    color:purple;
}


Kemudian pada dokumen html yang akan kita buat tambahkan link ke file css  tersebut. Sesuaikan elemen dengan tag id dan tag class, untuk mendapatkan style yang terdapat pada file css.
<html>
<head>

  <link rel="stylesheet" href="sample.css">
</head>
<body>
  <h1>
This is a heading</h1>
  <p>Ini paragraft biasa 1.</p>
 
<p class="kelompok">Ini paragraft class kelompok 1.</p>
 
<p>Ini paragraft biasa 2.</p>
 
<p>Ini paragraft biasa 3.</p>
 
<p id="beda">Ini paragraft Beda.</p>
 
<p class="kelompok">Ini paragraft class kelompok 2.</p>
</body>
</html>


Tampilan pada Browser:



Click here if you like this article.


Post a Comment

0 Comments