Dokumentasi CSS Lengkap: Dasar, Properti & Contoh

CSS (Cascading Style Sheets) merupakan teknologi inti dalam pengembangan web modern yang berfungsi untuk mengatur tampilan dan tata letak halaman HTML.

Sebelum mempelajari dokumentasi CSS secara mendalam, sebaiknya Anda memahami dasar-dasar teknologi web lainnya seperti tag HTML, atribut HTML, serta bahasa pemrograman JavaScript yang sering digunakan bersama CSS.

Dokumentasi CSS ini disusun secara lengkap sebagai referensi belajar, panduan teknis, serta dokumentasi resmi bagi pemula hingga tingkat lanjut.

Pendahuluan

Dalam dunia web, HTML bertugas membangun struktur, sedangkan CSS berperan mempercantik dan mengatur tampilan visual. Tanpa CSS, halaman web hanya akan menampilkan teks dan elemen secara polos. Dengan CSS, developer dapat mengatur warna, font, layout, animasi, hingga responsivitas layar.

Dokumentasi ini membahas CSS secara komprehensif, mulai dari konsep dasar, struktur penulisan, selector, properti penting, hingga tabel referensi lengkap.

1. Apa Itu CSS?

CSS adalah bahasa stylesheet yang digunakan untuk mendeskripsikan bagaimana elemen HTML ditampilkan di layar, kertas, atau media lainnya. CSS memungkinkan pemisahan antara konten (HTML) dan presentasi (desain).

1.1 Sejarah Singkat CSS

CSS pertama kali diperkenalkan oleh Håkon Wium Lie pada tahun 1996. Seiring waktu, CSS berkembang melalui beberapa versi: CSS1, CSS2, CSS2.1, dan CSS3. Saat ini CSS3 menjadi standar utama dengan modul-modul terpisah seperti Flexbox, Grid, dan Animation.

2. Fungsi Utama CSS

Untuk memahami mengapa CSS sangat penting dalam pengembangan web, Anda dapat mempelajari sejarah CSS dan perkembangannya yang menjelaskan bagaimana CSS berevolusi menjadi standar desain web modern.

• Mengatur warna teks dan background
• Mengatur ukuran dan jenis font
• Mengatur jarak (margin, padding)
• Mengatur layout halaman
• Membuat desain responsif
• Membuat animasi dan efek visual

3. Cara Menggunakan CSS

3.1 Inline CSS

<p style="color:red; font-size:16px;">Teks Merah</p>

3.2 Internal CSS

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

3.3 External CSS (Direkomendasikan)

<link rel="stylesheet" href="style.css">

4. Struktur Dasar CSS

Struktur CSS sangat bergantung pada elemen HTML. Jika Anda belum memahami struktur HTML, silakan pelajari dokumentasi tag HTML lengkap sebagai dasar penerapan CSS yang benar.

selector {
  property: value;
}

Setiap aturan CSS terdiri dari selector, properti, dan nilai.

5. Selector CSS

5.1 Jenis-Jenis Selector

6. Properti CSS Paling Umum

6.1 Properti Teks

6.2 Properti Font

6.3 Box Model CSS

Box Model adalah konsep utama dalam CSS yang terdiri dari: margin, border, padding, dan content.

7. Layout Modern CSS

7.1 Flexbox

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

7.2 Grid

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

8. CSS Responsif

CSS memungkinkan website menyesuaikan tampilan berdasarkan ukuran layar menggunakan media query.

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

9. Animasi dan Transisi CSS

9.1 Transition

button {
  transition: background-color 0.3s ease;
}

9.2 Animation

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

10. Best Practice CSS untuk SEO & WordPress

• Gunakan external CSS
• Minify file CSS
• Gunakan class yang deskriptif
• Hindari inline CSS berlebihan
• Pastikan desain responsif

11. Properti Background CSS

Properti background digunakan untuk mengatur latar belakang elemen, baik berupa warna, gambar, maupun pengulangan.

12. Properti Border CSS

13. Positioning CSS

Properti position digunakan untuk menentukan bagaimana elemen diposisikan dalam halaman.

.box {
  position: absolute;
  top: 20px;
  left: 30px;
}

14. Z-Index dan Layering

Z-index digunakan untuk mengatur tumpukan elemen dalam sumbu Z (depan dan belakang).

.modal {
  position: fixed;
  z-index: 999;
}

15. Overflow CSS

16. Pseudo-Class CSS

Pseudo-class digunakan untuk mendefinisikan keadaan khusus suatu elemen.

a:hover {
  color: red;
}

17. Pseudo-Element CSS

p::first-letter {
  font-size: 32px;
}

18. Display CSS

19. Opacity dan Visibility

.box {
  opacity: 0.5;
  visibility: visible;
}

20. Transform CSS

21. CSS untuk Aksesibilitas

• Gunakan warna dengan kontras tinggi
• Hindari font terlalu kecil
• Gunakan :focus untuk navigasi keyboard
• Pastikan responsif di semua layar

22. Optimasi CSS untuk Performa Website

• Gabungkan file CSS
• Gunakan CSS minify
• Hapus CSS yang tidak terpakai
• Gunakan critical CSS

23. CSS Variables (Custom Properties)

CSS Variables atau Custom Properties memungkinkan developer menyimpan nilai CSS yang dapat digunakan kembali di seluruh stylesheet. Fitur ini sangat membantu untuk konsistensi desain dan pemeliharaan kode.

