Tutorial CSS / Menerapkan CSS: Inline, Internal, dan Eksternal

Anda dapat menerapkan CSS melalui atribut style pada elemen, elemen style di dokumen HTML, atau stylesheet eksternal yang ditautkan. Stylesheet eksternal biasanya lebih mudah dirawat di beberapa halaman, sementara metode lainnya cocok untuk penggunaan yang lebih kecil dan spesifik.

Bandingkan tiga cara untuk menerapkan CSS

Ketiga metode menerapkan CSS. Aturan internal dan eksternal biasa bersaing sesuai dengan kaskade, termasuk selektor dan urutan sumber mereka; file eksternal tidak secara inheren lebih lemah. Deklarasi inline biasanya lebih diutamakan daripada deklarasi stylesheet penulis biasa, tetapi kondisi seperti !important mengubah perbandingan itu. Untuk detail lebih lanjut, lihat Pewarisan, Spesifisitas, dan Kaskade CSS.

Tulis gaya inline dan internal

Dalam gaya inline, Anda menulis deklarasi di dalam atribut style dari elemen yang ingin Anda hias. Tidak ada selektor atau kurung luar yang disertakan. Kode berikut menentukan warna dan latar belakang hanya untuk satu teks panduan.

<p style="color: #087f5b; background-color: #e9f7ef;">
  We open at 9 a.m. every day.
</p>

Dalam lembar gaya internal, aturan yang mencakup selektor dan kurung ditulis di elemen style dalam head. Beberapa kalimat dengan kelas yang sama dapat dihias dengan satu aturan. Dalam contoh di bawah, nilai kelas HTML adalah notice dan selektor CSS adalah .notice.

<head>
  <style>
    .notice {
      color: #087f5b;
      background-color: #e9f7ef;
    }
  </style>
</head>
<body>
  <p class="notice">We open at 9 a.m. every day.</p>
</body>

Kedua contoh adalah potongan HTML untuk membandingkan di mana mereka ditulis. Saat mengubah metode dalam latihan ini, hapus semua deklarasi properti yang sama yang Anda masukkan dengan metode sebelumnya. Membiarkan beberapa metode sekaligus membuat sulit untuk membedakan antara kegagalan koneksi dan konflik aturan.

Tautkan stylesheet eksternal

Buat folder garden kosong dan simpan tiga file berikut: File CSS hanya berisi CSS dan tidak menyertakan tag <style>. Kedua file HTML menautkan ke style.css di folder yang sama.

garden/
├─ index.html
├─ visit.html
└─ style.css

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Small Garden</h1>
  <p class="notice">We open at 9 a.m. every day.</p>
  <a href="visit.html">View visitor information</a>
</body>
</html>

visit.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Visitor Information</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Visitor Information</h1>
  <p class="notice">Bring a water bottle and comfortable shoes.</p>
  <a href="index.html">Return to the garden introduction</a>
</body>
</html>

style.css

body {
  margin: 24px;
  font-family: sans-serif;
  line-height: 1.7;
}
h1 { color: #087f5b; }
.notice {
  padding: 16px;
  border: 1px solid #087f5b;
  background-color: #e9f7ef;
}

rel="stylesheet" berarti file yang terhubung adalah lembar gaya, dan href="style.css" adalah lokasi file yang akan dibaca. Dalam dokumen HTML5, tidak perlu menulis type="text/css" secara terpisah dalam koneksi CSS biasa. Latihan ini, yang membuka file lokal secara langsung, tidak memerlukan server atau pustaka tambahan.

Saat Anda membuka index.html di browser Anda, Anda akan melihat judul berwarna hijau dan kotak informasi yang terang. Klik “View visitor information” (lihat informasi pengunjung) untuk pergi ke visit.html, dan meskipun isinya berbeda, warna judul dan bentuk kotak informasi tetap sama. Jika Anda mengubah warna judul style.css menjadi #1d4ed8 dan kemudian memuat ulang kedua halaman, kedua judul akan berubah menjadi biru. Inilah keuntungan menggunakan file yang sama.

Pilih jalur untuk struktur folder

Jalur di bawah ini dibaca berdasarkan lokasi dokumen HTML. Seperti pada contoh, premisnya adalah dokumen biasa yang URL dasarnya belum diganti dengan elemen base. Jika Anda memindahkan file CSS, Anda harus mengubah tidak hanya nama file tetapi juga href.

garden/
├─ pages/
│  └─ index.html
└─ css/
   └─ style.css

Untuk pengaturan folder terakhir, tulis <link rel="stylesheet" href="../css/style.css"> di pages/index.html. Segmen ../ naik satu direktori. Jalur web menggunakan garis miring ke depan. Garis miring di awal, seperti di /css/style.css, diselesaikan dari root situs dan memiliki makna berbeda dari jalur relatif file lokal ini. Lihat MDN: Memulai.

Diagnosis masalah pemuatan, pencocokan, dan kaskade

1. Pertama, periksa koneksi file. Pastikan ekstensi tidak disimpan sebagai .css.txt dan bahwa href serta penempatan folder sebenarnya sesuai. Periksa juga huruf besar/kecil nama berkas; pada server yang membedakannya, nama yang berbeda dapat menggagalkan pemuatan. Jika halaman dibuka di server web, Anda dapat memeriksa permintaan dan respons CSS di Network pada Developer Tools. File lokal mungkin tidak menampilkan kode status HTTP yang sama.
2. Periksa apakah selektor cocok dengan elemen yang benar. Jika HTML menggunakan class="notice", tetapi .notcie ditulis di CSS, pemberitahuan tidak akan berubah meskipun file dibaca secara normal. Di Developer Tools, lihat nama kelas sebenarnya di bawah Elements dan cari aturan yang sesuai di panel Styles.
3. Periksa apakah aturan telah ditimpa. Jika deklarasi warna yang berbeda menang kemudian, deklarasi asli mungkin muncul dicoret di Styles. Harap periksa aturan penerapan akhir secara terpisah dari masalah dengan file CSS yang hilang.

Untuk memeriksa apakah stylesheet dimuat, tambahkan sementara body { background-color: #fff4cc; } di akhirnya dan segarkan. Halaman kuning menegaskan bahwa file terhubung. Lalu periksa apakah selektor notice cocok dan apakah deklarasi lain menang. Hapus aturan sementara setelahnya. !important tidak bisa memperbaiki file yang hilang atau selektor yang salah eja. Untuk detail lebih lanjut, lihat Periksa CSS dengan DevTools: Styles dan Computed.