Tutorial CSS untuk Pemula: Mana yang didahulukan: Inline Style, Internal Style Sheet, atau Eksternal Style Sheet?

Halo gan. Di postingan sebelumnya, kita sudah membahas cara penggunaan selector CSS. Ternyata selector bisa kita kombinasikan agar elemen HTML yang ingin diubah tampilannya lebih spesifik.

Kali ini, kita akan bahas prioritas cara pemanggilan CSS, antara inline style, internal style sheet, atau eksternal style sheet, mana yang didahulukan. Style mana yang bakal terlihat di halaman webnya.

prioritas cara pemanggilan kode CSS

Urutan prioritas cara pemanggilan CSS

Urutan prioritas ini gunanya untuk mengatur cara pemanggilan CSS mana yang bakal diterapkan stylenya ke halaman web.

Kita langsung coba praktikkan.

Kita akan buat sebuah paragraf yang nantinya diberi style warna teks dengan cara inline style, internal style sheet, dan eksternal style sheet.. kita lihat mana yang bakal diterapkan ke halaman webnya.

Buat file prioritas-css.html.
<!DOCTYPE html>
<html>
  <head>
    <title> Prioritas cara pemanggilan CSS</title>
    <link rel="stylesheet" href="prioritas-css.css" />
    <style>
      p {
        color: green;
      }
    </style>
  </head>

  <body>
    <p style="color:blue;">Ane lagi belajar CSS di AneIqbal.. Ane lagi belajar CSS di AneIqbal.. Ane lagi belajar CSS di AneIqbal.. Ane lagi belajar CSS di AneIqbal.. Ane lagi belajar CSS di AneIqbal.. Ane lagi belajar CSS di AneIqbal..</p>
  </body>
</html>

Lalu, file CSS nya: prioritas-css.css.
p {
  color: red;
}

Kita bisa lihat dari kode di atas:

..di eksternal style sheet (file prioritas-css.css) kita beri style warna teksnya merah.
..di internal style sheet (kode CSS di tag <style>) kita beri style warna teksnya hijau.
..di inline style (kode CSS di tag <p> atribut style) kita beri style warna teksnya biru.

Warna apa yang bakal diterapkan?

Dan ini dia hasilnya:

prioritas cara pemanggilan kode css

Hasilnya, warna teksnya biru. Berarti cara inline style paling kuat di antara ke-3 cara di atas.

Oke, kita coba lagi. Kali ini kita hapus cara inline style-nya, mana yang lebih kuat antara internal style sheet dan eksternal style sheet.

Hapus atribut style di tag <p> pada kode html di atas menjadi seperti ini:
<!DOCTYPE html>
<html>
  <head>
    <title> Prioritas cara pemanggilan CSS</title>
    <link rel="stylesheet" href="prioritas-css.css" />
    <style>
      p {
        color: green;
      }
    </style>
  </head>

  <body>
    <p>Ane lagi belajar CSS di AneIqbal.. Ane lagi belajar CSS di AneIqbal.. Ane lagi belajar CSS di AneIqbal.. Ane lagi belajar CSS di AneIqbal.. Ane lagi belajar CSS di AneIqbal.. Ane lagi belajar CSS di AneIqbal..</p>
  </body>
</html>

Maka, hasilnya adalah.

prioritas cara pemanggilan kode css

Hasilnya ternyata warna hijau, karena posisi internal style sheet di bawah eksternal style sheet di dalam tag <head>.

prioritas cara pemanggilan kode css

Sekarang, kita coba balik posisinya: eksternal style sheet jadi dibawah internal style sheet.

prioritas cara pemanggilan kode css

Ubah kodenya jadi seperti ini:
<!DOCTYPE html>
<html>
  <head>
    <title> Prioritas cara pemanggilan CSS</title>
    <style>
      p {
        color: green;
      }
    </style>
    <link rel="stylesheet" href="prioritas-css.css" />
  </head>

  <body>
    <p>Ane lagi belajar CSS di AneIqbal.. Ane lagi belajar CSS di AneIqbal.. Ane lagi belajar CSS di AneIqbal.. Ane lagi belajar CSS di AneIqbal.. Ane lagi belajar CSS di AneIqbal.. Ane lagi belajar CSS di AneIqbal..</p>
  </body>
</html>

Maka hasilnya adalah.

prioritas cara pemanggilan kode css

Ternyata wara teksnya merah.

Itu artinya, inline style sheet dan eksternal style sheet sama kuatnya, tergantung posisinya, yang dibawah adalah yang paling kuat.

Jadi, kesimpulannya

Inline style sheet lebih kuat pengaruhnya dari internal style sheet dan eksternal style sheet.

Sedangkan..

..internal style sheet dan ekternal style sheet sama kuatnya, tergantung posisinya di dalam tag <head>.

Walaupun inline style sheet paling kuat, tetapi cara ini tidak disarankan, karena kode HTML akan terlihat tidak rapi. Bisa-bisa kita pusing melihat kodenya.

Cara yang disarankan adalah eksternal style sheet, karena kode CSS terpisah dari kode HTML. Lebih rapi kodenya.

Selesai sudah pembahasan kita kali ini tentang prioritas cara pemanggilan CSS. Pembahasan tadi adalah prioritas yang dilihat dari sumber kode CSSnya. Ada juga prioritas yang dilihat dari kode CSSnya.



Tag : Tutorial CSS
0 Komentar untuk "Tutorial CSS untuk Pemula: Mana yang didahulukan: Inline Style, Internal Style Sheet, atau Eksternal Style Sheet?"