Mengenal Selector, Property, dan Value CSS

Bedah Satu Aturan CSS#

Ambil CSS yang sudah pernah kita gunakan:

1
h1 {
2
  color: #ffffff;
3
}

Sekarang kita bedah.

Struktur dasarnya:

1
selector {
2
  property: value;
3
}

Pada contoh kita:

1
h1
2
↓
3
selector
4

5
color
6
↓
7
property
8

9
#ffffff
10
↓
11
value

Jadi kalau dibaca dengan bahasa manusia:

Pilih elemen h1, lalu atur warna teksnya menjadi #ffffff.

Tidak seseram tampilannya, kan?

Bagian di antara { dan } disebut declaration block. Di dalamnya kita menuliskan aturan tampilan yang ingin diterapkan pada elemen yang cocok dengan selector.

Mari kita kenal satu per satu.

Selector: Elemen Mana yang Mau Kita Atur?#

Bagian pertama adalah:

1
h1

Ini disebut selector.

Selector digunakan untuk menentukan elemen HTML mana yang ingin terkena aturan CSS.

Misalnya:

1
p {
2
  color: #333333;
3
}

Artinya:

Pilih elemen <p>.

Kalau halaman kita memiliki lima <p>, aturan tersebut bisa berlaku pada kelimanya.

Contoh lain:

1
footer {
2
  text-align: center;
3
}

Selector-nya adalah:

1
footer

Jadi CSS menargetkan elemen <footer>.

Cara seperti ini disebut type selector atau sering juga disebut element selector.

Untuk pembelajaran kita, istilah “element selector” cukup mudah diingat.

Property: Apa yang Mau Diatur?#

Sekarang lihat:

1
p {
2
  color: #333333;
3
}

Bagian:

1
color

disebut property.

Property menentukan aspek apa yang ingin kita atur.

Misalnya:

1
color
2
background-color
3
font-family
4
font-size
5
text-align

Kita sebenarnya sudah menggunakan beberapa property tersebut di CSS #1.

Waktu itu kita hanya belum memberi namanya.

Jadi:

1
color: #333333;

bisa kita baca:

Atur property color.

Lalu pertanyaan berikutnya:

Menjadi apa?

Jawabannya ada pada value.

Value: Mau Diatur Menjadi Apa?#

Pada:

1
color: #333333;

bagian:

1
#333333

adalah value.

Value adalah nilai yang kita berikan kepada property.

Contoh:

1
font-size: 18px;

Di sini:

1
font-size
2
↓
3
property
4

5
18px
6
↓
7
value

Contoh lain:

1
text-align: center;

text-align adalah property.

center adalah value.

Jadi pola yang mulai perlu kita kenali adalah:

1
selector {
2
  property: value;
3
}

Satu Selector Bisa Punya Banyak Declaration#

Kita tidak perlu membuat selector baru untuk setiap property.

Misalnya:

1
body {
2
  background-color: #f4f4f4;
3
  color: #333333;
4
  font-family: Arial, sans-serif;
5
}

Selector-nya tetap:

1
body

Tetapi kita memberi beberapa pasangan property dan value.

Setiap pasangan seperti:

1
color: #333333;

disebut declaration.

Jadi secara sederhana:

1
body              → selector
2

3
color             → property
4
#333333           → value
5
color: #333333;   → declaration

Semua declaration tadi berada di dalam declaration block yang dibatasi oleh { dan }.

Tidak perlu menghafal istilahnya sambil komat-kamit. 😄

Yang penting ketika membaca CSS, kita mulai tahu bagian mana melakukan apa.

Masalah dengan Element Selector#

Sekarang kita mulai menemukan keterbatasan.

Di halaman profil kita ada beberapa paragraf. Di antaranya adalah tagline di dalam header:

1
<p>
2
  Ngoding, main game, dan ngulik apa saja.
3
</p>

Ada juga paragraf perkenalan di bagian Tentang Saya:

1
<p>
2
  Halo! Saya BapakGabut.
3
  Saat ini saya sedang belajar membuat website
4
  menggunakan HTML.
5
</p>

Lalu kita menulis:

1
p {
2
  font-size: 18px;
3
}

Apa yang terjadi?

Semua <p> yang cocok dengan selector tersebut akan mendapat aturan yang sama.

Padahal mungkin kita hanya ingin tagline:

1
Ngoding, main game, dan ngulik apa saja.

yang dibuat sedikit lebih besar.

Kita butuh cara untuk mengatakan:

Yang ini saja.

Salah satu caranya adalah menggunakan class.

Mengenal Class#

Buka kembali index.html milik Gabuters.

Kita bisa memberi atribut class pada paragraf tagline:

1
<p class="tagline">
2
  Ngoding, main game, dan ngulik apa saja.
3
</p>

Sekarang elemen tersebut memiliki class:

1
tagline

Di style.css, class dipilih menggunakan tanda titik:

1
.tagline {
2
  font-size: 18px;
3
}

Perhatikan:

1
HTML
2
class="tagline"
3

4
CSS
5
.tagline

Tanda:

1
.

di depan tagline memberi tahu CSS bahwa kita sedang memilih class.

Sekarang paragraf lain tidak perlu ikut menjadi 18px hanya karena sama-sama menggunakan <p>.

Kita sudah memiliki target yang lebih spesifik untuk kebutuhan styling kita.

Class Bisa Dipakai Lebih dari Sekali#

Class bukan nama yang hanya boleh digunakan satu kali.

Di bagian Link Favorit pada project kita ada link menuju BapakGabut dan GitHub. Kalau keduanya ingin diberi tampilan serupa, kita bisa mengubah HTML-nya menjadi:

1
<li>
2
  <a
3
    class="link-favorit"
4
    href="https://www.bapakgabut.com"
5
  >
6
    BapakGabut
7
  </a>
8
</li>
9

10
<li>
11
  <a
12
    class="link-favorit"
13
    href="https://github.com"
14
  >
15
    GitHub
16
  </a>
17
</li>

Kemudian di style.css:

1
.link-favorit {
2
  color: #2563eb;
3
}

Kedua elemen menggunakan class yang sama.

Keduanya mendapatkan aturan yang sama.

Inilah salah satu alasan class sangat berguna untuk styling:

1
satu class
2
↓
3
bisa digunakan banyak elemen
4
↓
5
style dapat digunakan ulang

Satu Elemen Juga Bisa Punya Beberapa Class#

Tidak hanya satu class bisa dipakai banyak elemen.

Satu elemen juga bisa memiliki beberapa class.

Misalnya:

1
<p class="tagline teks-besar">
2
  Ngoding, main game, dan ngulik apa saja.
3
</p>

Artinya elemen tersebut memiliki dua class:

1
tagline
2
teks-besar

Nama class pada atribut class dipisahkan dengan spasi.

Kita bisa memiliki:

1
.tagline {
2
  color: #e5e7eb;
3
}
4

5
.teks-besar {
6
  font-size: 18px;
7
}

Paragraf tersebut cocok dengan kedua selector.

Jadi ia bisa menerima aturan dari keduanya.

Warna #e5e7eb di sini tetap terlihat terang karena tagline project kita berada di dalam header biru.

Kita belum akan membahas apa yang terjadi kalau dua aturan mengatur property yang sama dengan nilai berbeda.

Itu berkaitan dengan cara CSS menentukan aturan mana yang digunakan.

Nanti kita bahas ketika memang diperlukan.

Untuk sekarang cukup pahami bahwa sebuah elemen bisa memiliki lebih dari satu class.

Lalu Bagaimana dengan ID?#

Gabuters sebenarnya sudah mengenal id sejak Series HTML.

Di project kita ada fragment navigation yang menggunakan pola seperti:

1
<section id="tentang">

dan link:

1
<a href="#tentang">Tentang</a>

id membantu mengidentifikasi satu elemen unik dalam dokumen.

Artinya, dalam satu halaman kita tidak membuat beberapa elemen berbeda dengan id="tentang" yang sama.

CSS juga bisa memilih elemen berdasarkan id.

Caranya menggunakan:

1
#

Contoh:

1
#tentang {
2
  background-color: white;
3
}

Bandingkan:

1
.tagline
2
↓
3
class selector
4

5
#tentang
6
↓
7
ID selector

Keduanya valid dalam CSS.

Tetapi ada perbedaan penting.

id digunakan untuk mengidentifikasi satu elemen unik dalam dokumen.

Sedangkan class dapat digunakan pada banyak elemen.

Karena itu untuk styling yang ingin kita gunakan ulang, class biasanya lebih fleksibel.

