27 March 2015

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.


0 comments: