Beranda / CSS / Pemrograman / Web

Cara Menambahkan CSS ke Website (Tutorial CSS Part 4)

Oleh Sopyan Posting Komentar
Logo CSS
Gambar 4.0 : Logo CSS

Kalau kamu baru mulai ngoding HTML dan pengen websitemu tampil keren, CSS adalah kuncinya. Tapi gimana sih cara nambahin CSS ke HTML? Tenang, kamu gak sendirian! Ada beberapa cara yang bisa kamu pakai, tergantung situasi dan kebutuhan.

Nah, di artikel ini kita bakal bahas:

  1. Tiga cara menambahkan CSS
  2. External CSS
  3. Internal CSS
  4. Inline CSS
  5. Multiple Style Sheets
  6. Urutan gaya (Cascading Order)

Langsung aja kita bahas satu per satu!

1. Tiga Cara Menambahkan CSS

Secara umum, ada tiga cara utama buat nyisipin CSS ke dalam HTML:

  • External CSS → CSS ditulis di file terpisah.
  • Internal CSS → CSS ditulis di bagian <head> HTML.
  • Inline CSS → CSS ditulis langsung di tag HTML.

Sekarang kita bahas satu per satu, lengkap sama contohnya!

2. External CSS

Ini adalah cara yang paling umum dipakai, terutama kalau websitemu punya banyak halaman. Kita simpan CSS di file terpisah, lalu dipanggil di HTML.

Langkah-langkah:

  1. Buat file style.css
  2. Tambahkan kode CSS di dalamnya
  3. Hubungkan file CSS tersebut ke HTML dengan <link> di bagian <head>

File: style.css

body {
  background-color: #f9f9f9;
  font-family: Arial, sans-serif;
}

h1 {
  color: navy;
  text-align: center;
}

p {
  color: #333;
  font-size: 18px;
}

File: index.html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Selamat Datang!</h1>
  <p>Ini adalah halaman dengan CSS eksternal.</p>
</body>
</html>
Hasilnya:
Contoh external CSS
Gambar 4.1 : Contoh external CSS

Kelebihan:
  • Lebih rapi
  • Bisa digunakan di banyak halaman
  • Lebih mudah dipelihara

3. Internal CSS

Internal CSS cocok buat halaman sederhana atau pas kamu pengen coba-coba style langsung di file HTML.

Contoh:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #e0f7fa;
    }

    h1 {
      color: teal;
    }

    p {
      font-size: 16px;
      color: #555;
    }
  </style>
</head>
<body>
  <h1>Ini Halaman dengan Internal CSS</h1>
  <p>Internal CSS ditulis langsung di bagian head.</p>
</body>
</html>

Hasilnya:

Contoh internal CSS
Gambar 4.2 : Contoh internal CSS

Kelebihan:

  • Gak perlu file tambahan
  • Cocok buat halaman satuan atau demo

4. Inline CSS

Ini cara tercepat tapi paling terbatas. Cocok buat style dadakan atau test kecil-kecilan.

Contoh:

<!DOCTYPE html>
<html>
<body>
  <h1 style="color: darkgreen; text-align: center;">Ini Judul Inline</h1>
  <p style="font-size: 18px; color: orange;">Ini paragraf dengan inline CSS.</p>
</body>
</html>

Hasilnya:

Contoh Inline CSS
Gambar 4.3 : Contoh Inline CSS

Kelebihan:

  • Cepat dan langsung terlihat hasilnya
  • Cocok buat styling spesifik

Tapi hati-hati: Kalau kebanyakan inline CSS, HTML-mu bisa berantakan dan susah dibaca.

5. Multiple Style Sheets

Kadang kita perlu lebih dari satu file CSS, misalnya satu buat style utama, satu lagi buat tema gelap, atau buat layout mobile.

Contoh:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="main.css">
  <link rel="stylesheet" href="theme-dark.css">
</head>
<body>
  <h1>Contoh Banyak CSS</h1>
  <p>Halaman ini pakai dua file CSS sekaligus.</p>
</body>
</html>

Catatan: Urutan file itu penting! File yang dipanggil terakhir bisa menimpa style sebelumnya kalau selektornya sama.

6. Cascading Order (Urutan Gaya)

CSS itu singkatannya "Cascading Style Sheets", artinya kalau ada beberapa aturan untuk elemen yang sama, maka aturan terakhir atau paling spesifik akan menang.

Contoh kombinasi:

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>
<body>
  <p style="color: red;">Teks ini akan berwarna merah</p>
</body>
</html>

Hasilnya:

Contoh urutan CSS
Gambar 4.4 : Contoh urutan CSS

Kenapa merah? Karena inline CSS lebih spesifik dari internal.

Urutan kekuatan CSS (dari yang paling lemah ke paling kuat):

  1. CSS bawaan browser
  2. External CSS
  3. Internal CSS
  4. Inline CSS
  5. !important (gunakan hanya kalau sangat perlu!)

Contoh !important:

p {
  color: green !important;
}

Kalau kamu pakai ini, bahkan inline pun bisa kalah!

Kesimpulan

CSS itu fleksibel banget, dan kamu bisa pilih cara mana yang paling pas untuk kebutuhanmu:

  • External CSS buat proyek besar dan rapi
  • Internal CSS buat proyek kecil atau latihan
  • Inline CSS buat gaya cepat dan sekali pakai
  • Bisa juga kombinasikan beberapa file CSS, tapi hati-hati sama urutan dan spesifikasinya

Yang penting, jangan lupa praktik langsung biar makin paham!

Posting Komentar untuk "Cara Menambahkan CSS ke Website (Tutorial CSS Part 4)"