Pelekatan gaya

CSS yang sudah ditulis tidak berpengaruh apa pun sebelum dilekatkan ke dokumen HTML. Topik ini membahas tiga cara pelekatan gaya, yaitu stylesheet eksternal melalui elemen link, style internal melalui elemen style, dan style inline melalui atribut style. Setiap cara dibahas beserta kelebihan, kekurangan, dan situasi yang wajar untuk menggunakannya. Setelah membaca topik ini, pemilihan cara pelekatan untuk sebuah proyek dapat diputuskan dengan alasan yang jelas.

Stylesheet eksternal dengan elemen link#

Stylesheet eksternal adalah berkas CSS tersendiri yang dilekatkan ke dokumen melalui elemen <link> pada bagian head. Atribut rel="stylesheet" menyatakan hubungan berkas tersebut dengan dokumen, sedangkan atribut href memuat jalur menuju berkasnya. Saat halaman dimuat, browser mengunduh berkas CSS itu lalu menerapkan seluruh aturannya. Berkas CSS umumnya diberi akhiran .css, misalnya style.css.

Contoh berikut terdiri atas dua berkas yang saling terhubung. Berkas beranda.html melekatkan style.css melalui satu elemen <link>, sedangkan style.css memuat aturan untuk kartu profil sederhana.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kartu profil</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <article class="kartu-profil">
    <h1>Dewi Lestari</h1>
    <p>Pengelola jadwal piket kelas.</p>
  </article>
</body>
</html>

/* Gaya untuk beranda.html */
body {
  font-family: sans-serif;
  background-color: #f1f5f9;
  margin: 0;
  padding: 24px;
}

.kartu-profil {
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 16px 20px;
  max-width: 320px;
}

.kartu-profil h1 {
  margin-top: 0;
  font-size: 24px;
}

Pemisahan berkas memberikan manfaat terbesar pada proyek dengan banyak halaman. Satu berkas CSS melayani semua halaman yang melekatkannya, sehingga perubahan tema cukup dilakukan pada satu tempat. Browser juga menyimpan berkas yang sudah diunduh di dalam cache, sehingga kunjungan berikutnya tidak mengulang pengunduhan. Kelemahannya, halaman memerlukan satu permintaan tambahan untuk mengunduh berkas gaya, dan dokumen yang dipindahkan sendirian akan tampil tanpa gaya apabila berkas CSS-nya tidak ikut ada.

Style internal dengan elemen style#

Style internal menaruh aturan CSS langsung di dalam dokumen yang sama melalui elemen <style>. Elemen ini ditempatkan pada bagian head, dan seluruh isi di antara tag pembuka serta tag penutupnya diperlakukan sebagai aturan CSS. Tidak ada pengunduhan berkas tambahan karena gaya ikut terbawa bersama dokumennya. Keutuhan satu berkas inilah keunggulan utama cara ini.

Contoh berikut menyatukan markah (markup) dan gaya jadwal piket dalam satu berkas:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Jadwal piket kelas</title>
  <style>
    body {
      font-family: sans-serif;
    }

    .piket th {
      background-color: #e2e8f0;
    }
  </style>
</head>
<body>
  <h1>Jadwal piket kelas</h1>
  <table class="piket">
    <tr><th>Hari</th><th>Petugas</th></tr>
    <tr><td>Senin</td><td>Ali dan Budi</td></tr>
    <tr><td>Selasa</td><td>Citra dan Dewi</td></tr>
  </table>
</body>
</html>

Apabila dokumen yang sama melekatkan stylesheet eksternal sekaligus gaya internal, kedua sumber itu bersaing seperti biasa dalam cascade. Aturan internal yang ditulis sesudah elemen link mengalahkan aturan eksternal yang berkonflik, selama bobot selector keduanya sama. Karena itu, letak elemen <style> relatif terhadap <link> perlu diputuskan secara sadar.

Cara ini wajar digunakan untuk halaman tunggal, halaman latihan, dan contoh yang dibagikan sebagai satu berkas utuh. Kekurangannya muncul ketika gaya yang sama dibutuhkan lebih dari satu halaman. Aturan harus disalin ke setiap dokumen, sehingga satu perubahan kecil menuntut penyuntingan di banyak tempat dan berisiko ada salinan yang terlewat.

Style inline dengan atribut style#

