Mengenal CSS: Dari Dasar Hingga Mahir

CSS atau Cascading Style Sheets adalah bahasa yang digunakan untuk mengatur tampilan dan layout halaman web. Jika HTML adalah kerangka sebuah rumah, maka CSS adalah cat, wallpaper, dan dekorasi yang membuat rumah tersebut terlihat indah dan nyaman.

Apa itu CSS?

CSS bekerja dengan cara memilih elemen HTML dan menerapkan style kepadanya. Misalnya, kamu bisa mengubah warna teks, ukuran font, jarak antar elemen, dan banyak lagi. CSS dipisahkan dari HTML agar kode lebih rapi dan mudah diatur.

Ada tiga cara untuk menambahkan CSS ke halaman web. Cara pertama adalah inline CSS, yaitu menulis style langsung di elemen HTML. Cara kedua adalah internal CSS, yaitu menulis style di dalam tag style di bagian head. Cara ketiga adalah external CSS, yaitu membuat file CSS terpisah dan menghubungkannya ke HTML. Cara external adalah yang paling direkomendasikan.

Selector dan Property

CSS bekerja dengan dua komponen utama: selector dan property. Selector digunakan untuk memilih elemen HTML yang ingin diubah, sedangkan property adalah atribut yang ingin diubah beserta nilainya. Sebagai contoh, kamu bisa memilih semua elemen heading dan mengubah warnanya menjadi biru.

Selector bisa berupa nama tag, class, atau id. Class selector ditandai dengan tanda titik di depan nama class, sedangkan id selector ditandai dengan tanda pagar di depan nama id. Class bisa digunakan berulang kali di banyak elemen, sedangkan id harus unik dan hanya digunakan satu kali per halaman.

Box Model

Setiap elemen HTML dianggap sebagai kotak dalam CSS. Kotak ini terdiri dari empat lapisan: content, padding, border, dan margin. Content adalah konten elemen, padding adalah jarak antara konten dan border, border adalah garis tepi elemen, dan margin adalah jarak antara elemen dengan elemen lain.

Memahami box model sangat penting karena hampir semua layout di CSS bergantung pada konsep ini. Kamu bisa mengatur ukuran setiap lapisan menggunakan property yang sesuai. Box model juga menentukan bagaimana ukuran total sebuah elemen dihitung.

Flexbox dan Grid

CSS modern menyediakan dua sistem layout yang sangat powerful: Flexbox dan Grid. Flexbox digunakan untuk mengatur layout satu dimensi, baik secara horizontal maupun vertikal. Grid digunakan untuk mengatur layout dua dimensi, yaitu baris dan kolom sekaligus.

Dengan Flexbox, kamu bisa dengan mudah mengatur posisi elemen di dalam container. Kamu bisa menentukan arah tata letak, perataan, jarak antar elemen, dan banyak lagi. Flexbox sangat cocok untuk layout navigasi, card, dan komponen kecil lainnya.

Grid lebih cocok untuk layout halaman utama yang membutuhkan struktur baris dan kolom kompleks. Dengan Grid, kamu bisa membuat layout yang sebelumnya sulit dibuat dengan CSS menjadi sangat mudah dan intuitif.

Responsive Design

Salah satu kekuatan terbesar CSS adalah kemampuannya untuk membuat website yang responsif. Dengan media query, kamu bisa mengatur style yang berbeda tergantung ukuran layar pengunjung. Ini sangat penting karena pengunjung website datang dari berbagai perangkat.

CSS adalah skill yang wajib dikuasai setelah HTML. Dengan CSS, website yang tadinya hanya teks polos bisa berubah menjadi indah dan profesional. Teruslah bereksperimen dengan berbagai property dan layout untuk menguasai CSS sepenuhnya.