Selector, Properti, dan Nilai CSS
Pada sebuah halaman website, terdapat banyak elemen HTML. Bagaimana cara kita menyuruh komputer untuk
mengecat
judul pertama dengan
warna hijau, sedangkan judul kedua dengan warna biru?
Itulah tugas Selector (Siapa yang dipilih). Setelah dipilih, kita harus menyebutkan
Property (Apanya yang diubah) dan Value (Mau diubah jadi apa). Mari
pelajari tiga komponen sakti CSS ini!
🎯 3 Jenis Selector Dasar
Selector adalah kunci utama. Ada 3 jenis Selector paling dasar: Tag, Class, dan ID.
1 Element / Tag Selector
Menargetkan semua nama elemen tag HTML di halaman tanpa terkecuali.
HTML:
<p>Paragraf 1</p>
<p>Paragraf 2</p>
CSS (Semua tag p akan merah):
p {
color: red;
}
2
Class Selector (Titik .)
Menargetkan elemen berdasarkan atribut class="...". Class bisa dipakai (diulang-ulang) pada banyak
elemen berebeda. Ditandai dengan awalan titik di CSS.
HTML (Satu class dipakai berulang):
<div class="peringatan"> Awas </div>
<p class="peringatan"> Bahaya </p>
CSS (Awalan Titik):
.peringatan {
background: yellow;
}
3
ID Selector (Pagar #)
Menargetkan ID spesifik id="...". Nama ID harus unik (tidak boleh
ada elemen lain yang namanya sama dalam satu halaman). Ditandai dengan awalan Tanda
Pagar.
HTML:
<nav id="menu-utama"> ... </nav>
CSS (Awalan Pagar):
#menu-utama {
border: 1px solid black;
}👕 Properti Teks & Warna (Properties)
Ada ratusan properti di CSS, dan sebagian besar dari mereka sangat intuitif (menggunakan bahasa Inggris sehari-hari). Kita akan belajar yang paling sering digunakan dulu.
| Nama Property | Fungsi / Apanya yang diubah? | Contoh Value |
|---|---|---|
| color | Warna huruf (teks) | red, #000, rgba(0,0,0,0.5)
|
| background-color | Warna cat latar belakang elemen | blue, transparent |
| font-size | Besar kecilnya ukuran huruf | 12px, 1.5rem, 2em |
| font-weight | Ketebalan huruf (bold/tipis) | normal, bold, 400, 700
|
| text-align | Perataan teks (kiri, kanan, tengah) | left, center, right, justify
|
🌈 Cara Menulis Nilai Warna (Color Values)
Jika Property warna hanya butuh `color:`, tapi Valuenya mau diberi warna apa? Ada 3 format penulisan warna memanggil di CSS:
Color Keyword
Nama bahasa inggris
color: blue;
color: tomato;
Hexadecimal (HEX)
Paling banyak orang pakai
color: #10b981;
color: #ffffff;
RGB & RGBA
Red Green Blue (Alpha/Transparan)
color: rgb(255, 0, 0);
color: rgba(0, 0, 0, 0.5);
🎮 Playground: Menggabungkan Ketiganya
color: ;
font-size: ;
text-align: ;
font-weight: ;
}
📋 Ringkasan
p, memukul rata), Class
(.kotak, bisa berulang-ulang),
ID (#header, spesifik dan
unik 1 aja).