Dokumentasi resmi CSS dapat ditemukan di situs MDN Web Docs yang menjadi referensi utama pengembang web di seluruh dunia.

23.1 Deklarasi CSS Variables

:root {
  --primary-color: #0d6efd;
  --secondary-color: #6c757d;
  --font-base: 16px;
}

23.2 Menggunakan CSS Variables

body {
  font-size: var(--font-base);
  color: var(--primary-color);
}

24. Kelebihan CSS Variables

• Mudah diubah secara global
• Mendukung tema (dark/light mode)
• Lebih rapi dan terstruktur
• Didukung browser modern

25. CSS Units (Satuan CSS)

26. Referensi Properti CSS Lengkap A–Z

Berikut adalah daftar properti CSS populer yang sering digunakan dalam pengembangan website.

27. CSS Shorthand Properties

Shorthand memungkinkan penulisan properti CSS secara ringkas dan efisien.

28. CSS Reset dan Normalize

CSS Reset digunakan untuk menyamakan tampilan default browser. Normalize.css mempertahankan gaya default yang berguna.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

29. Dark Mode dengan CSS

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

.dark {
  --bg-color: #121212;
  --text-color: #ffffff;
}

body {
  background: var(--bg-color);
  color: var(--text-color);
}

30. CSS Best Practice Modern

• Gunakan CSS Variables
• Gunakan Flexbox dan Grid
• Gunakan class reusable
• Hindari !important
• Struktur CSS modular

31. Cheatsheet CSS Singkat

display: flex;
justify-content: center;
align-items: center;

position: absolute;
top: 0;
left: 0;

font-size: 1rem;
line-height: 1.6;

32. Studi Kasus: Membangun Layout Website Edukasi

Pada studi kasus ini, kita akan menerapkan berbagai konsep CSS yang telah dibahas sebelumnya untuk membangun layout website edukasi modern yang rapi, responsif, dan mudah dikembangkan.

32.1 Struktur HTML Sederhana

<header class="site-header">Header</header>
<main class="container">
  <article class="content">Konten</article>
  <aside class="sidebar">Sidebar</aside>
</main>
<footer class="site-footer">Footer</footer>

32.2 CSS Layout dengan Flexbox

.container {
  display: flex;
  gap: 20px;
}

.content {
  flex: 3;
}

.sidebar {
  flex: 1;
}

33. Template CSS Profesional (Production Ready)

Template berikut cocok digunakan sebagai dasar website blog, dokumentasi, maupun website edukasi.

/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* VARIABLES */
:root {
  --primary: #0d6efd;
  --dark: #212529;
  --light: #f8f9fa;
  --font-base: 16px;
}

/* GLOBAL */
body {
  font-family: Arial, sans-serif;
  font-size: var(--font-base);
  line-height: 1.6;
  background: var(--light);
  color: var(--dark);
}

/* HEADER */
.site-header {
  background: var(--primary);
  color: #fff;
  padding: 20px;
  text-align: center;
}

/* LAYOUT */
.container {
  max-width: 1200px;
  margin: auto;
  padding: 20px;
  display: flex;
  gap: 20px;
}

/* CONTENT */
.content {
  flex: 3;
}

/* SIDEBAR */
.sidebar {
  flex: 1;
  background: #e9ecef;
  padding: 15px;
}

/* FOOTER */
.site-footer {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 15px;
}

34. CSS Responsif untuk Mobile

Agar layout tetap nyaman di perangkat mobile, gunakan media query berikut:

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

35. Arsitektur CSS yang Direkomendasikan

Untuk proyek besar, struktur CSS sangat penting agar mudah dipelihara dan dikembangkan.

35.1 Struktur Folder CSS

css/
├── base.css
├── layout.css
├── components.css
├── utilities.css
└── main.css

• base.css – reset & global
• layout.css – struktur halaman
• components.css – button, card, navbar
• utilities.css – helper class

36. Metodologi Penulisan CSS

36.1 BEM (Block Element Modifier)

.card {}
.card__title {}
.card--highlight {}

36.2 Utility First

.text-center {}
.mt-3 {}
.p-2 {}

37. Kesalahan Umum dalam CSS

• Terlalu banyak selector bertingkat
• Menggunakan !important berlebihan
• Tidak konsisten penamaan class
• Tidak memperhatikan responsivitas

38. Checklist CSS Sebelum Production

39. Integrasi CSS dengan WordPress

Dalam WordPress, CSS sebaiknya ditambahkan melalui theme atau child theme agar tidak hilang saat update.

• Appearance → Customize → Additional CSS
• Child theme style.css
• Enqueue CSS di functions.php

40. Optimasi CSS untuk SEO (Rank Math Friendly)

• Hindari render-blocking CSS
• Gunakan critical CSS
• Pastikan CLS rendah
• Optimalkan font dan ukuran

Penutup Akhir Dokumentasi CSS

Dokumentasi CSS lengkap ini disusun sebagai panduan belajar dan referensi praktis untuk membangun website modern, responsif, dan SEO-friendly.

Dengan memahami CSS dari dasar hingga lanjutan, Anda dapat menciptakan tampilan web yang profesional dan siap digunakan di lingkungan produksi.

Semoga dokumentasi ini bermanfaat dan dapat menjadi referensi jangka panjang dalam perjalanan Anda sebagai web developer.

Sebagai lanjutan pembelajaran, Anda juga dapat mempelajari sejarah JavaScript dan dokumentasi lengkap tag HTML serta atribut HTML untuk membangun website yang lebih interaktif dan terstruktur.