Wednesday, September 24, 2025

PENGENALAN CSS

Materi CSS Lengkap – Belajar CSS dari Dasar hingga Lanjutan

📘 Materi CSS Lengkap

Belajar CSS dari dasar hingga lanjutan – untuk pemula, pelajar SMK/SMA, maupun programmer otodidak

1. Sejarah & Perkembangan CSS

CSS (Cascading Style Sheets) pertama kali diperkenalkan tahun 1996 oleh Håkon Wium Lie bersama Tim Berners-Lee. CSS digunakan untuk memisahkan konten (HTML) dari tampilan (style). Perkembangannya:

CSS1 (1996): mengatur font, warna, teks sederhana.
CSS2 (1998): menambah positioning, media types.
CSS3 (2001–sekarang): terbagi menjadi modul (Flexbox, Grid, Animation, Transform).
CSS4: belum resmi, tapi banyak fitur baru diadopsi (nesting, :is(), :has()).

2. Sintaks Dasar CSS

CSS ditulis dengan pola: selector { property: value; }

h1 {
  color: blue;
  font-size: 24px;
}

3. Selektor CSS

Beberapa jenis selektor:

Elemen: p { }
Class: .judul { }
ID: #header { }
Kombinasi: div p, ul > li
Atribut: input[type="text"]
Pseudo-class: a:hover
Pseudo-element: p::first-line

4. Box Model

Setiap elemen di HTML mengikuti box model: content → padding → border → margin.

div {
  margin: 10px;
  padding: 15px;
  border: 2px solid black;
  width: 200px;
}

5. Styling Teks & Font

color: warna teks
font-family: jenis font
font-size: ukuran
font-weight: tebal
text-align: rata kiri/kanan/tengah

6. Warna & Background

body {
  background-color: #f3f4f6;
  background-image: linear-gradient(45deg, #3b82f6, #9333ea);
}

7. Layout: Display, Position, Float

display: block/inline/flex/grid;
position: static/relative/absolute/fixed/sticky;
float: metode lama untuk layout.

8. Flexbox

Digunakan untuk layout responsif 1 dimensi.

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

9. Grid

Layout 2 dimensi modern.

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

10. Responsif (Media Queries)

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

11. Animasi & Transisi

.btn {
  transition: background 0.3s;
}
.btn:hover {
  background: red;
}

12. CSS Variables

:root {
  --main-color: #2563eb;
}
h1 {
  color: var(--main-color);
}

13. Best Practice CSS

Gunakan class, hindari inline-style.
Gunakan variabel untuk konsistensi warna.
Strukturkan file CSS agar mudah dibaca.
Kompresi CSS di produksi (minify).

14. Studi Kasus Mini Proyek

Contoh: membuat card sederhana dengan CSS.

.card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  max-width: 300px;
}

Pengumuman