Class atau ID?#

Untuk pemula, kita bisa memakai pertanyaan sederhana.

Kalau kita ingin membuat gaya yang mungkin digunakan pada beberapa elemen:

1
class="..."

biasanya menjadi pilihan yang masuk akal.

Misalnya:

1
<p class="teks-muted">...</p>
2
<span class="teks-muted">...</span>

Kemudian:

1
.teks-muted {
2
  color: #666666;
3
}

Kalau elemen sudah memiliki id karena memang perlu diidentifikasi secara unik:

1
<section id="tentang">

CSS tetap boleh memilihnya:

1
#tentang {
2
  background-color: white;
3
}

Jadi jangan berpikir:

1
class = benar
2
id = salah

Bukan begitu.

Keduanya memiliki fungsi dan karakteristik yang berbeda.

Untuk styling yang reusable, kita akan lebih sering menggunakan class.

Sekarang Kita Perbaiki Halaman Profil#

Mari gunakan pengetahuan tadi pada project kita.

Pertama, buka index.html, lalu tambahkan class pada tagline di dalam <header>:

1
<p class="tagline">
2
  Ngoding, main game, dan ngulik apa saja.
3
</p>

Kemudian tambahkan ke style.css:

1
.tagline {
2
  font-size: 18px;
3
  color: #e5e7eb;
4
}

Simpan kedua file, lalu refresh browser.

Sekarang kita bisa mengatur tagline tanpa mengubah semua <p> di halaman.

Kalau tadi menambahkan class pada dua link favorit, kita juga bisa mempertahankan aturan:

1
.link-favorit {
2
  color: #2563eb;
3
}

Tujuannya belum membuat desain final.

Kita sedang melihat bagaimana class memberi target yang masuk akal untuk aturan yang ingin digunakan pada elemen tertentu atau dipakai ulang.

Kita Sudah Pernah Menggunakan Selector yang Sedikit Berbeda#

Sekarang kembali ke CSS #1.

Kita pernah menulis:

1
nav a {
2
  color: white;
3
  text-decoration: none;
4
}

Ini menarik.

Kenapa tidak hanya:

1
a {
2
  color: white;
3
}

Karena kalau kita menggunakan:

1
a

kita menargetkan semua link yang cocok di seluruh halaman.

Padahal waktu itu kita hanya ingin mengatur link yang berada di dalam navigasi pada header biru.

Dengan:

1
nav a

kita menyatakan secara sederhana:

Pilih elemen <a> yang berada di dalam <nav>.

Secara teknis ini disebut descendant selector.

Untuk sekarang tidak perlu menghafal istilahnya. Cukup pahami cara membacanya.

Selector tidak selalu hanya satu kata. Ia bisa membantu kita mempersempit elemen yang ingin ditargetkan berdasarkan konteksnya.

Beberapa Selector Bisa Berbagi Aturan#

Misalnya kita ingin <h2> dan <h3> memiliki warna yang sama.

Kita bisa menulis:

1
h2 {
2
  color: #1f2937;
3
}
4

5
h3 {
6
  color: #1f2937;
7
}

Valid.

Tetapi CSS juga memungkinkan kita mengelompokkan selector:

1
h2,
2
h3 {
3
  color: #1f2937;
4
}

Tanda koma membentuk daftar selector yang berbagi declaration block yang sama.

Baca seperti:

Pilih h2 dan h3, lalu gunakan aturan ini.

Jangan tertukar dengan:

1
nav a

Karena:

1
h2,
2
h3

dan:

1
nav a

memiliki arti berbeda.

Yang pertama mengelompokkan selector.

Yang kedua memilih elemen berdasarkan konteks keberadaannya.

Coba Baca CSS Ini Tanpa Bantuan#

Sekarang coba lihat:

1
.tagline {
2
  font-size: 18px;
3
  color: #e5e7eb;
4
}

Kita sudah bisa membacanya:

1
.tagline
2
↓
3
pilih elemen dengan class "tagline"
4

5
font-size
6
↓
7
atur ukuran font
8

9
18px
10
↓
11
nilainya
12

13
color
14
↓
15
atur warna teks
16

17
#e5e7eb
18
↓
19
nilainya

Sekarang:

1
nav a {
2
  color: white;
3
}

Kita juga mulai bisa membacanya:

Pilih link yang berada di dalam navigasi, lalu ubah warna teksnya menjadi putih.

Ini jauh lebih penting daripada menghafal puluhan property.

Kalau kita bisa membaca CSS, mempelajari property baru nanti jauh lebih mudah.

Coba Eksperimen#

Sekarang waktunya sedikit mengacak-acak project lagi. 😄

Coba tambahkan class:

1
class="sorot"

pada salah satu elemen yang masuk akal.

Lalu tambahkan ke style.css:

1
.sorot {
2
  color: tomato;
3
}

Simpan dan refresh.

Pindahkan class tersebut ke elemen lain.

Lihat apa yang terjadi.

Kemudian coba gunakan class yang sama pada dua elemen.

Tujuannya adalah melihat hubungan:

1
class di HTML
2
↓
3
class selector di CSS
4
↓
5
elemen yang cocok mendapat aturan

Setelah selesai bereksperimen, Gabuters bebas menghapus class latihan tersebut.

Kita belum sedang mengejar desain final.

Kita sedang memahami cara CSS menemukan targetnya.

Kalau Style Tidak Muncul, Cek Selector-nya#

Di CSS #1 kita sudah mengecek apakah file CSS berhasil terhubung.

Sekarang ada jenis kesalahan baru.

File CSS sudah dimuat, tetapi satu aturan tertentu tidak bekerja.

Misalnya HTML:

1
<p class="tagline">
2
  Ngoding, main game, dan ngulik apa saja.
3
</p>

Tetapi CSS:

1
.tag-line {
2
  font-size: 18px;
3
}

Perhatikan:

1
tagline
2
tag-line

Itu dua nama berbeda.

CSS tidak akan menebak maksud kita.

Begitu juga kalau kita menulis:

1
tagline {
2
  font-size: 18px;
3
}

Tanpa titik, CSS tidak membacanya sebagai class selector.

Bandingkan:

1
p
2
↓
3
element selector
4

5
.tagline
6
↓
7
class selector
8

9
#tentang
10
↓
11
ID selector

Satu karakter kecil bisa mengubah arti selector.

Kalau aturan belum bekerja, periksa:

• apakah nama class di HTML dan CSS sama persis;
• apakah tanda . untuk class atau # untuk ID sudah benar;
• apakah kurung kurawal, titik dua, dan titik koma sudah berada di tempatnya;
• apakah file sudah disimpan sebelum browser di-refresh.

Hal-hal kecil seperti ini akan terasa semakin natural setelah kita sering menulis CSS.

Apa yang Sudah Kita Pelajari?#

Sekarang CSS kita tidak lagi terlihat seperti sekumpulan simbol misterius.

Kita sudah mengenal pola:

1
selector {
2
  property: value;
3
}

Kita juga sudah mencoba beberapa cara memilih elemen:

1
p {
2
  /* ... */
3
}

Element selector.

1
.tagline {
2
  /* ... */
3
}

Class selector.

1
#tentang {
2
  /* ... */
3
}

ID selector.

Dan:

1
nav a {
2
  /* ... */
3
}

Selector yang memilih link berdasarkan konteksnya di dalam navigasi.

Kita juga melihat bahwa selector tidak terbatas pada empat bentuk tersebut. CSS memiliki cara lain untuk memilih elemen, tetapi kita belum membutuhkannya sekarang.

Yang paling penting, ketika melihat CSS kita sudah mulai bisa bertanya:

1
Elemen mana yang dipilih?
2
↓
3
Apa yang diatur?
4
↓
5
Nilainya apa?

Itu adalah fondasi yang akan terus kita gunakan.

Selanjutnya: Kenapa Jarak dan Ukuran Elemen Kadang Terasa Aneh?#

Di CSS #1 kita sempat menggunakan:

1
padding: 20px;

dan saya sengaja bilang:

Nanti kita bahas.

Nah.

Waktunya hampir tiba. 😄

Sebuah elemen di browser bukan hanya “teks di layar”.

Ia memiliki area content, padding, border, dan margin.

Cara browser memperlakukan bagian-bagian tersebut dikenal sebagai:

CSS Box Model.

Di artikel berikutnya kita akan membongkar:

1
margin
2
border
3
padding
4
content

dan melihat kenapa memahami empat hal itu membuat mengatur ukuran dan jarak halaman jauh lebih masuk akal.