Cara Memanggil CSS di HTML dan Urutan Prioritas

Untuk memanggil CSS di HTML, bisa kita lakukan dengan 3 cara. Eksternal CSS, Internal CSS, dan Inline CSS. Cari tahu selengkapnya di sini!

Gambar Thumbnail : Cara Memanggil CSS di HTML

Untuk memanggil CSS di HTML, bisa kita lakukan dengan 3 cara.

Eksternal CSS
Internal CSS
Inline CSS

Pada artikel ini, kita akan belajar ketiga cara tersebut di file HTML yang kita buat.

1. Eksternal CSS

Eksternal CSS adalah teknik menuliskan kode CSS di file terpisah yaitu dalam file ber-ekstensi .css. Kemudian kita panggil atau import file CSS ke kode HTML.

Pertama : Buat File CSS baru dan letakan di folder yang sama dengan file HTML. Contoh : style.css

Kedua : Ketik kode berikut di dalam tag <head>

<link href="style.css" rel="stylesheet" type="text/css" />

Keterangan : href="style.css" adalah atribut untuk mengimport file CSS. Sesuaikan dengan nama file yang Anda buat.

External CSS dapat digunakan untuk memberikan gaya atau style ke banyak file HTML dengan memanggilnya di setiap file.

2. Internal CSS

Internal CSS adalah penulisan style CSS di dalam file HTML. Ditulis di dalam tag <style> dan diletakan di dalam tag <head>.

Internal CSS hanya memberikan gaya atau style pada elemen di halaman HTML tersebut. Halaman lain tidak akan terpengaruh.

Contoh Internal CSS:

<!DOCTYPE html>
<html>
  <head>
    <!--Internal CSS-->
    <style>
      body {
        background-color: whitesmoke;
      }

      h1 {
        color: crimson;
        margin-left: 10px;
        text-align: center;
      }
    </style>
    <!--Akhir Internal CSS-->
  </head>
  <body>
    <h1>One Tekno - Blog Komputer Teknologi</h1>
    <p>Ini adalah paragraf.</p>
  </body>
</html>

3. Inline CSS

Inline CSS digunakan untuk memberi style pada sebuah elemen dengan langsung menuliskannya di dalam tag elemennya.

Misalkan kita hendak membuat elemen heading 1 (h1) menjadi align center atau rata tengah.

Kita bisa lakukan seperti ini:

<h1 style="text-align: center; font-size: 14px">One Tekno - Blog Komputer Teknologi</h1>

Keterangan : style="text-align: center; font-size: 14px" ini adalah penulisan inline CSS. Masukkan semua style element di dalam tanda petik dan gunakan titik koma untuk memisahkan masing-masing atribut.

Perlu Anda ketahui, Inline CSS pada praktiknya kurang direkomendasikan. Hal ini karena dapat membuat loading sebuah website menjadi lebih lambat karena Inline CSS membuat ukuran halaman menjadi lebih besar.

Jadi gunakan dengan bijak!

# Urutan Prioritas CSS

Terdapat urutan prioritas dalam pemanggilan style CSS. Nomor satu adalah prioritas tertinggi.

Inline CSS
Internal dan External CSS
Browser default style

Penjelasan :

#1 Inline CSS menempati prioritas tertinggi. Jika terdapat inline CSS, maka style elemen pada Internal, external, dan browser default akan diabaikan.

#2 Selanjutnya jika tidak ada inline CSS, maka Internal dan External CSS yang akan digunakan dan style browser default akan diabaikan.

#3 Kemudian jika tidak ada inline, internal, maupun external CSS, maka style browser default akan digunakan.

Internal dan External memiliki posisi prioritas yang sejajar. Sehingga apabila ada dua style untuk elemen yang sama, style yang terakhir ditentukan akan digunakan.

Sebagai contoh :

Saya mengatur style untuk elemen H1 melalui internal CSS dan External CSS.

Pertama saya deklarasikan Internal CSS.

    <!-- Internal CSS-->
    <style>
      h1 {
        color: crimson;
        margin-left: 10px;
        text-align: center;
      }
    </style>

Lalu saya buat file style.css dan saya tentukan style untuk H1.

      h1 {
        color: blue;
        margin-left: 10px;
        text-align: center;
      }

Kemudian saya panggil external CSS setelah Internal CSS.

    <!-- Internal CSS-->
    <style>
      h1 {
        color: crimson;
        margin-left: 10px;
        text-align: center;
      }
    </style>
    
    <!-- External CSS-->
    <link href="style.css" rel="stylesheet" type="text/css" />

Dan hasilnya elemen H1 akan memiliki style color blue. Karena External CSS dipanggil setelah Internal CSS.

Begitu juga sebaliknya. Anda bisa mencobanya sendiri agar bisa lebih memahaminya.

Intinya : Jika Anda mengatur style untuk elemen yang sama dua kali atau lebih melalui internal atau eksternal CSS, maka style yang terakhir ditulis akan digunakan.

Kesimpulan

Jadi Anda dapat mengatur style untuk elemen HTML Anda melalui 3 cara, Eksternal CSS, Internal CSS, dan Inline CSS. Inline memiliki prioritas tertinggi. Meskipun terdapat internal atau eksternal CSS, inline CSS lah yang akan digunakan.

No Comment