Cara Menggunakan CSS

Tanpa CSS, website kamu hanya akan berisi teks dan gambar yang tersusun kaku dari atas ke bawah. Ibarat rumah, HTML adalah fondasi dan batanya, sedangkan CSS adalah cat, dekorasi, dan tata letaknya.

1. Penjelasan Konsep

Ada tiga cara utama untuk menyisipkan CSS ke dalam dokumen HTML. Masing-masing punya kegunaan dan "tempat" tersendiri:

Inline CSS: Kode CSS ditulis langsung di dalam atribut style pada elemen HTML.
Internal CSS: Kode CSS ditulis di dalam tag <style> yang biasanya diletakkan di bagian <head> dokumen HTML.
External CSS: Kode CSS ditulis di file terpisah (berformat .css) dan dihubungkan menggunakan tag <link>. Ini adalah metode yang paling direkomendasikan.

2. Contoh Kode

Mari kita lihat bagaimana ketiga cara ini diimplementasikan dalam satu contoh sederhana.

Struktur Folder (Silahkan buat project baru):

index.html

style.css

Isi file index.html:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Belajar Menyisipkan CSS</title>
    
    <link rel="stylesheet" href="style.css">

    <style>
        h2 {
            color: darkblue;
            text-decoration: underline;
        }
    </style>
</head>
<body>

    <h1>Halo, Mahasiswa!</h1>
    <h2>Ini menggunakan Internal CSS</h2>
    
    <p style="color: red; font-weight: bold;">
        Paragraf ini berwarna merah karena menggunakan Inline CSS.
    </p>

    <div class="box">
        Ini diatur lewat External CSS.
    </div>

</body>
</html>

Isi file style.css:

/* File External CSS */
body {
    background-color: #f4f4f4;
    font-family: Arial, sans-serif;
}

.box {
    background-color: white;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
}

Sekarang coba jalankan index.html, bagaimana output nya ?

3. Penjelasan Kode

External CSS (<link rel="stylesheet" href="style.css">): Baris ini memberi tahu browser untuk mengambil aturan desain dari file bernama style.css. Cara ini sangat efisien karena kamu bisa menggunakan satu file CSS untuk banyak halaman HTML sekaligus.
Internal CSS (<style>): Kamu bisa melihat tag ini di dalam <head>. Semua elemen <h2> di halaman ini akan otomatis berwarna biru tua dan bergaris bawah. Ini cocok jika kamu hanya ingin mengatur gaya untuk satu halaman spesifik saja.
Inline CSS (style="..."): Kita langsung menaruh properti CSS di dalam tag <p>. Ini bersifat sangat spesifik dan akan menimpa aturan CSS lainnya (Internal maupun External).

4. Best Practice

Prioritaskan External CSS: Selalu gunakan file .css terpisah. Ini membuat kode HTML kamu bersih (tidak berantakan) dan memudahkan maintenance di masa depan. Bayangkan kalau kamu punya 100 halaman web dan ingin ganti warna tema, kalau pakai External, kamu cuma butuh edit 1 file saja.
Gunakan Inline CSS hanya untuk keadaan darurat: Inline CSS sangat sulit dikelola jika website sudah besar. Gunakan hanya jika kamu perlu melakukan pengujian cepat atau jika ada elemen yang benar-benar unik dan tidak bisa diatur lewat class.
Perhatikan Penulisan: CSS itu sensitif terhadap simbol. Pastikan setiap properti diakhiri dengan titik koma (;) dan selector dibuka/ditutup dengan kurung kurawal ({ }).

Cara Menggunakan CSS

1. Penjelasan Konsep

2. Contoh Kode

3. Penjelasan Kode

4. Best Practice

On this page