Pertemuan 3-4: Warna, Background, & Border

Memberi Kehidupan Visual pada Elemen Web

Pengertian

Setelah bisa memilih elemen, kini saatnya kita memanipulasi properti visual dasarnya. Properti warna (color) digunakan untuk teks. Properti latar belakang (background) bisa berupa warna solid atau gambar. Properti garis tepi (border) digunakan untuk membuat bingkai di sekitar elemen. Ketiga properti ini adalah fondasi dari hampir semua desain visual di web.

Analogi

Analogi: Bingkai Foto
Bayangkan sebuah elemen HTML sebagai sebuah foto. Properti background-color adalah warna karton di belakang foto. Properti color adalah warna tinta jika ada tulisan di atas foto. Properti border adalah bingkai kayu yang mengelilingi semuanya.

Contoh Kode & Hasil

1. Warna Teks (Hex & RGBa)

HEX adalah format paling umum. RGBa menambahkan nilai Alpha (transparansi).

Teks ini berwarna merah (Hex).

Teks ini berwarna biru dengan 70% opacity (RGBa).

.merah { color: #ef4444; }
.biru-transparan { color: rgba(59, 130, 246, 0.7); }

2. Warna Latar Belakang

Div ini memiliki latar belakang biru muda.
.kotak-biru {
  background-color: #e0f2fe;
  padding: 1rem;
}

3. Gambar Latar Belakang

Div ini menggunakan gambar sebagai latar belakang.
.hero-banner {
  background-image: url('path/to/gambar.jpg');
  background-size: cover;
  background-position: center;
}

4. Border Solid

Elemen ini memiliki border biru solid.
.bingkai {
  border-width: 2px;
  border-style: solid;
  border-color: blue;
}

5. Border Shorthand dengan Sisi Berbeda

Elemen ini hanya memiliki border di bagian bawah.
.efek-unik {
  border: none; /* Hapus semua border dulu */
  border-bottom: 4px solid red;
}

Latihan Mandiri

Tugas: Membuat Kartu Pengumuman

  1. Buat sebuah <div> dengan class .kartu-pengumuman.
  2. Beri background-color abu-abu muda (misal: #f3f4f6).
  3. Beri border solid setebal 1px dengan warna abu-abu gelap (misal: #9ca3af).
  4. Buat sudutnya sedikit melengkung menggunakan border-radius (misal: 8px).
  5. Di dalamnya, buat <h2> dengan teks "PENGUMUMAN" dan beri warna merah.
  6. Tambahkan <p> dengan isi pengumuman dan beri warna hitam.

Kesimpulan

Warna, background, dan border adalah properti fundamental dalam CSS untuk mengubah tampilan elemen. Dengan menguasai berbagai cara mendefinisikan warna (nama, hex, RGB) dan memanipulasi background serta border, kita dapat membuat desain yang lebih kaya dan terstruktur secara visual. Properti-properti ini adalah blok bangunan dasar untuk hampir semua gaya yang akan Anda buat.