Home Tutorial Set Artikel Projects
Join Sekarang

Belajar CSS Dasar #2: Menautkan Kode CSS

Ditulis oleh Jajang Nurjaman | Diperbarui pada 13 November 2025

Memahami 3 Cara Menautkan CSS: Inline, Internal, dan External

CSS (Cascading Style Sheets) adalah bahasa yang kita gunakan untuk mengatur tampilan dan tata letak (visual) dari halaman web. Tanpa CSS, halaman web hanya akan menjadi teks hitam-putih yang polos.

Ada tiga cara utama untuk menerapkan aturan CSS ke dokumen HTML Anda. Memahami perbedaan, kelebihan, dan kekurangannya sangat penting untuk menjadi developer web yang efisien.

Inline CSS (Langsung di Tag HTML)

Inline CSS adalah metode menerapkan gaya langsung di dalam tag HTML menggunakan atribut style

  • Cara Kerja: Anda menambahkan atribut style="..." ke elemen HTML yang ingin Anda ubah. Di dalam tanda kutip, Anda menulis properti dan nilai CSS
  • Kelebihan: Sangat cepat untuk pengujian atau perbaikan kecil, Gaya ini memiliki prioritas tertinggi dan akan mengalahkan gaya Internal maupun External (kecuali jika ada properti !important)
  • Kekurangan: Sulit Dikelola, Bayangkan jika Anda memiliki 100 paragraf dan ingin mengubah warnanya; Anda harus mengedit 100 tag satu per satu, Mencampur Struktur dan Tampilan: Ini melanggar prinsip pemisahan (Separation of Concerns), di mana HTML harus fokus pada struktur dan CSS pada tampilan, Tidak Reusable: Gaya hanya berlaku untuk satu elemen tersebut.

 

Contoh Kode Inline CSS

Dalam contoh ini, <h1> akan berwarna biru dan paragraf <p> akan memiliki latar belakang kuning.

<!DOCTYPE html>
<html>
<body>

  <h1 style="color: blue; text-align: center;">
    Ini adalah Judul yang Biru dan Rata Tengah
  </h1>

  <p style="background-color: yellow; font-size: 16px;">
    Paragraf ini memiliki latar belakang kuning dan ukuran font 16px.
  </p>

</body>
</html>

 

Hasilnya :

Internal CSS (di Dalam Head HTML)

Internal CSS (atau Embedded CSS) adalah metode di mana Anda menempatkan semua kode CSS di dalam tag <style> yang diletakkan di dalam bagian <head> dokumen HTML.

  • Cara Kerja: Anda mendefinisikan semua aturan CSS Anda di satu tempat (di dalam <head>), dan aturan tersebut akan berlaku untuk semua elemen yang cocok di halaman tersebut.
  • Kelebihan dan Kekurangan: Internal CSS memiliki kelebihan khusus, yaitu ideal digunakan jika satu halaman spesifik di website Anda, seperti halaman "Kontak", memerlukan gaya yang sangat unik, karena aturannya mencakup satu halaman tersebut saja. Metode ini juga lebih rapi daripada Inline CSS karena memisahkan kode gaya dari body HTML, meskipun masih berada di file yang sama. Akan tetapikelemahan utamanya adalah tidak reusable; gaya ini hanya berlaku untuk satu file HTML tempat ia ditulis, sehingga jika Anda memiliki 10 halaman dengan gaya serupa, Anda terpaksa harus menyalin-tempel kode CSS yang sama di 10 file berbeda.

Contoh Kode Internal CSS

Perhatikan bagaimana tag <style> ditempatkan di dalam <head>.

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Internal CSS</title>
  
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
    }
    
    h1 {
      color: green;
      border-bottom: 2px solid green;
    }
    
    p {
      color: #333;
      line-height: 1.5;
    }
  </style>
  
</head>
<body>

  <h1>Halo, ini Judul Halaman</h1>
  <p>Paragraf ini akan mengikuti gaya yang didefinisikan di dalam tag style di atas.</p>
  <p>Paragraf ini juga akan mengikuti gaya yang sama.</p>

</body>
</html>

Hasilnya :




External CSS

External CSS adalah metode yang paling direkomendasikan dan paling umum digunakan dalam pengembangan web profesional.

  • Cara Kerja: Anda menulis semua kode CSS Anda di dalam file terpisah dengan ekstensi .css (contoh: style.css, main.css). Kemudian, Anda menghubungkan file CSS ini ke dokumen HTML Anda menggunakan tag <link> di dalam <head>.


  • Kelebihan: Keunggulan utamanya adalah sangat reusable, di mana satu file style.css dapat mengatur tampilan ratusan halaman HTML, yang juga membuatnya mudah dikelola; jika Anda ingin mengubah warna link di seluruh situs, Anda cukup mengedit satu baris di file tersebut. Metode ini juga menciptakan pemisahan yang bersih antara struktur konten (HTML) dan desain visual (CSS). Selain itu, ini sangat baik untuk performa (caching), karena browser pengunjung hanya perlu mengunduh file CSS satu kali; saat mereka pindah ke halaman lain, file tersebut sudah tersimpan (cache), membuat website memuat lebih cepat.

Contoh Kode External CSS

Anda akan memiliki dua file:

File 1: index.html

(Perhatikan tag <link> di dalam <head>)

<!DOCTYPE html>
<html>
<head>
  <title>Contoh External CSS</title>
  
  <link rel="stylesheet" href="style.css">
  
</head>
<body>

  <h1>Judul Ini Diatur oleh File CSS External</h1>
  <p>Paragraf ini juga diatur oleh file CSS yang sama.</p>
  <button class="tombol-biru">Klik Saya</button>

</body>

File 2: style.css

body {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    background-color: #ffffff;
}

h1 {
    color: navy;
    text-align: center;
}

p {
    font-size: 18px;
    color: #666;
}

.tombol-biru {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.tombol-biru:hover {
    background-color: #0056b3;
}

body {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    background-color: #ffffff;
}

h1 {
    color: navy;
    text-align: center;
}

p {
    font-size: 18px;
    color: #666;
}

.tombol-biru {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.tombol-biru:hover {
    background-color: #0056b3;
}


Hasilnya:



Catatan Penting tentang Prioritas (Cascade):

CSS berarti Cascading (Bertingkat/Berjenjang). Aturan dasarnya adalah:

Gaya Inline akan mengalahkan Gaya Internal, dan Gaya Internal akan mengalahkan Gaya External.

Jika Anda memiliki h1 { color: red; } di file style.css (External) tetapi Anda menulis <h1 style="color: blue;"> (Inline), judul itu akan berwarna biru.

Kutipan Motivasi

"Menguasai CSS ibarat belajar melukis. Awalnya mungkin terasa kaku dengan semua aturan, tetapi setiap properti yang Anda pelajari adalah kuas baru. Teruslah berlatih, dan Anda akan segera bisa menciptakan kanvas digital yang indah."
 

 

 

Sebelumnya Berikutnya