External dan Internal CSS: Penjelasan link dan style

External CSS dalam satu baris

External CSS adalah file .css yang terpisah. Kamu menghubungkannya dari <head> setiap halaman yang membutuhkannya:

<head>
  <link rel="stylesheet" href="styles.css">
</head>

File itu sendiri berisi aturan CSS biasa, tanpa tag HTML di sekelilingnya:

/* styles.css */
body {
  font-family: system-ui, sans-serif;
  color: #111827;
}

.card {
  border: 2px solid #2563eb;
  border-radius: 8px;
  padding: 12px 16px;
}

Pratinjau di bawah tidak punya file kedua untuk dimuat, jadi CSS yang sama ditaruh di elemen <style>. Itulah internal CSS, dan hasilnya tampil persis seperti file yang dihubungkan:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Card</title>
  <!-- On a real site: <link rel="stylesheet" href="styles.css"> -->
  <style>
    body {
      font-family: system-ui, sans-serif;
      color: #111827;
    }

    .card {
      border: 2px solid #2563eb;
      border-radius: 8px;
      padding: 12px 16px;
    }
  </style>
</head>
<body>
  <div class="card">One stylesheet, every page.</div>
</body>
</html>

Internal CSS: elemen style

Internal CSS (disebut juga embedded CSS) adalah elemen <style> di dalam halaman. Taruh di <head> supaya style-nya sudah diketahui sebelum body ditampilkan. Internal CSS berlaku untuk seluruh halaman, dan aturannya memakai selector, sesuatu yang tidak bisa dilakukan atribut style inline.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Internal CSS</title>
  <style>
    h1 { color: #2563eb; }
    .tag {
      background: #e5e7eb;
      padding: 2px 8px;
      border-radius: 999px;
    }
    .tag:hover { background: #f59e0b; }
  </style>
</head>
<body>
  <h1>Internal CSS</h1>
  <span class="tag">html</span>
  <span class="tag">css</span>
</body>
</html>

Arahkan kursor ke sebuah tag: :hover berfungsi di sini karena ini aturan sungguhan. Cara ketiga, atribut style, dibahas di halaman inline CSS.

Internal vs external CSS

Specificity keduanya sama: aturan di elemen <style> dan aturan yang sama di file yang dihubungkan punya bobot yang persis sama. Saat seri, aturan yang muncul belakangan di dokumen yang menang.

Urutan: stylesheet yang belakangan menang

Stylesheet dibaca sesuai urutan dokumen, baik <link> maupun <style>. Untuk dua aturan dengan specificity yang sama, yang belakangan yang menang. Dua blok <style> di bawah ini mewakili file yang dihubungkan, diikuti penimpaan di tingkat halaman:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Order</title>
  <style>
    /* first: think of this as styles.css */
    .btn { background: #2563eb; color: white; padding: 8px 14px; border: 0; }
  </style>
  <style>
    /* second: a page override, same selector */
    .btn { background: #16a34a; }
  </style>
</head>
<body>
  <button class="btn">Green: the later rule wins</button>
</body>
</html>

Tombolnya tetap memakai padding dan teks putih dari aturan pertama dan hanya mengambil background dari aturan kedua. Itulah sebabnya stylesheet milik situs ditaruh setelah stylesheet framework: <link> library-nya dulu, lalu milikmu.

Path file di href

href pada <link> adalah URL, yang dihitung dari lokasi file HTML.

Untuk situs yang halamannya berada di kedalaman folder berbeda-beda, bentuk relatif terhadap root (/css/styles.css) membuat satu path berfungsi di setiap halaman.

Stylesheet untuk cetak dan media lain

Atribut media membatasi stylesheet hanya untuk kondisi yang cocok. <link> dan <style> sama-sama menerimanya:

<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="wide.css" media="(min-width: 900px)">

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Media</title>
  <style>
    .banner { background: #2563eb; color: white; padding: 12px; }
  </style>
  <style media="print">
    /* only when printing: hide the banner */
    .banner { display: none; }
  </style>
</head>
<body>
  <div class="banner">Visible on screen, hidden when printed.</div>
  <p>The article text prints normally.</p>
</body>
</html>

Pratinjaunya adalah layar, jadi banner-nya tampil. Di halaman sungguhan, banner itu hilang dari hasil cetak, dan di DevTools kamu bisa melihat hal yang sama dengan mengemulasikan media type print (panel Rendering).

Kesalahan umum

• Path yang salah. Salah ketik di href tidak memuat apa-apa, dan halaman tampil tanpa style. Buka DevTools, tab Network, lalu cari 404 pada file .css.
• Lupa rel="stylesheet". Tanpanya, <link href="styles.css"> tidak memuat stylesheet.
• HTML di dalam file .css. File .css hanya berisi aturan. Tag <style> di dalamnya bukan CSS yang valid dan merusak aturan di sebelahnya.
• Menaruh stylesheet-mu sebelum milik framework. Dengan specificity yang sama, file yang belakangan yang menang, jadi hubungkan CSS milikmu paling akhir.
• Melihat versi lama. Browser menyimpan stylesheet di cache. Lakukan hard refresh, atau tambahkan versi ke URL (styles.css?v=2) saat kamu deploy perubahan.