HTML Dasar #22 - Properti CSS Wajib: color, background, font-size, text-align

Setelah kita belajar selector CSS (tag, class, ID), sekarang saatnya mengenal properti CSS dasar yang akan kamu gunakan setiap hari sebagai web developer. Keempat properti ini adalah fondasi styling yang wajib dikuasai!

Ringkasan Keempat Properti

Properti	Fungsi	Nilai Contoh
`color`	Warna teks	`red`, `#3b82f6`, `rgb(59,130,246)`
`background` atau `background-color`	Warna latar belakang	`lightblue`, `#f0f4f8`, `rgba(0,0,0,0.5)`
`font-size`	Ukuran huruf	`16px`, `1.5rem`, `2em`, `large`
`text-align`	Perataan teks	`left`, `center`, `right`, `justify`

Catatan Penting:
• color mengatur warna teks (bukan background!)
• background-color mengatur warna latar belakang
• background adalah versi shorthand (bisa menggabungkan warna, gambar, posisi)
• Untuk pemula, gunakan background-color agar lebih jelas.

1. Properti `color` (Warna Teks)

Properti color mengatur warna teks dari elemen. Ada 4 cara menuliskan warna di CSS:

Format	Contoh	Hasil
Nama warna (keyword)	`red`, `blue`, `green`	Merah, Biru, Hijau
Hexadesimal (HEX)	`#ff0000`, `#3b82f6`	Merah, Biru
RGB (Red Green Blue)	`rgb(255,0,0)`, `rgb(59,130,246)`	Merah, Biru
RGBA (dengan transparansi)	`rgba(255,0,0,0.5)`	Merah transparan 50%

Contoh `color`:

<style>
    .judul-merah { color: red; }
    .judul-biru-hex { color: #3b82f6; }
    .judul-hijau-rgb { color: rgb(34, 197, 94); }
    .judul-ungu { color: #8b5cf6; }
</style>

<h1 class="judul-merah">Judul Merah (nama warna)</h1>
<h1 class="judul-biru-hex">Judul Biru (HEX)</h1>
<h1 class="judul-hijau-rgb">Judul Hijau (RGB)</h1>
<h1 class="judul-ungu">Judul Ungu</h1>

Hasilnya:

Judul Merah (nama warna)

Judul Biru (HEX)

Judul Hijau (RGB)

Judul Ungu

Tips Memilih Format Warna:

Nama warna → cocok untuk prototyping (red, blue, green, yellow, dll)
HEX → paling umum di industri (#3b82f6 = biru, #ef4444 = merah)
RGB/RGBA → jika butuh transparansi (rgba(0,0,0,0.5) = hitam 50%)
Gunakan color picker di browser dev tools untuk memilih warna!

2. Properti `background-color` (Warna Latar)

background-color mengatur warna latar belakang elemen. Sama seperti color, bisa menggunakan nama warna, HEX, RGB, atau RGBA.

Contoh `background-color`:

<style>
    .box-merah { background-color: red; padding: 15px; }
    .box-biru { background-color: #3b82f6; padding: 15px; color: white; }
    .box-abu { background-color: rgb(241, 245, 249); padding: 15px; }
    .box-transparan { background-color: rgba(0,0,0,0.1); padding: 15px; }
</style>

<div class="box-merah">Background merah</div>
<div class="box-biru">Background biru dengan teks putih</div>
<div class="box-abu">Background abu-abu muda</div>
<div class="box-transparan">Background hitam 10% transparan</div>

Hasilnya:

Background merah

Background biru dengan teks putih

Background abu-abu muda

Background hitam 10% transparan

3. Properti `font-size` (Ukuran Huruf)

font-size mengatur besar kecilnya huruf. Ada beberapa satuan yang bisa digunakan:

Satuan	Penjelasan	Contoh	Kapan Pakai?
`px`	Pixel (ukuran absolut)	`16px`	Paling umum, mudah dipahami
`rem`	Relatif terhadap root (biasanya 16px)	`1rem = 16px`	Responsif, disarankan untuk modern
`em`	Relatif terhadap parent	`1.5em`	Untuk komponen yang skalanya proporsional
Nama	Nama ukuran bawaan	`small`, `large`	Hanya untuk prototyping cepat

Contoh `font-size`:

<style>
    .teks-kecil { font-size: 12px; }
    .teks-normal { font-size: 16px; }
    .teks-besar { font-size: 24px; }
    .teks-besar-sekali { font-size: 32px; }
    .teks-rem { font-size: 1.5rem; } /* 1.5 x 16px = 24px */
</style>

<p class="teks-kecil">Teks ukuran 12px (kecil)</p>
<p class="teks-normal">Teks ukuran 16px (normal default)</p>
<p class="teks-besar">Teks ukuran 24px (besar)</p>
<p class="teks-besar-sekali">Teks ukuran 32px (sangat besar)</p>

Hasilnya:

Teks ukuran 12px (kecil)

Teks ukuran 16px (normal default)

Teks ukuran 24px (besar)

Teks ukuran 32px (sangat besar)

Tips font-size untuk Pemula:

Mulai dengan px (pixel) karena paling mudah dipahami
Ukuran normal teks biasanya 16px
Heading: h1=32px, h2=28px, h3=24px, h4=20px
Nanti setelah mahir, gunakan rem untuk website yang lebih profesional

4. Properti `text-align` (Perataan Teks)

text-align mengatur perataan horizontal teks di dalam elemen.

Nilai	Fungsi	Contoh
`left`	Rata kiri (default)	Teks biasa di kiri
`center`	Rata tengah	Judul, tombol, banner
`right`	Rata kanan	Tanggal, harga, footer
`justify`	Rata kanan-kiri (merapatkan tepi)	Artikel, koran, jurnal

Contoh `text-align`:

<style>
    .kiri { text-align: left; }
    .tengah { text-align: center; }
    .kanan { text-align: right; }
    .justify { text-align: justify; }
    .box { background: #f0f4f8; padding: 15px; margin-bottom: 10px; border-radius: 8px; }
</style>

<div class="box kiri">
    <strong>Rata Kiri:</strong> Teks ini rata ke kiri. Biasanya digunakan untuk paragraf biasa.
</div>

<div class="box tengah">
    <strong>Rata Tengah:</strong> Teks ini rata tengah. Cocok untuk judul atau tombol.
</div>

<div class="box kanan">
    <strong>Rata Kanan:</strong> Teks ini rata ke kanan. Cocok untuk harga atau tanggal.
</div>

<div class="box justify">
    <strong>Rata Kanan-Kiri (Justify):</strong> Teks ini akan merapat ke kedua sisi. Biasanya digunakan untuk artikel panjang agar terlihat rapi seperti di koran. Setiap baris akan memiliki lebar yang sama.
</div>

Hasilnya:

Rata Kiri: Teks ini rata ke kiri. Biasanya digunakan untuk paragraf biasa.

Rata Tengah: Teks ini rata tengah. Cocok untuk judul atau tombol.

Rata Kanan: Teks ini rata ke kanan. Cocok untuk harga atau tanggal.

Rata Kanan-Kiri (Justify): Teks ini akan merapat ke kedua sisi. Biasanya digunakan untuk artikel panjang agar terlihat rapi seperti di koran. Setiap baris akan memiliki lebar yang sama.

Studi Kasus: Kartu Profil dengan Keempat Properti

Berikut contoh kartu profil yang menggabungkan semua properti yang sudah dipelajari:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Kartu Profil - CSS Properties</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .profile-card {
            max-width: 400px;
            background-color: white;
            border-radius: 20px;
            padding: 30px;
            text-align: center;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        }
        
        .avatar {
            width: 120px;
            height: 120px;
            background-color: #3b82f6;
            border-radius: 50%;
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
            color: white;
        }
        
        .name {
            font-size: 28px;
            color: #1e293b;
            margin-bottom: 5px;
        }
        
        .title {
            font-size: 16px;
            color: #3b82f6;
            margin-bottom: 15px;
        }
        
        .bio {
            font-size: 14px;
            color: #64748b;
            line-height: 1.6;
            text-align: justify;
            margin-bottom: 20px;
        }
        
        .social {
            background-color: #f0f4f8;
            padding: 15px;
            border-radius: 10px;
        }
        
        .social p {
            font-size: 14px;
            color: #334155;
            margin-bottom: 10px;
        }
        
        .social a {
            color: #3b82f6;
            text-decoration: none;
            font-size: 14px;
        }
        
        .btn {
            display: inline-block;
            background-color: #3b82f6;
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            margin-top: 20px;
            text-decoration: none;
        }
        
        .btn:hover {
            background-color: #2563eb;
        }
        
        .footer-note {
            margin-top: 20px;
            font-size: 12px;
            color: #94a3b8;
            text-align: center;
        }
    </style>
</head>
<body>

    <div class="profile-card">
        <div class="avatar">
            -
        </div>
        
        <h1 class="name">Ahmad Fauzan</h1>
        <p class="title">Web Developer & Content Creator</p>
        
        <p class="bio">
            Halo! Saya seorang pengembang web yang suka belajar hal-hal baru. 
            Saat ini saya fokus pada pengembangan frontend dan berbagi ilmu 
            melalui blog dan kursus online.
        </p>
        
        <div class="social">
            <p>ahmad@example.com</p>
            <p>0812-3456-7890</p>
            <p>www.ahmadfauzan.com</p>
        </div>
        
        <a href="#" class="btn">Hubungi Saya</a>
        
        <div class="footer-note">
            <p>© 2024 - Dibuat dengan CSS Properties</p>
        </div>
    </div>

</body>
</html>

Hasil visual kartu profil:

Ahmad Fauzan

Web Developer & Content Creator

Halo! Saya seorang pengembang web yang suka belajar hal-hal baru. Saat ini saya fokus pada pengembangan frontend dan berbagi ilmu melalui blog dan kursus online.

ahmad@example.com

0812-3456-7890

Tabel Referensi Cepat

Properti	Contoh Nilai	Penjelasan Singkat
`color`	`red`, `#ff0000`, `rgb(255,0,0)`	Warna teks
`background-color`	`lightblue`, `#f0f4f8`, `rgba(0,0,0,0.5)`	Warna latar belakang
`font-size`	`16px`, `1.5rem`, `2em`	Ukuran huruf
`text-align`	`left`, `center`, `right`, `justify`	Perataan teks horizontal

Kesalahan Umum Pemula

Tertukar color dan background-color → color untuk teks, background-color untuk latar belakang.
Lupa satuan pada font-size → font-size: 16; (salah) vs font-size: 16px; (benar).
Lupa titik koma (;) setelah nilai → CSS akan error jika lupa titik koma.
Typo pada nama properti → background-color bukan backgroundcolor atau bg-color.
Menganggap text-align: center bisa memposisikan div → text-align hanya untuk teks, bukan untuk memindahkan elemen block.

Debugging Tips:

Jika warna tidak berubah, cek apakah selector kamu tepat (tag, class, atau ID)
Jika ukuran font tidak berubah, pastikan tidak ada selector lain yang lebih spesifik menimpanya
Gunakan Developer Tools (F12) → tab Styles → lihat properti mana yang aktif dan mana yang dicoret

Latihan Singkat

Buat file HTML baru dengan judul "CSS Properties Practice"
Buat sebuah <div> dengan class .card yang memiliki:
- background-color: #f0f4f8;
- padding: 20px;
- border-radius: 10px;
Di dalam card, buat:
- Heading dengan color: #3b82f6 dan text-align: center
- Paragraf dengan font-size: 16px dan text-align: justify
- Tombol dengan background-color: #22c55e, color: white, font-size: 14px
Simpan dan buka di browser, amati hasilnya

Intisari Hari Ini

color → warna teks (nama, HEX, RGB, RGBA)
background-color → warna latar belakang
font-size → ukuran huruf (px, rem, em)
text-align → perataan teks (left, center, right, justify)
Gunakan HEX untuk warna profesional, px untuk ukuran font pemula
Keempat properti ini akan kamu gunakan setiap hari sebagai web developer

Tantangan Akhir Pekan: Buat sebuah Halaman Menu Restoran yang menarik! Persyaratan:

Header dengan judul restoran (gunakan color, text-align: center, font-size: 32px)
Sub-header dengan tagline (gunakan color berbeda, text-align: center)
Minimal 4 kartu menu (masing-masing: nama menu, deskripsi singkat, harga)
Setiap kartu memiliki background-color putih, border-radius, dan padding
Harga ditampilkan dengan color: #ef4444 (merah) dan text-align: right
Deskripsi menu menggunakan text-align: justify dan font-size: 14px
Footer dengan copyright (gunakan background-color: #1e293b, color: #94a3b8, text-align: center)
Gunakan class selector untuk styling komponen (bukan ID atau tag selector)

Bonus: Buat efek hover pada kartu (ubah background-color atau tambah shadow).

Selamat mencoba!

Artikel Sebelumnya: HTML Dasar #21 - Mengenal Selector CSS: Tag, Class, ID
Artikel Selanjutnya: HTML Dasar #23 - Mengatur Margin dan Padding untuk Jarak

HTML Dasar #22 - Properti CSS Wajib: color, background, font-size, text-align

Ringkasan Keempat Properti

1. Properti `color` (Warna Teks)

Contoh `color`:

Judul Merah (nama warna)

Judul Biru (HEX)

Judul Hijau (RGB)

Judul Ungu

2. Properti `background-color` (Warna Latar)

Contoh `background-color`:

3. Properti `font-size` (Ukuran Huruf)

Contoh `font-size`:

4. Properti `text-align` (Perataan Teks)

Contoh `text-align`:

Studi Kasus: Kartu Profil dengan Keempat Properti

Ahmad Fauzan

Tabel Referensi Cepat

Kesalahan Umum Pemula

Latihan Singkat

Intisari Hari Ini

HTML Dasar #0 - Daftar Isi - DASAR-DASAR HTML UNTUK PEMULA

Categories

Main Tags

Latest Posts

Popular Posts

HTML Dasar #0 - Daftar Isi - DASAR-DASAR HTML UNTUK PEMULA

Android Kotlin - Lanjutan dari ASP.NET Core API

Android Kotlin #5: RecyclerView – Menampilkan Daftar Kategori Wisata

نموذج الاتصال

HTML Dasar #22 - Properti CSS Wajib: color, background, font-size, text-align

Ringkasan Keempat Properti

1. Properti color (Warna Teks)

Contoh color:

Judul Merah (nama warna)

Judul Biru (HEX)

Judul Hijau (RGB)

Judul Ungu

2. Properti background-color (Warna Latar)

Contoh background-color:

3. Properti font-size (Ukuran Huruf)

Contoh font-size:

4. Properti text-align (Perataan Teks)

Contoh text-align:

Studi Kasus: Kartu Profil dengan Keempat Properti

Ahmad Fauzan

Tabel Referensi Cepat

Kesalahan Umum Pemula

Latihan Singkat

Intisari Hari Ini

HTML Dasar #0 - Daftar Isi - DASAR-DASAR HTML UNTUK PEMULA

Android Kotlin - Lanjutan dari ASP.NET Core API

Android Kotlin #5: RecyclerView – Menampilkan Daftar Kategori Wisata

نموذج الاتصال

1. Properti `color` (Warna Teks)

Contoh `color`:

2. Properti `background-color` (Warna Latar)

Contoh `background-color`:

3. Properti `font-size` (Ukuran Huruf)

Contoh `font-size`:

4. Properti `text-align` (Perataan Teks)

Contoh `text-align`: