⌘K

Command Palette

Search for a command to run...

Daftar

Menambahkan CSS ke HTML

Pelajari tiga metode untuk menerapkan style CSS ke HTML: External CSS (paling direkomendasikan), Internal CSS, dan Inline CSS. Pahami kapan menggunakan masing-masing.

Di sini kita akan membahas tiga metode utama untuk menyisipkan kode CSS ke dalam dokumen HTML.

Nempelin CSS ke HTML: Ini Dia 3 Jurus Andalannya!

Udah ngerti kan gimana cara nulis "perintah" CSS pake selektor, properti, dan nilai? Nah, sekarang pertanyaannya, gimana caranya biar perintah CSS itu bisa "nyambung" dan ngasih efek ke elemen-elemen HTML di halaman web kita?

Ada tiga cara utama buat nambahin atau nyisipin CSS ke dokumen HTML-mu. Masing-masing punya kelebihan, kekurangan, dan waktu yang pas buat dipake. Yuk, kita kenalan sama ketiganya!

1. External CSS (CSS Eksternal) - Jurus Paling Jago!

Ini adalah cara yang paling umum, paling rapi, dan paling direkomendasikan, apalagi buat website yang punya lebih dari satu halaman atau style-nya udah kompleks.

  • Gimana Caranya?

    1. Kamu nulis semua aturan CSS-mu di file terpisah yang punya akhiran .css (misalnya, style.css, tema-utama.css, layout.css).
    2. Terus, di dalem tag <head> setiap file HTML yang mau pake style itu, kamu tambahin tag <link> buat ngehubunginnya.

  • Contoh:

    Anggap kamu punya file gaya-saya.css dengan isi:

    css
    /* File: gaya-saya.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}
 
h1 {
    color: steelblue;
}
 
p {
    color: #333;
}

    Terus, di file HTML-mu (misalnya index.html), kamu hubungin kayak gini:

    html
    <!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Halaman dengan CSS Eksternal</title>
    <link rel="stylesheet" href="gaya-saya.css"> <!-- Ini dia penghubungnya! -->
</head>
<body>
    <h1>Halo Dunia CSS!</h1>
    <p>Ini paragraf yang di-style pake file CSS eksternal.</p>
</body>
</html>
    • rel="stylesheet": Ngasih tau browser kalau file yang di-link itu adalah stylesheet.
    • href="gaya-saya.css": Path (alamat) ke file CSS-mu. Pastikan path-nya bener ya! Kalau file CSS-nya ada di folder lain (misal, folder css), path-nya jadi href="css/gaya-saya.css".

  • Kelebihan External CSS:

    • Pemisahan yang Jelas: Kode HTML (struktur) dan kode CSS (tampilan) jadi bener-bener terpisah. Ini bikin kode lebih bersih, rapi, dan gampang di-manage.
    • Reusable (Bisa Dipake Ulang): Satu file CSS bisa dipake buat ngasih style ke banyak halaman HTML sekaligus. Kalau mau ganti tampilan seluruh website, cukup ubah satu file CSS itu aja. Hemat waktu banget!
    • Caching Browser: Browser bisa nyimpen (cache) file CSS eksternal. Jadi, pas pengunjung pindah ke halaman lain yang pake file CSS yang sama, browser gak perlu download ulang file CSS-nya, halaman jadi loading lebih cepet.
    • Mudah Dikerjakan Tim: Developer yang fokus ke HTML bisa kerja tanpa keganggu sama kode CSS, begitu juga sebaliknya.

  • Kapan Dipake?

    • Hampir selalu ini cara terbaik, terutama buat website yang punya lebih dari satu halaman atau style yang kompleks.

2. Internal CSS (CSS Internal / Embedded) - Jurus Situasional

Cara kedua adalah dengan nulis kode CSS langsung di dalem file HTML-nya, tapi tetep di bagian <head>, pake tag <style>.

  • Gimana Caranya?

    1. Di dalem tag <head> file HTML-mu, tambahin tag <style>.
    2. Tulis semua aturan CSS-mu di antara tag <style> dan </style>.

  • Contoh:

    html
    <!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Halaman dengan CSS Internal</title>
    <style>
        /* Kode CSS ditulis langsung di sini */
        body {
            font-family: Verdana, sans-serif;
            background-color: lightyellow;
        }
 
        h1 {
            color: green;
            border-bottom: 2px solid darkgreen;
        }
    </style>
</head>
<body>
    <h1>Ini Judul dengan Style Internal</h1>
    <p>Paragraf ini juga kena efek style body dari CSS internal.</p>
</body>
</html>

  • Kelebihan Internal CSS:

    • Praktis untuk Satu Halaman: Kalau kamu cuma punya satu halaman HTML, atau kalau ada style yang bener-bener unik dan cuma berlaku buat satu halaman itu aja, internal CSS bisa jadi pilihan yang cepet.
    • Gak Perlu File Tambahan: Semua ada di satu file HTML.

  • Kekurangan Internal CSS:

    • Gak Reusable antar Halaman: Style-nya cuma berlaku buat halaman HTML tempat dia ditulis. Kalau mau style yang sama di halaman lain, kamu harus copy-paste kode <style>-nya, ini gak efisien.
    • Bikin File HTML Jadi "Gendut": Kalau kode CSS-nya banyak, file HTML-mu jadi keliatan rame dan panjang.
    • Caching Kurang Optimal: Browser harus download ulang kode CSS tiap kali halaman itu dibuka (kecuali halaman HTML-nya sendiri yang di-cache).

  • Kapan Dipake?

    • Buat style yang sangat spesifik dan cuma berlaku untuk satu halaman HTML tunggal.
    • Kadang dipake buat ngetes atau prototyping cepet sebelum dipindahin ke file eksternal.
    • Beberapa layanan email marketing kadang nyuruh pake internal CSS buat template email karena banyak email client gak ngedukung CSS eksternal.

