Menambahkan CSS ke HTML | Belajar CSS Dasar: Mempercantik Web | Mahir.dev | Mahir.dev Academy

Menambahkan CSS ke HTML | Belajar CSS Dasar: Mempercantik Web | Mahir.dev | Mahir.dev Academy

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"

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".

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.

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!