Cara Mudah Menghubungkan CSS ke Dokumen HTML | Bikin Tampilan Web Makin Keren

Assalamualaikum Wr. Wb.

Tutorial Web Dasar Part 3: Cara Mudah Menghubungkan CSS ke Dokumen HTML | Bikin Tampilan Web Makin Keren | Setelah sebelumnya kita belajar membuat form dan input, tampilan web kita tentu masih polos dan membosankan. Supaya halaman web memiliki warna, tata letak rapi, serta font yang menarik, kita wajib menambahkan CSS (Cascading Style Sheets). Kali ini admin akan membagikan panduan dasar menghubungkan CSS ke file HTML yang dijamin work 100%.

3 Cara Menyisipkan CSS ke HTML

Ada 3 metode utama yang bisa anda gunakan sesuai kebutuhan:

• Inline CSS: Ditulis langsung di dalam atribut tag HTML menggunakan style="...". Cocok untuk styling cepat satu elemen saja.
• Internal CSS: Ditulis di dalam tag <style> di area <head> file HTML.
• External CSS (Paling Direkomendasikan): Ditulis di file terpisah berekstensi .css lalu dipanggil menggunakan tag <link>.

Contoh Menggunakan External CSS

Buat file baru dengan nama style.css di folder yang sama dengan file index.html anda:

/* File: style.css */
body {
    background-color: #f0f2f5;
    font-family: Arial, sans-serif;
    color: #333333;
    margin: 20px;
}

h1 {
    color: #0066cc;
    text-align: center;
}

.kotak {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #dddddd;
}

[Maka akan tampil output seperti di bawah ini]

Menghubungkan ke File HTML

Buka file index.html anda, lalu tambahkan baris tag <link> di dalam bagian <head> seperti berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Belajar Menghubungkan CSS</title>
    <!-- Hubungkan CSS di sini -->
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <div class="kotak">
        <h1>Halo Dunia Web!</h1>
        <p>Halaman ini sudah berhasil dihias menggunakan file CSS eksternal.</p>
    </div>

</body>
</html>

Itulah tutorial cara mudah menghubungkan CSS ke dokumen HTML. Pastikan penulisan nama file pada atribut href sudah sesuai huruf besar kecilnya agar style terpanggil sempurna.

Sekian tutorial kali ini, semoga bermanfaat, jika ada kesalahan mohon di maafkan, jika berguna mohon di share ke Social Media.

Terima Kasih.

Wassalamualaikum Wr. Wb.