3 Cara Menambahkan CSS ke HTML (Inline, Internal, dan External)

Halo, Teman-Teman!

Kali ini kita akan belajar tentang 3 cara menambahkan CSS ke HTML. CSS adalah cara terbaik untuk membuat website tampak menarik dengan warna, tata letak, dan font yang keren. Yuk, kita bahas cara menambahkannya ke dalam HTML!

Apa Itu CSS?

CSS adalah singkatan dari Cascading Style Sheets, yang digunakan untuk mengatur tampilan website seperti warna, tata letak, dan animasi. Dengan CSS, kita bisa memisahkan desain dari konten HTML, sehingga kode menjadi lebih rapi dan mudah dikelola.

Ada 3 cara utama untuk menambahkan CSS ke HTML:

Inline CSS
Internal CSS
External CSS

Setiap cara memiliki kegunaan yang berbeda. Berikut adalah penjelasan lengkapnya.

1. Inline CSS

Apa itu Inline CSS?
Inline CSS berarti menambahkan gaya langsung di elemen HTML menggunakan atribut style. Ini cocok untuk perubahan cepat pada satu elemen saja.

Contoh:

<h1 style="color: blue;">Halo, teman-teman!</h1>

Kelebihan:

Mudah digunakan untuk mengubah elemen tertentu.

Kekurangan:

Tidak efisien untuk mengatur banyak elemen.
Membuat kode HTML terlihat berantakan.

2. Internal CSS

Apa itu Internal CSS?
Internal CSS ditulis di dalam tag <style> yang berada di bagian <head> pada dokumen HTML. Cara ini cocok untuk satu halaman website.

Contoh:

<!DOCTYPE html>
<html lang="id">
<head>
    <style>
        h1 {
            color: red;
        }
    </style>
</head>
<body>
    <h1>Halo, teman-teman!</h1>
</body>
</html>

Kelebihan:

Semua gaya terpusat di satu tempat (di tag <style>).
Cocok untuk halaman tunggal.

Kekurangan:

Tidak efisien untuk website dengan banyak halaman.

3. External CSS

Apa itu External CSS?
External CSS ditulis di file terpisah dengan ekstensi .css, seperti style.css. File ini dihubungkan ke HTML menggunakan tag <link>.

Contoh:

<!-- File HTML -->
<!DOCTYPE html>
<html lang="id">
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Halo, teman-teman!</h1>
</body>
</html>

/* File style.css */
h1 {
    color: green;
}

Kelebihan:

File CSS dapat digunakan di banyak halaman website.
Mempermudah pengelolaan dan pembaruan desain.

Kekurangan:

Membutuhkan pengaturan file tambahan.

Kapan Menggunakan Masing-Masing Cara?

Inline CSS:
Gunakan hanya untuk perubahan kecil pada satu elemen.
Internal CSS:
Cocok untuk proyek kecil atau halaman tunggal.
External CSS:
Pilihan terbaik untuk proyek besar dengan banyak halaman. Ini juga merupakan standar di dunia pengembangan web.

Latihan: Tambahkan CSS ke HTML

Coba praktekkan 3 cara menambahkan CSS di atas. Buat file HTML sederhana, lalu tambahkan gaya menggunakan inline, internal, dan external CSS. Amati perbedaannya!

Kesimpulan

Menambahkan CSS ke HTML bisa dilakukan dengan 3 cara: inline, internal, dan external. Setiap cara memiliki kelebihan dan kekurangan, tergantung kebutuhan proyekmu. Di artikel berikutnya, kita akan belajar lebih dalam tentang selector CSS untuk menargetkan elemen tertentu dengan lebih fleksibel.

Selamat mencoba, dan sampai jumpa di artikel selanjutnya!