Apa Itu CSS? Panduan Pemula untuk Mempercantik Web

Kalau kamu sudah mengikuti artikel-artikel HTML, sebenarnya kamu sudah bisa membuat halaman web. Tapi coba buka halaman buatanmu itu di browser, pasti ada yang langsung kamu rasakan: tampilannya polos banget. Teksnya hitam, link-nya biru bergaris bawah, latarnya putih, fontnya seadanya. Jalan, sih, tapi jauh dari kata enak dipandang.

Nah, di sinilah CSS masuk. CSS adalah bahasa yang mengubah HTML polosmu jadi enak dilihat — warna, font, jarak antar elemen, tata letak, pokoknya semua sisi visual sebuah website. Setiap situs keren yang pernah kamu buka jadi keren karena CSS. Kabar baiknya, dasar-dasarnya nggak ribet kok, malah gampang dicicil pelan-pelan. Yuk, kita mulai.

CSS itu sebenarnya apa

CSS itu singkatan dari Cascading Style Sheets. Sama seperti HTML, namanya kedengaran lebih seram daripada konsep aslinya. Coba kita pecah satu per satu:

• Style Sheets — sekumpulan aturan tampilan. Kamu menulis aturan yang isinya kira-kira: “judul warnanya biru,” “paragraf pakai font ini,” “kotak ini sudutnya dibikin membulat.”
• Cascading — ada mekanisme untuk menentukan aturan mana yang menang kalau ada beberapa aturan yang sama-sama bisa berlaku pada satu elemen. (Bagian ini kita bahas lebih dalam nanti; untuk sekarang, cukup ingat bahwa “cascading” itu soal bagaimana style saling bergabung dan saling menimpa.)

Satu ide inti yang wajib kamu pegang: HTML mengurus struktur dan isi; CSS mengurus tampilan. HTML bilang “ini judul, ini paragraf.” CSS bilang “judulnya bikin besar dan biru tua, paragrafnya bikin abu-abu dengan jarak baris yang nyaman dibaca.” Dua hal ini adalah dua lapisan yang berbeda, dan kebiasaan memisahkan keduanya termasuk salah satu prinsip paling penting dalam dunia web.

Masih ingat analogi rumah di artikel HTML? HTML itu rangka dan temboknya, sedangkan CSS itu catnya, perabotnya, sampai desain interiornya. Kalau cuma punya HTML, kamu memang sudah dapat bangunan yang berdiri, tapi terasa kosong dan gersang. CSS-lah yang mengubahnya jadi tempat yang nyaman dan betah dihuni.

Anatomi sebuah rule CSS

Cara kerja CSS adalah dengan menulis rule (aturan). Setiap rule menentukan elemen mana yang dituju, lalu menjelaskan elemen itu harus tampil seperti apa. Ini contoh satu rule yang utuh:

p {
  color: blue;
  font-size: 18px;
}

Yuk, kita kasih nama tiap bagiannya, karena istilah-istilah ini bakal muncul terus nanti:

• p itu selector — bagian yang menentukan elemen mana yang kena rule ini. Di contoh ini, semua <p> (paragraf) di halaman.
• Kurung kurawal { } membungkus declaration block — yaitu semua pengaturan tampilannya.
• color: blue; adalah satu declaration. Isinya property (color) dan value (blue), dipisah oleh titik dua dan ditutup titik koma.
• font-size: 18px; adalah declaration berikutnya.

Jadi kalau dibaca utuh, rule tadi artinya: “Untuk setiap paragraf, atur warna teksnya jadi biru dan ukuran fontnya jadi 18 piksel.” Kamu boleh menaruh declaration sebanyak yang kamu mau di dalam kurung kurawal, asalkan tiap baris ditutup titik koma.

Polanya selalu sama: selector, lalu satu blok declaration property: value;. Setelah kamu lihat polanya beberapa kali, rule CSS apa pun bakal langsung kelihatan akrab.

Property: hal-hal yang bisa kamu ubah

Property itu satu hal spesifik dari sebuah elemen yang ingin kamu atur. Jumlahnya ada ratusan, tapi pada praktiknya kamu cuma akan sering bolak-balik memakai segelintir saja. Ini beberapa yang bakal kamu temui sejak awal:

Nggak usah dihafalin satu-satu. Yang sering kamu pakai bakal nempel sendiri, sisanya tinggal kamu cari kalau lagi butuh — developer berpengalaman pun melakukan hal yang sama persis.

Tiga cara menambahkan CSS ke halaman

CSS tetap harus dihubungkan ke HTML-mu lewat satu cara tertentu. Ada tiga cara untuk melakukannya, dan ketiganya sama-sama penting kamu tahu — walaupun nanti ada satu yang paling dianjurkan.

1. Inline style (memakai atribut style)

Kamu bisa menempelkan CSS langsung di satu elemen lewat atribut style:

<p style="color: blue;">Paragraf ini biru.</p>

Cara ini jalan, tapi cuma berpengaruh ke satu elemen itu saja, dan dia mencampur tampilan ke dalam HTML — persis pencampuran yang lagi kita coba hindari. Boleh dipakai buat coba-coba cepat, tapi jangan untuk proyek beneran.

2. Internal style (tag style di dalam head)

Kamu bisa menaruh CSS di dalam elemen <style> yang diletakkan di bagian <head> halaman:

<head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>

Sekarang rule itu berlaku untuk semua paragraf di halaman tersebut. Sudah lebih baik daripada inline — tapi style-nya tetap cuma berlaku di halaman ini saja.

3. Stylesheet eksternal (cara yang dianjurkan)

Cara paling ideal adalah menaruh CSS-mu di file terpisah (misalnya styles.css), lalu menautkannya dari bagian <head> HTML-mu:

<head>
  <link rel="stylesheet" href="styles.css" />
</head>

Dan di styles.css:

p {
  color: blue;
}

Beginilah website beneran dibangun, dan alasannya kuat: satu stylesheet bisa menata seluruh situsmu (semua halaman menautkan ke file yang sama), tampilan jadi benar-benar terpisah dari struktur, dan browser bisa menyimpan file-nya di cache sehingga situsmu kebuka lebih cepat. Jadikan stylesheet eksternal sebagai kebiasaan defaultmu.

Style pertamamu

Sekarang kita gabungkan semuanya. Ini contoh halaman HTML kecil beserta stylesheet eksternal yang menatanya. Kita mulai dari HTML-nya dulu:

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
    <title>Halaman Bergaya Saya</title>
  </head>
  <body>
    <h1>Selamat datang</h1>
    <p>Halaman ini sudah punya sedikit gaya.</p>
  </body>
</html>

Lalu styles.css yang menghidupkan tampilannya:

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}

h1 {
  color: #00838f;
}

p {
  color: #333333;
  font-size: 18px;
}

Hasilnya, halaman langsung berubah dari tampilan bawaan yang polos menjadi sesuatu yang memang sengaja dirancang: latar abu-abu muda, font sans-serif yang bersih, judul berwarna teal, dan teks isi abu-abu gelap. Inilah inti dari seluruh alur kerja CSS — pilih elemen pakai selector, lalu atur property yang kamu inginkan. Sisanya yang akan kamu pelajari nanti pada dasarnya cuma soal lebih banyak selector dan lebih banyak property.

Sedikit soal warna

Tadi kamu lihat blue, lalu ada juga #00838f dan #f4f4f4. Di CSS, ada beberapa cara untuk menyebut warna:

• Nama warna seperti blue, red, teal — gampang diingat, tapi pilihannya terbatas pada daftar yang sudah baku.
• Kode hex seperti #00838f — tanda # diikuti enam karakter yang mewakili kadar merah, hijau, dan biru. Cara ini memberi kamu akses ke jutaan warna dan paling sering dipakai.

Nggak perlu repot menghafal kode hex — bakal ada artikel khusus soal warna nanti. Untuk sekarang, cukup paham bahwa #00838f itu sekadar cara yang presisi untuk menunjuk satu corak warna tertentu.

Penutup

Sekarang kamu sudah pegang fondasi mempercantik web:

• CSS (Cascading Style Sheets) adalah bahasa yang mengatur tampilan sebuah halaman web — warna, font, jarak, tata letak — sementara HTML mengurus strukturnya.
• CSS ditulis dalam bentuk rule: sebuah selector menentukan elemen, lalu blok declaration property: value; menjelaskan tampilannya seperti apa.
• Ada tiga cara menambahkan CSS — inline, internal, dan eksternal — dan stylesheet eksternal (<link rel="stylesheet">) adalah cara yang dianjurkan untuk situs beneran.
• Kamu menata sesuatu dengan cara memilih elemen lalu mengatur property seperti color, font-size, background-color, margin, dan padding.

Itu fondasi yang nyata — dan cara terbaik biar ilmunya nempel adalah dengan langsung dicoba. Bikin satu file HTML dan satu styles.css di sebelahnya, tautkan keduanya, lalu mulai utak-atik warna dan ukurannya. Amati bagaimana halaman langsung berubah tiap kali kamu mengubah nilainya.

Di artikel berikutnya, kita akan menyelami lebih dalam soal selector — bagian dari rule yang menentukan elemen mana yang ditata. Di selector inilah CSS mulai menunjukkan kekuatannya: kamu bisa menyasar persis elemen yang kamu mau, dan inilah kunci untuk menata halaman beneran dengan rapi dan presisi.