Style inline menempelkan deklarasi langsung pada elemen melalui atribut style. Nilai atributnya berupa satu atau beberapa deklarasi CSS yang dipisahkan tanda titik koma, tanpa selector dan tanpa kurung kurawal. Deklarasi semacam ini hanya berlaku untuk elemen yang memuat atribut tersebut, dan atribut style dapat ditulis pada hampir semua elemen HTML.

<p style="color: #b91c1c; font-weight: bold;">
  Peringatan ini tampil tebal dengan warna merah tua.
</p>

Kegunaan yang wajar muncul pada dua situasi. Pertama, percobaan cepat, karena nilai dapat diuji tanpa membuka berkas CSS terlebih dahulu. Kedua, nilai dinamis yang dihitung oleh program, misalnya posisi atau warna yang ditetapkan lewat skrip saat halaman berjalan. Di luar kedua situasi itu, gaya inline sebaiknya dihindari.

Kelemahan gaya inline terletak pada penggunaan ulang dan pemeliharaan. Satu deklarasi tidak dapat digunakan ulang untuk elemen lain, dan selector tidak tersedia sehingga keadaan interaktif seperti :hover mustahil ditulis. Markah juga bercampur dengan keputusan penyajian. Deklarasi inline menang atas aturan stylesheet di dalam cascade, sehingga mengganti deklarasi tersebut dari stylesheet menuntut penanda !important.

Memilih cara pelekatan yang tepat#

Ketiga cara pelekatan dapat hadir dalam satu proyek, tetapi salah satunya biasanya menjadi tulang punggung. Pilihan mengikuti jumlah halaman, kebutuhan penggunaan ulang, dan asal nilai gayanya. Tabel berikut merangkum perbandingannya.

Sebagai panduan praktis, proyek nyata menjadikan stylesheet eksternal sebagai cara utama. Style internal dipilih ketika keutuhan satu berkas lebih penting daripada penggunaan ulang, misalnya pada halaman contoh yang dikirim sebagai satu dokumen. Style inline disisakan untuk percobaan dan nilai yang datang dari program, bukan sebagai gaya utama proyek. Ketika proyek bertumbuh dari satu halaman menjadi banyak halaman, isi elemen <style> dipindahkan ke berkas CSS terpisah tanpa mengubah satu deklarasi pun.

Kesalahan umum#

Kesalahan pertama adalah jalur pada atribut href yang keliru sehingga berkas CSS tidak ditemukan. Browser tidak menampilkan pesan error yang mencolok, dan halaman tetap tampil, hanya saja tanpa gaya. Perbaikannya adalah mencocokkan jalur dan ejaan nama berkas, lalu memeriksa panel jaringan pada DevTools untuk memastikan berkas terunduh.

Kesalahan kedua adalah melupakan atribut rel="stylesheet". Tanpa atribut itu, browser tidak memperlakukan berkas yang ditunjuk sebagai stylesheet, sehingga seluruh aturannya tidak diterapkan. Gejalanya sama dengan jalur yang keliru, yaitu halaman tampil tanpa gaya, sehingga kedua penyebab ini diperiksa berpasangan.

Kesalahan ketiga adalah menumpuk gaya inline pada banyak elemen selama tahap percobaan, lalu membiarkannya begitu saja. Perubahan tema selanjutnya menuntut penyuntingan satu per satu, dan sebagian deklarasi mudah terlewat. Setelah percobaan selesai, deklarasi yang berulang dipindahkan ke stylesheet eksternal, dan elemen yang bersangkutan diberi atribut class.

Ringkasan#

• Stylesheet eksternal melekatkan berkas CSS melalui elemen <link> dan menjadi pilihan utama proyek nyata karena melayani banyak halaman dan tersimpan di cache.
• Style internal menaruh aturan di dalam elemen <style> pada dokumen yang sama dan cocok untuk halaman tunggal, latihan, serta contoh satu berkas.
• Style inline menaruh deklarasi pada atribut style dan disisakan untuk percobaan cepat serta nilai dinamis dari program.
• Pemilihan cara pelekatan menimbang jumlah halaman, kebutuhan penggunaan ulang, dan asal nilai gayanya.

Referensi#

• Elemen link — MDN — Dokumentasi resmi elemen link beserta atribut rel dan href untuk pelekatan stylesheet.
• Atribut global style — MDN — Dokumentasi resmi atribut style untuk deklarasi inline pada elemen.
• Learn CSS — web.dev — Kursus resmi Google yang membahas pelekatan gaya pada bagian pembukanya.