Tutorial CSS #2 — Cara Memasang CSS ke HTML: Inline, Internal, dan External CSS

Pada artikel sebelumnya, kita sudah mengenal apa itu CSS, bagaimana perkembangannya, serta bagaimana CSS digunakan untuk mengatur tampilan halaman web.

Namun, memahami CSS saja belum cukup. Agar aturan CSS dapat memengaruhi halaman HTML, kita perlu mengetahui bagaimana cara menghubungkan CSS dengan HTML.

Dalam CSS, terdapat tiga cara utama untuk menambahkan aturan CSS ke dokumen HTML, yaitu Inline CSS, Internal CSS, dan External CSS.

Ketiganya dapat menghasilkan tampilan yang sama, tetapi memiliki cara penggunaan dan tujuan yang berbeda.

📌 Hubungan HTML dan CSS

Sebelum masuk ke contoh, mari sederhanakan terlebih dahulu hubungan keduanya.

HTML digunakan untuk menyusun struktur dan isi halaman, sedangkan CSS digunakan untuk mengatur bagaimana struktur tersebut ditampilkan.

Contohnya, kita memiliki HTML berikut:

<h1>Belajar CSS</h1>
<p>Ini adalah halaman pertama saya.</p>

Secara default, browser akan menampilkan elemen tersebut menggunakan gaya bawaan browser.

Kita kemudian dapat menggunakan CSS untuk mengubah warna judul:

h1 {
    color: blue;
}

Aturan tersebut akan membuat teks pada elemen <h1> menjadi berwarna biru.

Yang perlu dipahami adalah: CSS harus diterapkan pada elemen HTML melalui aturan CSS yang sesuai. Cara menerapkannya inilah yang akan kita bahas berikutnya.

1. Inline CSS

Inline CSS adalah CSS yang ditulis langsung di dalam atribut style pada elemen HTML.

Contoh:

<h1 style="color: blue;">Belajar CSS</h1>

Pada contoh tersebut, aturan:

color: blue;

ditulis langsung pada elemen <h1>.

Contoh Lengkap

<!DOCTYPE html>
<html>
<head>
    <title>Inline CSS</title>
</head>
<body>

    <h1 style="color: blue;">Belajar CSS</h1>
    <p style="font-size: 18px;">Ini adalah paragraf.</p>

</body>
</html>

Browser akan langsung menerapkan aturan CSS yang terdapat pada atribut style.

Kelebihan Inline CSS

Mudah digunakan untuk perubahan kecil pada satu elemen.
Tidak membutuhkan file CSS terpisah.
Cocok untuk percobaan sederhana.

Kekurangan Inline CSS

CSS bercampur langsung dengan HTML.
Sulit dipelihara jika digunakan pada banyak elemen.
Pengulangan kode CSS dapat menjadi lebih banyak.

Karena alasan tersebut, Inline CSS biasanya tidak menjadi pilihan utama ketika sebuah website mulai memiliki banyak elemen dan halaman.

2. Internal CSS

Internal CSS adalah CSS yang ditulis di dalam elemen <style>, biasanya pada bagian <head> dokumen HTML.

Contohnya:

<!DOCTYPE html>
<html>
<head>

    <title>Internal CSS</title>

    <style>
        h1 {
            color: blue;
        }

        p {
            font-size: 18px;
        }
    </style>

</head>

<body>

    <h1>Belajar CSS</h1>
    <p>Ini adalah paragraf.</p>

</body>
</html>

Perhatikan bahwa aturan CSS berada di antara:

<style>
    /* CSS ditulis di sini */
</style>

Dengan metode ini, CSS tidak perlu ditulis satu per satu pada setiap elemen HTML.

Kapan Internal CSS Digunakan?

Internal CSS dapat berguna ketika aturan CSS hanya diperlukan oleh satu halaman HTML, terutama untuk contoh, prototipe, atau halaman sederhana.

Namun, jika beberapa halaman membutuhkan aturan CSS yang sama, membuat CSS di setiap halaman akan menghasilkan pengulangan kode.

3. External CSS

External CSS adalah CSS yang disimpan di dalam file terpisah dengan ekstensi .css, kemudian dihubungkan ke dokumen HTML.

Metode ini merupakan pendekatan yang sangat umum digunakan ketika sebuah website memiliki banyak halaman atau membutuhkan stylesheet yang dapat digunakan bersama.

Langkah 1 — Buat File CSS

Misalnya kita membuat struktur project sederhana seperti berikut:

belajar-css/
├── index.html
└── style.css

Kemudian buka file style.css dan masukkan:

h1 {
    color: blue;
}

p {
    font-size: 18px;
}

Langkah 2 — Hubungkan CSS dengan HTML

Buka file index.html, kemudian tambahkan elemen <link> di dalam bagian <head>:

<!DOCTYPE html>
<html>

<head>
    <title>External CSS</title>

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

<body>

    <h1>Belajar CSS</h1>
    <p>Ini adalah paragraf.</p>

</body>

</html>

Atribut rel="stylesheet" menjelaskan bahwa resource yang dihubungkan adalah stylesheet, sedangkan href="style.css" menunjukkan lokasi file CSS.

