HTML Dasar #20 - 3 Cara Menambahkan CSS ke HTML: Inline, Internal, External

byFerdian Rahabista -
0

Selama ini kita belajar HTML untuk membuat struktur website. Tapi website yang hanya HTML terlihat polos dan membosankan. Agar website kita cantik dan menarik, kita butuh CSS (Cascading Style Sheets)!

Ada 3 cara untuk menambahkan CSS ke HTML. Masing-masing punya kelebihan dan kekurangan. Yuk kita pelajari!

Apa Itu CSS?

CSS adalah singkatan dari Cascading Style Sheets. CSS bertugas mengatur tampilan website: warna, font, ukuran, jarak, posisi, dan animasi.

Analogi Sederhana:
• HTML = Kerangka rumah (pondasi, dinding, atap)
• CSS = Cat, dekorasi, furnitur (membuat rumah jadi cantik)
• JavaScript = Listrik dan peralatan elektronik (membuat rumah "hidup")

Ringkasan Tiga Cara Menambahkan CSS

Metode Cara Penulisan Cakupan Kapan Pakai?
Inline CSS Atribut style di elemen HTML 1 elemen saja Styling cepat, testing
Internal CSS Tag <style> di dalam <head> 1 halaman HTML Website 1 halaman, prototipe
External CSS File .css terpisah, dihubungkan dengan <link> Seluruh halaman website Website profesional (disarankan!)

1. Inline CSS (CSS Langsung di Elemen)

Inline CSS ditulis langsung di atribut style dalam tag HTML. Ini cara paling cepat tapi paling tidak disarankan untuk website besar karena sulit di-maintenance.

Contoh:

<h1 style="color: blue; text-align: center;">Judul dengan Inline CSS</h1>
<p style="font-size: 18px; color: green; font-weight: bold;">Paragraf dengan gaya sendiri</p>

Hasilnya:

Judul dengan Inline CSS

Paragraf dengan gaya sendiri

Kekurangan Inline CSS:
  • Sulit di-maintenance (setiap elemen harus diedit satu per satu)
  • Tidak bisa digunakan ulang (reusable)
  • Membuat HTML jadi berantakan dan sulit dibaca
  • Tidak bisa memanfaatkan fitur CSS seperti class, pseudo-class, dll
Gunakan inline CSS hanya untuk: testing cepat, email marketing (karena kompatibilitas), atau situasi darurat.

2. Internal CSS (CSS di Dalam File HTML)

Internal CSS ditulis di dalam tag <style> yang diletakkan di <head>. Ini lebih rapi daripada inline karena bisa mengatur banyak elemen sekaligus dalam satu halaman.

Contoh:

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f4f8;
            padding: 20px;
        }
        h1 {
            color: #3b82f6;
            text-align: center;
            border-bottom: 3px solid #3b82f6;
            padding-bottom: 10px;
        }
        p {
            font-size: 16px;
            line-height: 1.6;
            color: #333;
        }
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Selamat Datang di Website Saya</h1>
    <p>Ini adalah contoh <span class="highlight">Internal CSS</span>. Semua styling ada di dalam file HTML yang sama.</p>
    <p>Cara ini lebih rapi daripada inline CSS.</p>
</body>
</html>

Hasilnya:

Selamat Datang di Website Saya

Ini adalah contoh Internal CSS. Semua styling ada di dalam file HTML yang sama.

Cara ini lebih rapi daripada inline CSS.

Kelebihan Internal CSS:
  • Lebih rapi daripada inline CSS
  • Bisa menggunakan selector (class, id, tag)
  • Cocok untuk website 1 halaman (landing page)
  • Tidak perlu file tambahan
Kekurangan Internal CSS:
  • Tidak bisa digunakan di halaman lain (harus copy-paste)
  • Membuat file HTML semakin besar

3. External CSS (File CSS Terpisah) - PALING DISARANKAN