3. Inline CSS (CSS Sejajar) - Jurus "Terpaksa" atau Sangat Spesifik

Ini cara yang paling "langsung" tapi juga paling tidak direkomendasikan untuk styling utama. Kamu nulis style CSS langsung di atribut style pada elemen HTML yang mau diubah.

  • Gimana Caranya?

    1. Di tag HTML yang mau kamu style, tambahin atribut style.
    2. Nilai dari atribut style ini adalah deklarasi CSS (pasangan properti: nilai;), tanpa selektor dan tanpa kurung kurawal. Kalau ada beberapa deklarasi, pisahin pake titik koma.

  • Contoh:

    html
    <!DOCTYPE html>
<html lang="id">
<head>
    <title>Halaman dengan Inline CSS</title>
</head>
<body>
    <h1 style="color: purple; text-decoration: underline;">Judul dengan Inline CSS</h1>
    <p style="font-size: 18px; background-color: #eee; padding: 10px;">
        Paragraf ini punya style inline yang beda lagi.
    </p>
    <p>Paragraf ini gak kena inline CSS, jadi tampilannya standar (atau ngikutin CSS eksternal/internal kalau ada).</p>
</body>
</html>

  • Kelebihan Inline CSS:

    • Sangat Spesifik: Style-nya cuma berlaku buat satu elemen itu aja.
    • Prioritas Paling Tinggi (biasanya): Inline style punya spesifisitas yang sangat tinggi, jadi dia bisa "ngalahin" style dari CSS eksternal atau internal (kecuali kalau ada !important). Ini kadang berguna buat override cepet.

  • Kekurangan Inline CSS:

    • SANGAT TIDAK RAPI: Bikin kode HTML jadi kotor dan susah dibaca karena nyampur sama styling.
    • SANGAT SUSAH DI-MAINTAIN: Bayangin kalau kamu punya banyak elemen yang mau di-style sama, terus kamu mau ganti satu warna aja. Harus ubah satu-satu di setiap atribut style! Mimpi buruk!
    • Gak Reusable Sama Sekali: Style-nya cuma buat satu elemen itu.
    • Melanggar Prinsip Pemisahan Concerns: Struktur dan presentasi jadi campur aduk.

  • Kapan (Terpaksa) Dipake?

    • Buat override style yang sangat spesifik dan cuma buat satu elemen unik yang gak bisa dijangkau dengan cara lain (kasus yang jarang banget).
    • Kadang dipake sama JavaScript buat ngubah style elemen secara dinamis (walaupun ada cara yang lebih baik pake class).
    • Buat styling email HTML (karena banyak email client punya dukungan CSS yang terbatas).
    • Intinya: HINDARI sebisa mungkin untuk styling website secara umum!

Mana yang Harus Dipilih? Prioritas dan "Cascading"

Nah, kalau kamu pake ketiga cara ini sekaligus di halaman yang sama, style mana yang bakal dipake sama browser? Di sinilah konsep "Cascading" (Mengalir/Bertingkat) di CSS mulai berperan.

Secara umum, urutan prioritasnya (dari yang paling kuat/menang ke yang paling lemah) adalah:

  1. Inline CSS (style di atribut style elemen) - Paling kuat.
  2. Internal CSS (style di tag <style> di <head>) - Lebih kuat dari eksternal jika didefinisikan setelah link eksternal atau selectornya lebih spesifik.
  3. External CSS (style di file .css yang di-link) - Jadi dasar.
  4. Browser Default Styles - Style bawaan browser kalau gak ada CSS dari kita.

Ada juga faktor lain kayak spesifisitas selector (seberapa spesifik selektormu nargetin elemen) dan penggunaan !important (yang sebaiknya dihindari kalau gak kepepet banget). Ini bakal kita bahas lebih detail di materi selanjutnya soal "Spesifisitas dan Inheritance".

Untuk sekarang, ingat aja:

  • Usahakan selalu pake External CSS buat sebagian besar styling-mu.
  • Internal CSS boleh dipake buat kasus yang sangat spesifik per halaman.
  • Inline CSS sebisa mungkin dihindari, kecuali buat situasi yang sangat-sangat khusus.

Dengan ngerti tiga cara ini, kamu jadi punya pilihan buat nerapin style sesuai kebutuhan. Tapi, inget ya, External CSS itu "jagoan utama" yang bikin hidupmu sebagai web developer jadi lebih mudah dan teratur.

Yuk, lanjut belajar lebih dalem soal "Selektor CSS" biar makin jago milih elemen mana yang mau kita dandanin!

Kuis Cara Menambahkan CSS ke HTML

Pertanyaan 1 dari 4

Metode mana yang paling direkomendasikan untuk menambahkan CSS ke sebuah website yang memiliki banyak halaman dan membutuhkan konsistensi tampilan?