Belajar HTML - Pengenalan CSS untuk Mengatur Tampilan Web

Januari 11, 2025

Halo teman-teman,

Setelah sebelumnya kita belajar tentang cara mengatur warna elemen HTML, sekarang kita masuk ke tahap yang lebih seru, yaitu CSS. Dengan CSS, kita bisa mengatur gaya seluruh halaman web dengan cara yang lebih efisien dan rapi.

CSS adalah singkatan dari Cascading Style Sheets. CSS digunakan untuk mengatur bagaimana elemen HTML ditampilkan di layar. Dengan CSS, kamu bisa mengatur warna, font, ukuran, posisi, hingga animasi dari elemen-elemen di halaman web.

Dan yang paling keren, kamu bisa mengatur banyak halaman sekaligus hanya dari satu file CSS saja. Cocok banget buat kamu yang pengin tampilan konsisten dan gampang diatur.

Tiga Cara Menambahkan CSS dalam HTML

Ada tiga cara utama untuk menambahkan CSS ke dalam HTML:

1. Inline CSS

Ini cara paling dasar, yaitu langsung menulis gaya di dalam elemen HTML lewat atribut style.

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

Kelebihan: cepat dan mudah
Kekurangan: kurang rapi kalau dipakai banyak

2. Internal CSS

Kalau kamu mau menerapkan gaya untuk seluruh halaman, kamu bisa menuliskannya di bagian <head> menggunakan tag <style>.

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: lightgray;
    }
    h1 {
      color: navy;
      font-family: Arial;
    }
  </style>
</head>
<body>
  <h1>Judul Halaman</h1>
</body>
</html>

Kelebihan: cocok untuk halaman tunggal
Kekurangan: nggak bisa dipakai lintas halaman

3. External CSS

Metode ini paling direkomendasikan untuk proyek yang lebih besar. Kamu buat file .css terpisah dan hubungkan ke halaman HTML lewat tag <link>.

Langkah-langkahnya:

  1. Buat file baru, misalnya style.css

  2. Tulis CSS seperti ini:

body {
  background-color: white;
}
h1 {
  color: green;
}

  1. Hubungkan file CSS di bagian <head> HTML:

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

Kelebihan: bisa mengatur banyak halaman sekaligus dari satu tempat
Kekurangan: butuh manajemen file yang lebih rapi

Nah, sekarang kamu sudah tahu tiga cara menambahkan CSS: inline, internal, dan external. Untuk latihan, kamu bisa coba semua cara tersebut di halaman HTML-mu dan lihat perbedaannya.

Kalau kamu bingung harus pakai yang mana, pakai inline untuk styling cepat, internal untuk latihan satu halaman, dan external untuk proyek sungguhan.

Kalau ada pertanyaan soal penggunaan CSS, tulis aja di komentar ya. Yuk kita bahas bareng!

Di materi selanjutnya, kita akan belajar tentang tautan (links) di HTML—cara membuat hyperlink, menautkan ke halaman lain, atau membuka halaman di tab baru. Sampai ketemu di tutorial berikutnya!

Tidak ada komentar