External CSS adalah cara profesional dan paling disarankan. Kita menulis CSS di file terpisah dengan ekstensi .css, lalu menghubungkannya ke HTML menggunakan tag <link>.

Langkah-langkah:

1. Buat file HTML (index.html):

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Website dengan External CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Selamat Datang di Website Saya</h1>
    <p>Ini adalah contoh External CSS. File CSS terpisah dari HTML.</p>
    <div class="card">
        <h3>Card 1</h3>
        <p>Ini adalah kartu dengan gaya dari file CSS eksternal.</p>
    </div>
</body>
</html>

2. Buat file CSS (style.css) di folder yang sama:

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f0f4f8;
}

h1 {
    color: #3b82f6;
    text-align: center;
    border-bottom: 3px solid #3b82f6;
    padding-bottom: 10px;
}

p {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

.card {
    background: white;
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.card:hover {
    transform: translateY(-5px);
}

.card h3 {
    margin-top: 0;
    color: #1e40af;
}

Hasilnya (setelah dihubungkan):

Selamat Datang di Website Saya

Ini adalah contoh External CSS. File CSS terpisah dari HTML.

Card 1

Ini adalah kartu dengan gaya dari file CSS eksternal.

Kelebihan External CSS (WAJIB UNTUK WEBSITE PROFESIONAL):
  • Satu file CSS bisa digunakan untuk banyak halaman (reusable)
  • HTML jadi lebih bersih dan mudah dibaca
  • Loading lebih cepat karena browser menyimpan cache file CSS
  • Memudahkan tim developer bekerja (HTML dan CSS terpisah)
  • Mendukung semua fitur CSS (media query, animation, dll)

Perbandingan Ketiga Metode

Aspek Inline CSS Internal CSS External CSS
Tempat penulisan Atribut style Tag <style> di <head> File .css terpisah
Cakupan 1 elemen 1 halaman Banyak halaman
Dapat digunakan ulang Tidak Tidak (halaman lain) Ya
Maintenance Sulit Sedang Mudah
Kecepatan loading Normal Normal Lebih cepat (cache)
Rekomendasi Hanya untuk testing Website 1 halaman Website profesional

Studi Kasus: Website 3 Halaman dengan External CSS

Berikut contoh website dengan 3 halaman (Home, About, Contact) yang satu file CSS-nya digunakan bersama.

File: style.css (satu untuk semua halaman)

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    padding: 20px;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    overflow: hidden;
}

header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px;
    text-align: center;
}

nav {
    background: #1e293b;
    padding: 15px;
    text-align: center;
}

nav a {
    color: white;
    text-decoration: none;
    margin: 0 20px;
    padding: 8px 16px;
    border-radius: 5px;
    transition: background 0.3s;
}

nav a:hover {
    background: #667eea;
}

main {
    padding: 30px;
}

h2 {
    color: #667eea;
    margin-bottom: 20px;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 10px;
}

footer {
    background: #1e293b;
    color: #94a3b8;
    text-align: center;
    padding: 20px;
}

