Tujuan Belajar
Setelah pelajaran ini, kamu akan bisa:
- Menggunakan berbagai format warna di CSS (nama, hex, rgb, hsl)
- Mengubah font, ukuran, ketebalan, dan gaya teks
- Mengatur perataan teks dan dekorasi
Materi Singkat
Warna dan tipografi adalah dua elemen yang paling terlihat dalam desain web. Pilihan yang tepat membuat halaman terlihat profesional; pilihan yang salah membuat mata lelah.
Format Warna di CSS
CSS mendukung beberapa cara menulis warna:
Nama warna (color name):
color: red;
color: blue;
color: tomato; /* ya, "tomato" itu warna CSS! */Ada 140+ nama warna bawaan, tapi terbatas.
Hex (hexadecimal) — paling umum dipakai:
color: #ff0000; /* merah */
color: #2563eb; /* biru */
color: #1a1a1a; /* hampir hitam */
color: #ffffff; /* putih */Format #RRGGBB — setiap dua karakter mewakili merah, hijau, biru (0-9 dan a-f).
RGB:
color: rgb(37, 99, 235); /* biru */
color: rgba(37, 99, 235, 0.5); /* biru 50% transparan */HSL (Hue, Saturation, Lightness) — intuitif untuk desainer:
color: hsl(217, 91%, 60%); /* biru */Property Warna Utama
color: #333; /* warna teks */
background-color: #f5f5f5; /* warna latar */Font
Mengubah jenis font:
font-family: Arial, Helvetica, sans-serif;
font-family: Georgia, 'Times New Roman', serif;
font-family: 'Courier New', Courier, monospace;Tulis beberapa font sebagai "fallback" — jika font pertama tidak ada, browser pakai yang kedua.
Google Fonts — tambahkan font kustom gratis. Di <head> HTML:
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">Lalu di CSS:
font-family: 'Inter', sans-serif;Ukuran, Ketebalan, dan Gaya Font
font-size: 16px; /* ukuran dalam pixel */
font-size: 1rem; /* relatif terhadap root (biasanya 1rem = 16px) */
font-size: 1.25em; /* relatif terhadap elemen induk */
font-weight: normal; /* ketebalan normal */
font-weight: bold; /* tebal */
font-weight: 700; /* sama dengan bold, tapi pakai angka */
font-style: normal;
font-style: italic; /* miring */Teks
text-align: left; /* rata kiri (default) */
text-align: center; /* tengah */
text-align: right; /* kanan */
text-align: justify; /* rata kiri-kanan */
text-decoration: none; /* hapus underline (pada link) */
text-decoration: underline; /* garis bawah */
text-decoration: line-through; /* teks dicoret */
text-transform: uppercase; /* HURUF KAPITAL SEMUA */
text-transform: lowercase; /* huruf kecil semua */
text-transform: capitalize; /* Huruf Pertama Kapital */
letter-spacing: 0.05em; /* jarak antar huruf */
line-height: 1.6; /* jarak antar baris */Contoh Kode
body {
font-family: 'Inter', Arial, sans-serif;
font-size: 16px;
color: #1a1a1a;
background-color: #ffffff;
line-height: 1.7;
}
h1 {
font-size: 2rem; /* 32px */
font-weight: 700;
color: #2563eb;
text-align: center;
letter-spacing: -0.02em;
}
h2 {
font-size: 1.5rem; /* 24px */
font-weight: 600;
color: #1a1a1a;
}
p {
font-size: 1rem; /* 16px */
color: #555555;
margin-bottom: 1rem;
}
a {
color: #2563eb;
text-decoration: none; /* hapus underline default */
}
a:hover {
text-decoration: underline; /* muncul underline saat hover */
}
.catatan {
font-style: italic;
color: #888888;
font-size: 0.875rem; /* 14px */
}Tugas Kecil
Buat file tipografi.html dan tipografi.css:
- HTML berisi:
<h1>,<h2>, 3<p>, dan sebuah<a>link ke Google - CSS mengatur:
body: font sans-serif,font-size: 16px, warna teks gelap, background terangh1: ukuran besar (min 28px), warna accent, rata tengahh2: ukuran sedang, warna lebih gelap darih1p:line-height: 1.7, warna abu-abu gelapa: hapus underline, warna accent, tambah underline kembali saat hover- Satu class
.highlightdengan background warna kuning muda