Warna, Tipografi & Unit CSS

Menerapkan sistem warna, CSS Variables, Google Fonts, dan berbagai unit CSS untuk membangun desain yang konsisten dan responsif.

Phase

Phase 2 — CSS

Topik

CSS Fundamentals

Durasi

90 Menit

Deadline Tugas

Sebelum Pertemuan Berikutnya — Pukul 23.59 WIB

🎯Tujuan Pembelajaran

01Menggunakan warna: nama, hex (#), rgb(), rgba(), hsl()
02Membuat CSS Variables (custom properties) dengan :root
03Mengatur properti font: family, size, weight, style, line-height, letter-spacing
04Mengintegrasikan Google Fonts ke halaman
05Memahami unit CSS: px, em, rem, %, vh, vw
06Membedakan web-safe fonts vs custom fonts

📖Sub-topik & Materi

01Format warna: nama, hex (#RRGGBB), rgb(), rgba(), hsl()
02CSS Variables: --nama-variable dan var(--nama-variable)
03Properti tipografi: font-family, font-size, font-weight, line-height, letter-spacing
04Google Fonts: @import atau <link> di HTML
05Unit CSS: px (absolut), em (relatif ke parent), rem (relatif ke root), %, vh, vw
06Web-safe fonts vs custom fonts (Google Fonts, dll)

💡Penjelasan Konsep

Konsep 1

CSS Variables (Custom Properties)

CSS Variables dideklarasikan dengan awalan dua strip (--) di dalam selector :root agar berlaku global. Gunakan var(--nama-variable) untuk memakainya. Keuntungan: ubah satu nilai di :root, semua elemen yang menggunakannya berubah sekaligus — sangat efisien untuk sistem warna dan spacing.

css

/* Deklarasi di: root (berlaku global) */
: root {
  --color-primary: #3B82F6;
  --color-secondary: #8B5CF6;
  --color-text: #1F2937;
  --color-bg: #F9FAFB;
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 32px;
  --radius: 8px;
}

/* Pemakaian */
h1 { font-family: var(--font-heading); color: var(--color-primary); }
.card { padding: var(--spacing-md); border-radius: var(--radius); }

Konsep 2

Google Fonts — Import dan Pakai

Google Fonts adalah layanan font gratis dari Google. Buka fonts.google.com → pilih font → klik "Get embed code" → copy tag <link> ke <head> HTML. Untuk performa terbaik, pilih maksimal 2 font family dan hanya weight yang kamu butuhkan (misal: 400 untuk regular, 600 untuk semibold, 700 untuk bold).

html

<!-- Di HTML <head> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Inter:wght@400;500&display=swap" rel="stylesheet">

/* Di CSS */
:root {
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
}

body { font-family: var(--font-body); }
h1, h2, h3 { font-family: var(--font-heading); }

Konsep 3

Unit CSS: px, rem, em, %, vw/vh

px adalah ukuran absolut. rem relatif terhadap font-size root (html) — sangat disarankan untuk ukuran font dan spacing. em relatif terhadap font-size elemen parent. % relatif terhadap ukuran parent. vw/vh relatif terhadap ukuran viewport (layar). Gunakan rem untuk konsistensi, % dan vw/vh untuk layout responsif.

css

html { font-size: 16px; } /* 1rem = 16px */

body {
  font-size: 1rem;      /* 16px */
  line-height: 1.6;     /* tanpa unit: relatif ke font-size */
}

h1 { font-size: 2.5rem; }   /* 40px */
h2 { font-size: 2rem; }     /* 32px */
p { font-size: 1rem; }     /* 16px */

.hero {
  height: 100vh;       /* penuh tinggi layar */
  width: 100%;         /* penuh lebar parent */
  padding: 2rem;       /* 32px di semua sisi */
}

💻Contoh Kode Lengkap

css

/* === CSS Variables (Custom Properties) === */
: root {
  --color-primary: #1A4A8A;
  --color-accent: #F4A300;
  --color-text: #333333;
  --color-bg: #F8F9FA;
  --font-heading: 'Syne', sans-serif;
  --font-body: 'Inter', sans-serif;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 32px;
}

/* === Google Fonts === */
@import url('https: //fonts.googleapis.com/css2?family=Inter:wght@300;400;700&family=Syne: wght@700;800&display=swap');

/* === Penggunaan === */
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  font-size: 1rem;    /* 16px */
  line-height: 1.6;
}
h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.5rem); /* Responsif! */
  color: var(--color-primary);
}

⚡Latihan Kelas · Terapkan Google Fonts, CSS Variables untuk palet warna, dan atur tipografi halaman

Pilih 2 Google Fonts (1 untuk heading, 1 untuk body) dan import

Definisikan minimal 6 CSS Variables di :root (warna + font + spacing)

Terapkan typographic scale: h1 > h2 > h3 > p dengan ukuran proporsional

Gunakan unit rem untuk font-size (bukan px)

Ubah 1 warna di :root — lihat bagaimana seluruh halaman ikut berubah

📝 Tugas 3.2 — Tipografi & Warna

⏰ Deadline: Sebelum Pertemuan Berikutnya — Pukul 23.59 WIB

Redesign halaman artikel (P02) dengan: Google Fonts (min. 2 jenis), CSS Variables (min. 6 variable), typographic scale konsisten (h1-h6 + p), dan palet warna harmonis. Semua warna dan font harus menggunakan variables.

Kriteria Penilaian	Poin
Minimal 6 CSS Variables di :root dan digunakan konsisten	25
Google Fonts terpakai dan visible perbedaannya	25
Typographic scale h1–h6 + p konsisten dan harmonis	25
Palet warna konsisten, tidak ada warna hardcode di luar :root	25
Total	100