Dalam membuat website diperlukan sebuah mekanisme dalam mengatur tampilan data yang tersusun di HyperText Markup Language (HTML) sehingga mempermudah pengaturan bagaimana data ditampilkan tanpa harus memperbaharui HTML setiap kali ada perubahan tampilan.

Cascading Style Sheets (CSS) merupakan mekanisme yang mampu mengatur tata letak data pada HTML.

Secara garis besar perbedaan antara HTML dan CSS bisa disimpulkan,

HTML = Mengatur struktur data sesuai fungsinya
CSS = Mengatur tata letak tampilan data di HTML

Penggunaan HTML saat ini telah disederhanakan sehingga tidak memerlukan status Document Type (Doctype) karena pada dasarnya browser senantiasa memperbarui rendering engine-nya agar mendukung teknologi HTML terbaru. Bahkan kita dapat langsung menggunakan syntax HTML tanpa tag html-head-body. Saat ini HTML terbaru adalah HTML5 yang memiliki fungsi tidak hanya seputar penyusunan data namun juga bisa mengakses fitur mobile device, offline storage, 3D dan multimedia serta membuat pengalaman mengakses website lebih interaktif.

Meskipun styling pada CSS bergantung pada struktur HTML yang dibuat, namun kita dapat meningkatkan efisiensi dengan mengandalkan sifat inheritance (style turunan yang dapat diubah dan ditambahkan) pada hirarki selector. Dengan mengetahui bagaimana cara kerja CSS maka kita dapat meminimalisir DOM Tree, sehingga browser me-render CSS dengan lebih cepat.

1. Pendahuluan

2. Daftar Isi

3. Mengenal CSS

3.1. Cara kerja CSS

3.2. Style default HTML

3.3. Browser Inspector

4. Menyusun struktur data dengan HTML

4.1. Klasifikasi tag-tag HTML

4.2. Orientasi penyusunan data

4.3. Semantic dan penyederhanaan struktur data

5. Klasifikasi aturan CSS

5.1. Tipografi

5.2. Whitespace

5.3. Grid

5.4. Animasi

6. Responsive Layout

6.1. Konsep Mobile First

6.2. Konsep Progressive Enhancement

6.3. Media Queries VS Fluid Layout VS Feature Queries

CSS akronim dari Cascading Style Sheets. Konsep Cascade dapat diartikan menggantikan aturan sebelumnya, dalam hal ini style yang berbeda dapat diterapkan pada satu selector secara berurut dari selector kurang spesifik hingga selector yang lebih spesifik sampai akhir style yang diinginkan.

Cara kerja CSS

Agar CSS dapat berfungsi harus terdiri dari selector, property & value.

CSS bekerja dengan menelusuri selector-selector dari kanan ke kiri, dari dalam ke luar.