2. Internal CSS

Internal CSS

Internal CSS adalah kode CSS yang ditulis di dalam tag <style> dan kode HTML dituliskan di bagian atas (header) file HTML. Internal CSS dapat digunakan untuk membuat tampilan pada satu halaman website dan tidak digunakan pada halaman website yang lain.

Cara ini akan sangat cocok dipakai untuk menciptakan halaman web dengan tampilan yang berbeda. Dengan kata lain, Internal CSS ini bisa dipakai untuk menciptakan tampilan yang unik, pada setiap halaman website.

Manfaat Internal CSS

  • Perubahan pada Internal CSS hanya berlaku pada satu halaman saja.
  • Anda tidak perlu melakukan upload beberapa file karena HTML dan CSS berada dalam satu file.
  • Class dan ID bisa digunakan oleh internal stylesheet.

Kekurangan Internal CSS

  • Tidak efisien apabila Anda ingin menggunakan CSS yang sama dalam beberapa file.
  • Membuat performa website lebih lemot. Sebab, CSS yang berbeda-beda akan mengakibatkan loading ulang setiap kali Anda ganti halaman website. 

Contoh Internal CSS

Berikut ini adalah contoh penempatan Internal CSS pada file HTML.

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Internal CSS</title>
  <!-- contoh internal css dalam tag head -->
  <style type="text/css">
    p{
      font-family: arial;
      line-height: 2.75em;
      font-size: 16px;
    }
    i { 
      font-family: arial;
      color: blue;
    }
  </style>
</head>

<body>
  <!-- contoh internal css dalam tag body -->
  <style type="text/css">
    h2 { 
      font-family: arial;
      color: #1B9CFC;
    }
  </style>
  <h2>Programming Web</h2>
</body>
</html>