Halo Sobat Jurnal Coding! Pada tutorial sebelumnya, kita sudah berhasil berdiri tegak dengan bangga karena sukses merakit kerangka website pertama kita menggunakan bahasa HTML. Kita sudah bisa menampilkan judul teks tebal dan beberapa baris kalimat paragraf di dalam Google Chrome.

Namun, mari kita jujur pada diri kita sendiri saat menatap hasil karya HTML tersebut: Tampilannya sangat amat menyedihkan, bukan? Website kita terlihat sangat jadul, kaku, garing, mirip seperti dokumen laporan skripsi tahun 1995 dengan latar belakang putih polos dan jenis huruf Times New Roman hitam yang bikin ngantuk. Di zaman modern seperti sekarang, tidak akan ada pengunjung yang betah berlama-lama membaca di website sekaku itu, dan tim *reviewer* Google AdSense pun pasti akan langsung menolak situs tersebut karena dianggap tidak memiliki nilai kenyamanan pengguna (*User Experience*).

Di sinilah pahlawan kedua kita datang menyelamatkan situasi. Pahlawan tersebut bernama **CSS** (*Cascading Style Sheets*).

Jika HTML bertindak sebagai batu bata dan tiang beton yang kaku, maka CSS bertindak sebagai desainer interior, penata busana, sekaligus penata rias wajah yang akan mengubah tampilan website-mu dari selevel dokumen teks biasa menjadi sekelas dasbor teknologi masa depan yang super estetik!

### Bagaimana Cara Kerja CSS Berkomunikasi dengan HTML?

Sama seperti HTML, bahasa CSS juga **bukanlah** bahasa pemrograman karena dia tidak memiliki logika perhitungan matematika atau pengambil keputusan If/Else. CSS adalah bahasa gaya (*styling*).

Pola pikir dalam menulis CSS sebenarnya sangat sederhana dan berpaku pada tiga buah pilar utama: **Selektor (Siapa Targetnya)**, **Properti (Apa yang Mau Diubah)**, dan **Value (Bagaimana Wujud Perubahannya)**.

Bayangkan kamu adalah seorang guru seni rupa di dalam kelas yang penuh dengan murid. Kamu berteriak memberikan instruksi tegas: *"Hai Budi (Selektor), ganti bajumu (Properti) menjadi warna biru terang (Value)!"* Nah, cara kita menuliskan perintah teriakan tersebut di dalam file CSS adalah seperti ini:



Mari kita bedah maksud dari mantra seni di atas:
- `h1` : Ini adalah **Selektor**. Kita sedang membisiki browser komputer: *"Tolong cari semua elemen tag h1 (judul utama) yang ada di dalam file HTML."*
- `color: #00ffff;` : Ini adalah perintah untuk mengubah warna teks font menjadi biru terang (*Cyan*). Kode `#00ffff` adalah kode warna HEX internasional untuk warna biru khas teknologi masa depan. Jangan lupa mengakhirinya dengan titik koma `;` agar sistem tidak error!
- `font-family: sans-serif;` : Mengubah jenis huruf teks dari Times New Roman yang jadul menjadi jenis huruf modern yang bersih tanpa kaki (*sans-serif*) seperti Arial atau Helvetica.
- `text-align: center;` : Menyuruh teks judul tersebut agar otomatis bergeser posisi tepat di tengah-tengah layar monitor komputer pengunjung.

### Tiga Gerbang Memasang CSS ke HTML

Lalu, di mana kita harus mengetikkan kode CSS tersebut agar dia bisa terbaca oleh file HTML kita? Ada tiga jalur resmi yang disediakan oleh standar web internasional, mari kita bahas dari yang paling dilarang hingga yang paling direkomendasikan:

1. Inline CSS (Jalur Darurat Kurang Rapi)
Kamu mengetikkan kode CSS langsung di dalam tag HTML-nya menggunakan atribut style. Jalur ini sangat praktis untuk mengubah satu baris teks dengan cepat, tetapi sangat tidak disarankan karena akan membuat file HTML-mu terlihat sangat gemuk, kotor, dan berantakan jika proyek websitemu sudah membesar.
Contoh: `

Halo

`

2. Internal CSS (Jalur Kelas Menengah)
Kamu mengetikkan seluruh kode CSS di dalam tag khusus bernama `