.card {
    background: #f8fafc;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

File: index.html (Halaman Home)

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Home - Website Saya</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>🚀 Website Saya</h1>
            <p>Belajar CSS dengan External Style Sheet</p>
        </header>
        
        <nav>
            <a href="index.html">Home</a>
            <a href="about.html">About</a>
            <a href="contact.html">Contact</a>
        </nav>
        
        <main>
            <h2>Selamat Datang!</h2>
            <div class="card">
                <h3>Apa itu External CSS?</h3>
                <p>External CSS adalah cara menulis CSS di file terpisah (.css) dan dihubungkan ke HTML menggunakan tag &lt;link&gt;. Ini adalah cara terbaik untuk website profesional.</p>
            </div>
        </main>
        
        <footer>
            <p>&copy; 2024 Website Saya. Dibuat dengan External CSS.</p>
        </footer>
    </div>
</body>
</html>

File: about.html (Halaman About - pakai CSS yang sama!)

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>About - Website Saya</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>🚀 Website Saya</h1>
            <p>Belajar CSS dengan External Style Sheet</p>
        </header>
        
        <nav>
            <a href="index.html">Home</a>
            <a href="about.html">About</a>
            <a href="contact.html">Contact</a>
        </nav>
        
        <main>
            <h2>Tentang Kami</h2>
            <div class="card">
                <h3>Siapa Kami?</h3>
                <p>Kami adalah tim pengembang web yang berdedikasi untuk membantu pemula belajar HTML, CSS, dan JavaScript.</p>
            </div>
        </main>
        
        <footer>
            <p>&copy; 2024 Website Saya. Dibuat dengan External CSS.</p>
        </footer>
    </div>
</body>
</html>

Dengan External CSS, satu file style.css digunakan untuk semua halaman. Jika ingin mengganti warna tema, cukup edit satu file saja!

Kesalahan Umum Pemula

  • Lupa menutup tag <style> → CSS tidak akan bekerja.
  • Path file CSS salah saat menggunakan <link> → Pastikan href="style.css" sesuai lokasi file.
  • Mencampur aduk ketiga metode dalam satu proyek besar → Bisa membuat kacaubalau. Pilih satu metode utama (External).
  • Menulis CSS di <body> tanpa tag <style> → CSS harus di dalam tag <style> atau atribut style.
  • Lupa menambahkan rel="stylesheet" di tag <link> → Browser tidak akan membaca file CSS.
Debugging Tips:
  • Jika CSS tidak muncul, buka Developer Tools (F12) → tab Console → lihat ada error tidak
  • Untuk External CSS, cek tab Network → apakah file .css berhasil dimuat (status 200)
  • Pastikan tidak ada typo di nama file atau selector CSS

Latihan Singkat

  1. Buat file HTML baru dengan judul "Latihan CSS"
  2. Buat inline CSS untuk mewarnai satu heading menjadi merah
  3. Buat internal CSS di dalam tag <style> untuk mengatur background halaman menjadi abu-abu muda
  4. Buat external CSS dengan membuat file style.css dan hubungkan ke HTML. Di file CSS, buat class .box dengan background biru, padding 20px, border-radius 10px
  5. Simpan dan buka di browser. Amati mana yang berhasil dan mana yang tidak (urutan prioritas CSS akan kita pelajari nanti)

Intisari Hari Ini

  • Inline CSS → atribut style di elemen (cakupan 1 elemen, tidak disarankan)
  • Internal CSS → tag <style> di <head> (cakupan 1 halaman)
  • External CSS → file .css terpisah + tag <link> (cakupan banyak halaman) → PALING DISARANKAN
  • Untuk website profesional, selalu gunakan External CSS
  • External CSS membuat HTML bersih, reusable, dan loading lebih cepat karena cache
Tantangan Akhir Pekan: Buat sebuah website portofolio minimalis dengan 3 halaman (Home, Portofolio, Kontak). Gunakan External CSS untuk styling. Persyaratan:
  • Satu file CSS (style.css) digunakan untuk ketiga halaman
  • Setiap halaman memiliki: header, navigasi, konten utama, footer
  • Gunakan CSS untuk mengatur: warna, font, border-radius, box-shadow, hover effect
  • Buat minimal 2 kartu (card) di halaman portofolio
  • Di halaman kontak, buat form sederhana (nama, email, pesan) dengan styling CSS
  • Tambahkan komentar di file CSS yang menjelaskan fungsi setiap section

Bonus: Buat navigasi aktif (active link) menggunakan class CSS.

Selamat mencoba!

Artikel Sebelumnya: HTML Dasar #19 - Menggunakan br dan hr untuk Garis & Spasi
Artikel Selanjutnya: HTML Dasar #21 - Mengenal Selector CSS: Tag, Class, ID

Tags

Anda mungkin menyukai postingan ini

Lebih baru Lebih lama

نموذج الاتصال