Warna, Tipografi, dan Model Kotak
Terapkan warna dengan nilai hex, rgb, dan hsl, pilih fon, atur ukuran dan tinggi baris, serta gunakan margin, border, dan padding untuk memberi jarak antarelemen.
Warna, Tipografi, dan Model Kotak adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Nilai Warna CSS
CSS mendukung berbagai format warna. Gunakan format yang paling jelas sesuai konteks Anda: kode heksadesimal untuk warna merek, hsl() untuk penyesuaian warna yang mudah, rgb() untuk nilai terprogram, dan warna bernama untuk pembuatan prototipe cepat.
color: #2b6cb0; /* hex */
color: rgb(43, 108, 176); /* rgb */
color: hsl(212, 61%, 43%); /* hsl */
color: royalblue; /* named */
color: rgba(0,0,0,0.5); /* rgba with alpha */Warna dan Gambar Latar
Tetapkan latar elemen dengan background-color. Gunakan background-image dengan gradien atau URL. Singkatan background menggabungkan warna, gambar, posisi, ukuran, dan pengulangan dalam satu deklarasi.
background-color: #f7fafc;
background-image: linear-gradient(135deg, #667eea, #764ba2);
background: url('/hero.webp') center / cover no-repeat #1a202c;Properti Font
Atur tipografi dengan: font-family (jenis huruf), font-size (em, rem, px), font-weight (100–900), font-style (miring), line-height (rasio keterbacaan), dan letter-spacing (jarak antarhuruf).
body {
font-family: 'Inter', system-ui, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: #1a202c;
}Properti Teks
Penataan teks tambahan: text-align (kiri, tengah, kanan, rata kiri-kanan), text-decoration (garis bawah, coret, tidak ada), text-transform (huruf besar, kapitalisasi), text-overflow: ellipsis untuk pemotongan.
h1 { text-align: center; text-transform: uppercase; }
a { text-decoration: none; }
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}rem vs em vs px
px bersifat absolut. em relatif terhadap ukuran font elemen itu sendiri (mengikuti kaskade). rem relatif terhadap ukuran font akar (lebih mudah diprediksi). Gunakan rem untuk sebagian besar ukuran agar preferensi font pengguna dihormati.
html { font-size: 16px; } /* 1rem = 16px */
.card { padding: 1.5rem; } /* 24px */
.small { font-size: 0.875rem; } /* 14px */Model Kotak
Setiap elemen HTML adalah kotak persegi panjang dengan empat lapisan: konten (dimensi elemen sebenarnya), padding (ruang di dalam batas), batas, dan margin (ruang di luar batas).
/* Total width = content + padding + border */
.box {
width: 200px;
padding: 16px;
border: 2px solid #ccc;
margin: 24px;
}box-sizing: border-box
Secara bawaan (content-box), padding dan batas ditambahkan ke lebar yang dideklarasikan. Dengan box-sizing: border-box, padding dan batas termasuk dalam lebar yang dideklarasikan — dan hampir selalu itulah yang Anda inginkan.
/* Apply globally */
*, *::before, *::after {
box-sizing: border-box;
}
/* Now width: 200px includes padding and border */
.card {
width: 200px;
padding: 20px; /* doesn't add to width */
}Margin yang Menyatu
Margin vertikal di antara elemen blok yang bersebelahan akan menyatu — hanya margin yang lebih besar yang berlaku. Margin elemen induk dan anak pertama/terakhirnya juga menyatu. Anak Flexbox dan Grid tidak menyatukan margin.
Notasi Singkat Padding
Notasi singkat padding: top right bottom left menetapkan semua sisi. Dua nilai menetapkan sisi vertikal dan horizontal. Tiga nilai menetapkan sisi atas, horizontal, dan bawah.
padding: 16px; /* all sides */
padding: 8px 16px; /* top/bottom left/right */
padding: 8px 16px 24px; /* top left/right bottom */
padding: 8px 16px 24px 32px; /* top right bottom left */Properti Batas
Tetapkan batas dengan notasi singkat border: width style color. Sisi individual: border-top, dan seterusnya. Gunakan border-radius untuk sudut membulat. outline serupa, tetapi tidak memengaruhi tata letak.
.card {
border: 1px solid #e2e8f0;
border-radius: 8px;
}
button:focus {
outline: 2px solid #3182ce;
outline-offset: 2px;
}Luapan
overflow: hidden memotong konten yang melebihi ukuran elemen. overflow: scroll menambahkan bilah gulir. overflow: auto menambahkan bilah gulir hanya saat diperlukan. Gunakan overflow-x dan overflow-y untuk mengontrol sumbu secara terpisah.
Pemeriksaan Singkat
Dengan box-sizing: border-box dan width: 300px; padding: 20px; border: 2px solid, berapa lebar total elemen setelah dirender?
Ringkasan: Warna, Tipografi, dan Model Kotak
Tetapkan warna dengan heksadesimal, rgb, atau hsl. Terapkan font dengan keluarga font, ukuran, ketebalan, dan tinggi baris. Setiap elemen adalah kotak: konten + padding + batas + margin. Aktifkan box-sizing: border-box secara global agar ukuran lebih mudah diprediksi.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 41
- Pelajaran
- 163
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Warna, Tipografi, dan Model Kotak” gratis?
Ya — teks lengkap “Warna, Tipografi, dan Model Kotak” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Warna, Tipografi, dan Model Kotak”?
Terapkan warna dengan nilai hex, rgb, dan hsl, pilih fon, atur ukuran dan tinggi baris, serta gunakan margin, border, dan padding untuk memberi jarak antarelemen. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Warna, Tipografi, dan Model Kotak” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Pemilih dan Kaskade
- Warna, Tipografi, dan Model Kotak
- Dasar Display: block, inline, flex, grid
- Pemosisian: relative, absolute, fixed, sticky