Pernahkah kamu membuka sebuah website dan melihat tampilannya sangat rapi, memiliki warna indah, tata letak tombol yang menarik serta responsif saat dibuka dilayar besar dan layar kecil? Semua keindahan visual tersebut bukan dibuat hanya menggunakan HTML biasa, melainkan bantuan dari CSS.

1. Apa Itu CSS?

CSS adalah singkatan dari Cascading Style Sheets. Jika HTML diibaratkan sebagai rangka tubuh manusia (tulang dan organ), maka CSS adalah pakaian, gaya rambut, dan aksesori yang membuat penampilan manusia tersebut menjadi menarik.

CSS bertugas mengatur seluruh tampilan visual halaman web, mulai dari warna teks, jenis font, jarak antar elemen, warna latar belakang, hingga posisi tata letak layout.

2. Struktur Dasar Penulisan CSS (Sintaks)

Sebelum menulis kode CSS, penting untuk memahami strukturnya. Penulisan kode CSS terdiri dari tiga bagian utama: Selector, Property, dan Value.

• Selector: Elemen HTML yang ingin diubah tampilannya (misalnya judul h1 atau paragraf p).

• Property: Bagian dari elemen tersebut yang ingin diatur (misalnya warna color atau ukuran teks font-size).

• Value: Nilai atau pilihan yang dimasukkan ke dalam property (misalnya nilai satuan angka misal 100px, 30%, atau warna green atau blue).

3. Tiga Metode Penulisan Kode CSS

Ada tiga cara untuk memasukkan kode CSS ke dalam halaman web:

4. Konsep Penting Lainnya dalam CSS

A. Mengenal Selector Utama (Element, Class, dan ID)

Agar bisa memilih elemen dengan tepat, kamu bisa menggunakan penanda:

• Tag Selector: Mengubah semua elemen sesuai nama tag-nya.

  CSS

  p { color: black; }
  

• Class Selector (Menggunakan Tanda Titik .): Bisa dipakai berulang kali pada elemen yang berbeda.

  CSS

  .tombol-utama { background-color: green; }
  

• ID Selector (Menggunakan Tanda Pagar #): Hanya boleh digunakan oleh satu elemen unik dalam satu halaman.

  CSS

  #header-utama { background-color: yellow; }
  

B. Konsep Box Model

Di dalam CSS, semua elemen dianggap sebagai sebuah “kotak” terbungkus. Setiap kotak memiliki 4 lapisan utama:

1. Content: Isi utama (teks atau gambar).

2. Padding: Ruang kosong antara isi teks dengan garis tepi (border).

3. Border: Garis pembatas/bingkai di luar padding.

4. Margin: Jarak kosong antara bingkai luar elemen tersebut dengan elemen lain di sekitarnya.