Cara Kerja Styling dan Interaktivitas

Bayangkan sebuah halaman web seperti rumah yang sedang dibangun. Mula-mula tukang mendirikan rangka, dinding, dan ruangan — itulah struktur dasarnya. Setelah itu seorang desainer mengecat dinding, memilih perabot, dan mengatur pencahayaan. Terakhir, sakelar dipasang supaya sekali ditekan lampunya benar-benar menyala. Sebuah halaman web tersusun persis dengan urutan itu: struktur dulu, lalu gaya, baru perilaku.

Kalau kamu pernah melihat halaman HTML polos tanpa hiasan — tulisan hitam di atas latar putih, semuanya menumpuk dalam satu kolom — kamu sebenarnya sedang melihat rumah yang baru sampai tahap rangka. Berfungsi, ya, tapi belum bisa disebut jadi. Di artikel ini kita akan menelusuri dua lapisan yang menyelesaikan pekerjaan tadi: CSS, yang membuat halaman tampil sesuai keinginanmu, dan JavaScript, yang membuatnya merespons apa yang dilakukan pengunjung. Tujuannya bukan menghafal sintaks, melainkan membangun gambaran yang jernih tentang bagaimana semua bagian ini saling menyatu ketika kamu benar-benar mulai membangun sesuatu.

Tiga lapisan, dan kenapa urutannya penting

Setiap halaman di web sejatinya adalah tiga tugas yang ditangani tiga alat berbeda:

HTML menjelaskan apa yang ada di halaman — judul, paragraf, tombol, gambar. Ini bagian struktur.
CSS menjelaskan seperti apa tampilannya — warna, jarak, jenis huruf, posisi tiap elemen di layar. Ini bagian gaya.
JavaScript menjelaskan bagaimana ia berperilaku — apa yang terjadi saat seseorang mengklik, mengetik, atau menggulir layar. Ini bagian perilaku.

Memisahkan ketiganya adalah salah satu prinsip paling tua dalam pengembangan web. Artinya kamu bisa mengganti tampilan tanpa menyentuh isi, atau menambah interaksi baru tanpa menulis ulang tata letak. Tiap lapisan punya satu tugas, dan mereka tidak saling mengganggu.

HTML  ->  struktur   (apa yang ada di halaman)
CSS   ->  gaya       (seperti apa tampilannya)
JS    ->  perilaku   (bagaimana ia merespons)

Saat membangun, kamu hampir selalu menempuh urutan ini. HTML ditulis dulu supaya isinya ada dan masuk akal berdiri sendiri. CSS ditambahkan supaya tampilannya pas. Baru, kalau halaman memang perlu melakukan sesuatu di luar sekadar menampilkan isi, kamu mengambil JavaScript. Memulai dari struktur yang kokoh membuat dua lapisan berikutnya jauh lebih gampang, sebab CSS maupun JavaScript bekerja dengan cara menunjuk ke bagian-bagian HTML-mu.

Bangun dengan urutan yang sama setiap kali

Struktur, lalu gaya, baru perilaku. Kalau HTML-mu sudah bermakna sendirian — tetap terbaca walau tanpa CSS — sisa pekerjaanmu jadi lebih ringan. Struktur yang berantakan justru bikin proses styling dan scripting lebih sulit dari yang seharusnya.

Bagaimana CSS menyulap HTML polos jadi sebuah desain

CSS adalah singkatan dari Cascading Style Sheets. Lupakan dulu nama resminya; idenya sederhana: kamu menulis aturan yang berkata, “cari elemen-elemen ini, lalu buat tampilannya seperti ini.”

Satu aturan punya dua bagian — sebuah selektor yang memilih elemen mana yang dikenai, dan sekumpulan deklarasi yang menjelaskan tampilannya. Berikut aturan yang membuat setiap paragraf jadi teks yang nyaman dibaca:

p {
  color: #1f2933;
  font-size: 18px;
  line-height: 1.6;
}

Huruf p di depan adalah selektornya — ia cocok dengan setiap elemen <p> di halaman. Semua yang ada di dalam kurung kurawal adalah deklarasi: sebuah properti (misalnya color) yang dipasangkan dengan nilai (misalnya #1f2933). Browser membaca aturannya, menemukan elemen yang cocok, lalu menerapkan tampilannya.

Selektor sekilas

Selektor adalah cara kamu membidik. Jarang sekali kamu ingin semua paragraf tampil identik, jadi CSS memberi beberapa cara untuk lebih spesifik:

Selektor	Yang dibidik	Contoh
`p`	Setiap elemen jenis itu	semua paragraf
`.card`	Setiap elemen dengan class itu	apa pun yang ditandai `class="card"`
`#summary`	Satu elemen dengan id itu	elemen ber-`id="summary"`
`nav a`	Tautan di dalam nav	hanya tautan menu

Class adalah andalan utama. Kamu cukup menambahkan class="card" ke elemen HTML mana pun yang ingin ditata sebagai kartu, dan aturan .card berlaku untuk semuanya. Cara ini membuat gayamu bisa dipakai ulang: definisikan tampilannya sekali, tempelkan class-nya di mana pun diperlukan.

Cascade: siapa menang saat aturan bentrok

Di sinilah kata “cascading” pada namanya benar-benar bekerja. Apa yang terjadi kalau dua aturan sama-sama mencoba menata elemen yang sama, tapi isinya bertentangan? CSS tidak menampilkan error — ia menyelesaikan bentrokan itu memakai serangkaian prioritas. Secara sederhana:

Spesifisitas — selektor yang lebih spesifik mengalahkan yang lebih umum. Aturan yang membidik #summary lebih tinggi daripada aturan untuk semua paragraf, karena id lebih spesifik dibanding jenis elemen.
Urutan penulisan — kalau dua aturan sama spesifiknya, yang ditulis belakangan yang menang. Kata terakhir menentukan.
Pewarisan — beberapa properti, seperti warna teks dan jenis huruf, mengalir turun dari elemen induk ke anak-anaknya kecuali ada yang menimpanya. Atur font di body, dan semua isinya ikut memakainya tanpa repot.

Anggap saja ini perdebatan sopan yang diselesaikan browser untukmu. Makin tajam dan spesifik sebuah aturan, makin berat bobotnya.

p {
  color: gray;        /* umum: semua paragraf */
}

#summary {
  color: navy;        /* spesifik: menang untuk paragraf ringkasan */
}

Pada contoh di atas, paragraf ber-id="summary" berakhir berwarna navy, sementara paragraf lain tetap abu-abu. Kedua aturan berlaku; cascade yang memutuskan bagian yang tumpang tindih.

Cascade itu fitur, bukan keanehan

Saat sebuah warna “tidak mau berubah”, penyebabnya hampir tidak pernah acak. Ada aturan lain yang sekadar lebih spesifik atau ditulis belakangan. Belajar membaca cascade — alih-alih melawannya dengan menumpuk !important — adalah salah satu lompatan terbesar bagi pemula.

Kalau kamu ingin mendalami properti, sistem tata letak seperti Flexbox dan Grid, serta cara merapikan stylesheet, bagian CSS di blog ini membahasnya selangkah demi selangkah.

Bagaimana JavaScript menambahkan perilaku

CSS membuat halaman terlihat selesai. Tapi halaman yang sudah ditata pun masih seperti poster — indah namun diam total. Begitu kamu ingin ada sesuatu yang terjadi sebagai respons terhadap pengunjung, kamu butuh JavaScript.

JavaScript adalah bahasa pemrograman sungguhan yang berjalan di dalam browser. Ia bisa membaca halaman, mengubahnya, dan menyimak apa yang dilakukan pengguna. Pola berpikirnya terbagi dua: simak sebuah event, lalu lakukan sesuatu ketika event itu terjadi.

Merespons sebuah klik

Event itu sekadar “ada sesuatu yang terjadi” — sebuah klik, penekanan tombol, atau halaman yang selesai dimuat. Kamu memberi tahu browser, “saat hal tertentu ini terjadi pada elemen tertentu ini, jalankan kodeku.” Instruksi itu disebut event listener.

const button = document.querySelector("#subscribe");

button.addEventListener("click", () => {
  console.log("Jane Doe menekan tombol subscribe");
});

Bacalah seperti sebuah kalimat. Pertama, document.querySelector("#subscribe") masuk ke dalam halaman dan mengambil elemen ber-id="subscribe" — perhatikan bahwa ia memakai sintaks selektor yang sama dengan CSS, dan itu bukan kebetulan. Lalu addEventListener("click", ...) berkata: setiap kali tombol ini diklik, jalankan fungsi yang menyertainya. Fungsi panah () => { ... } adalah blok pekerjaan yang harus dilakukan. Klik tombolnya, dan pesannya muncul.

Memperbarui halaman

Mencetak pesan ke konsol cukup untuk latihan, tapi kekuatan sebenarnya ada pada mengubah apa yang dilihat pengunjung. JavaScript bisa masuk ke dalam halaman — versi HTML-mu yang hidup di memori dan disebut browser sebagai DOM (Document Object Model) — lalu menyuntingnya secara langsung.

const button = document.querySelector("#subscribe");
const status = document.querySelector("#status");

button.addEventListener("click", () => {
  status.textContent = "Terima kasih sudah berlangganan!";
});

Sekarang mengklik tombol akan mengganti teks pada elemen status. Tidak ada yang dimuat ulang; halaman cukup memperbarui dirinya di tempat. Satu ide itu — simak event, lalu ubah halaman — adalah benih dari setiap fitur interaktif yang pernah kamu pakai, mulai dari menu dropdown, tombol suka, sampai aplikasi web utuh.

Pastikan strukturnya ada lebih dulu

JavaScript bekerja dengan menemukan elemen yang sudah ada di HTML-mu. Kalau skripmu berjalan sebelum elemennya ada, querySelector tidak menemukan apa-apa dan kodemu diam-diam tidak melakukan apa pun. Inilah alasan paling jelas kenapa urutannya struktur dulu, perilaku terakhir — kamu tak bisa menunjuk sesuatu yang belum dibangun.

Kalau kamu ingin belajar variabel, fungsi, dan cara memanipulasi DOM dengan benar, bagian JavaScript di blog ini membahasnya dari nol.

Menyatukan ketiganya

Mari kita lihat lapisan-lapisan ini saling menumpuk lewat contoh kecil: sebuah tombol yang memunculkan pesan tersembunyi. Kita bangun dengan cara yang benar — struktur, lalu gaya, baru perilaku.

Pertama struktur. HTML biasa, sudah bermakna sendiri:

<button id="reveal">Tampilkan detail</button>
<p id="message" class="hidden">Selamat datang di ACY Partner Indonesia.</p>

Lalu gaya. Kita tentukan seperti apa “tersembunyi” itu dan kita poles sedikit tombolnya:

.hidden {
  display: none;
}

#reveal {
  background: #00b8e6;
  color: white;
  padding: 10px 18px;
  border-radius: 8px;
}

Terakhir perilaku. Kita simak kliknya lalu hapus class hidden supaya pesannya muncul:

const reveal = document.querySelector("#reveal");
const message = document.querySelector("#message");

reveal.addEventListener("click", () => {
  message.classList.remove("hidden");
});

Perhatikan betapa rapinya lapisan-lapisan ini bekerja sama. HTML menyediakan tombol dan pesannya. CSS memutuskan pesannya awalnya tak terlihat. JavaScript membalik keadaan itu saat pengguna bertindak — dan ia melakukannya dengan menyalakan-mematikan sebuah class CSS, membiarkan CSS yang mengurus tampilan sebenarnya. Tiap alat tetap pada jalurnya, dan bersama-sama mereka menghasilkan sesuatu yang terasa hidup.

klik  ->  JS hapus "hidden"  ->  CSS tampilkan elemen  ->  pengguna melihat pesan

Pola ini — JavaScript mengubah class, CSS bereaksi terhadap class itu — bakal sering kamu pakai. Pola ini menjaga aturan visual tetap di CSS sesuai tempatnya, dan menjaga JavaScript fokus pada kapan sesuatu berubah, bukan bagaimana tampilannya.

Rangkuman

Sekarang kamu sudah punya pola berpikir yang mengikat front end jadi satu. Begini bentuknya:

Sebuah halaman web dibangun dalam tiga lapisan: HTML untuk struktur, CSS untuk gaya, JavaScript untuk perilaku. Ketiganya dipisah supaya masing-masing bisa berubah tanpa merusak yang lain.
CSS bekerja lewat aturan yang terdiri dari selektor (elemen mana) dan deklarasi (seperti apa tampilannya). Saat aturan bentrok, cascade yang menentukan pemenang lewat spesifisitas, urutan penulisan, dan pewarisan.
JavaScript menambahkan perilaku dengan pola sederhana: simak sebuah event, lalu perbarui halaman. Ia menemukan elemen memakai ide selektor yang sama dengan CSS.
Cara membangun yang andal adalah struktur, lalu gaya, baru perilaku — karena styling maupun scripting sama-sama bergantung pada struktur yang sudah ada lebih dulu.

Begitu pola ini klik di kepala, sisa proses belajar front end berhenti terasa seperti tumpukan trik yang tak nyambung. Setiap teknik baru yang kamu temui hanyalah cara yang lebih kaya untuk mengerjakan salah satu dari tiga tugas ini. Dirikan rangkanya, cat dindingnya, pasang sakelarnya — dengan urutan itu — dan halamanmu pun hidup.