Ketika browser memuat halaman HTML, browser juga akan mengambil stylesheet tersebut dan menerapkan aturan CSS yang sesuai.

📂 Bagaimana Jika File CSS Berada di Folder?

File CSS tidak harus berada di folder yang sama dengan file HTML. Kita dapat mengatur struktur project sesuai kebutuhan.

Contohnya:

belajar-css/
├── index.html
└── css/
    └── style.css

Maka penulisan pada HTML menjadi:

<link rel="stylesheet" href="css/style.css">

Artinya browser mencari file style.css di dalam folder css.

Jika File HTML Berada di Folder Berbeda

Misalnya struktur project seperti berikut:

belajar-css/
├── css/
│   └── style.css
└── pages/
    └── about.html

Dari about.html, kita perlu naik satu tingkat terlebih dahulu sebelum masuk ke folder css:

<link rel="stylesheet" href="../css/style.css">

Penulisan path seperti ini akan menjadi sangat penting ketika project HTML dan CSS mulai memiliki struktur folder yang lebih kompleks.

⚖️ Perbandingan Inline, Internal, dan External CSS

Metode	Lokasi CSS	Cocok Untuk
Inline	Atribut `style`	Perubahan pada elemen tertentu
Internal	Elemen `<style>`	Satu halaman atau prototipe
External	File `.css`	Website dan project dengan banyak halaman

Secara umum, External CSS merupakan pilihan yang paling nyaman untuk project yang berkembang karena aturan tampilan dapat dipisahkan dari struktur HTML dan digunakan oleh beberapa halaman.

🧪 Studi Kasus Sederhana

Sekarang kita gabungkan HTML dan CSS menggunakan metode External CSS.

Struktur Folder

website-saya/
├── index.html
└── style.css

File index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar CSS</title>

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

<body>

    <h1>Website Pertama Saya</h1>

    <p>
        Saya sedang belajar menghubungkan CSS
        dengan HTML.
    </p>

    <button>Klik Saya</button>

</body>

</html>

File style.css

body {
    font-family: Arial, sans-serif;
    margin: 40px;
}

h1 {
    color: #2563eb;
}

p {
    font-size: 18px;
}

button {
    background: #2563eb;
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
}

Simpan kedua file tersebut, kemudian buka index.html menggunakan browser.

Jika file CSS berhasil terhubung, tampilan halaman akan berubah sesuai aturan yang terdapat pada style.css.

🔍 Cara Mengetahui CSS Berhasil Terhubung

Jika menggunakan External CSS tetapi tampilan halaman tidak berubah, kemungkinan masalahnya bukan pada aturan CSS, melainkan pada path file CSS.

Periksa kembali baris:

<link rel="stylesheet" href="style.css">

Pastikan:

Nama file CSS benar.
Ekstensi file adalah .css.
Lokasi file sesuai dengan nilai href.
Penulisan huruf besar dan kecil sesuai dengan nama file, terutama pada sistem yang membedakan huruf besar dan kecil.

Anda juga dapat membuka Developer Tools pada browser untuk memeriksa apakah file CSS berhasil dimuat dan apakah terdapat error pada halaman.

💡 Jadi, Sebaiknya Pakai yang Mana?

Ketiga metode tersebut sama-sama valid. Pemilihannya bergantung pada kebutuhan project.

Untuk belajar atau melakukan perubahan kecil pada satu elemen, Inline CSS masih dapat digunakan.

Untuk halaman sederhana yang memiliki aturan CSS khusus, Internal CSS dapat menjadi pilihan praktis.

Sementara itu, untuk website yang memiliki banyak elemen atau beberapa halaman, External CSS biasanya lebih mudah dikelola karena CSS dapat dipisahkan dari HTML dan digunakan kembali.

💡 Tips: Jangan menganggap Inline CSS, Internal CSS, atau External CSS sebagai metode yang "benar" dan lainnya "salah". Ketiganya merupakan cara yang valid untuk menerapkan CSS. Yang berbeda adalah konteks dan cara penggunaannya.

📚 Kesimpulan

CSS dapat diterapkan pada HTML dengan tiga cara utama:

Inline CSS — ditulis langsung pada atribut style.
Internal CSS — ditulis di dalam elemen <style>.
External CSS — ditulis pada file .css terpisah dan dihubungkan menggunakan elemen <link>.

Memahami ketiga metode tersebut merupakan langkah penting sebelum masuk lebih jauh ke dalam CSS. Setelah CSS berhasil terhubung dengan HTML, kita dapat mulai mempelajari bagaimana menentukan elemen HTML mana yang ingin diberi gaya.

Pada tutorial berikutnya, kita akan membahas CSS Selector, yaitu bagian penting dari CSS yang digunakan untuk memilih elemen HTML yang akan diberikan aturan styling.

🎯 CSS Sudah Terhubung, Sekarang Belajar Selector!

Setelah mengetahui cara menghubungkan CSS dengan HTML, langkah berikutnya adalah mempelajari cara memilih elemen yang ingin kita beri style.

Tutorial CSS #3: CSS Selector →

Ramdanifikri.id