Properti CSS Dasar

Sekarang kamu sudah tahu cara menargetkan elemen HTML menggunakan selector. Langkah selanjutnya adalah menentukan valuenya, yaitu Properti CSS Dasar. Inilah bagian yang paling menyenangkan, karena di sini kamu mulai berperan sebagai desainer yang menentukan identitas visual dari website yang kamu bangun.

1. Penjelasan Konsep

Ada tiga aspek utama yang biasanya pertama kali kita ubah pada sebuah elemen:

1. Warna:

   • color: Mengatur warna teks.
   • background-color: Mengatur warna latar belakang elemen.
   • Kamu bisa menggunakan nama warna (red), Hex Code (#ff0000), atau RGB (rgb(255, 0, 0)).

2. Tipografi:

   • font-family: Menentukan jenis huruf (misalnya: Arial, Roboto, Serif).
   • font-size: Mengatur besar kecilnya huruf (biasanya dalam satuan px, em, atau rem).
   • font-weight: Mengatur ketebalan huruf (seperti bold atau angka 100-900).

3. Latar Belakang atau background:

   • Digunakan untuk memasang gambar sebagai background. Kamu juga bisa mengatur posisinya agar tidak pecah atau berulang.

2. Contoh Kode

Mari kita buat sebuah "Hero Section" sederhana untuk mempraktikkan properti ini.

<div class="hero-section">
    <h1 class="judul-hero">Selamat Datang di Portofolioku</h1>
    <p class="sub-judul">Saya adalah seorang Web Developer masa depan.</p>
</div>

.hero-section {
    /* Mengatur warna latar belakang */
    background-color: #2c3e50;
    
    /* Mengatur warna teks secara global di dalam div ini */
    color: white;
    
    /* Memberi ruang agar teks tidak mepet ke pinggir */
    padding: 50px;
    text-align: center;
}

.judul-hero {
    /* Tipografi */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 48px;
    font-weight: 700; /* Tebal */
    margin-bottom: 10px;
}

.sub-judul {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 300; /* Tipis */
    color: #bdc3c7; /* Warna abu-abu terang */
}

3. Penjelasan Kode

• color: #bdc3c7;: Saya menggunakan Hex Code di sini. Ini memberikan fleksibilitas warna yang jauh lebih banyak daripada sekadar menulis "gray".
• font-family dengan banyak nama: Perhatikan 'Segoe UI', Tahoma, .... Ini disebut Font Stack. Jika komputer pengunjung tidak punya Segoe UI, browser akan mencoba mencari Tahoma, dan seterusnya. Ini adalah langkah antisipasi agar website tetap rapi.
• font-weight: Nilai 700 setara dengan bold, sedangkan 300 atau 400 biasanya merupakan weight standar (normal).

4. Best Practice

Agar desainmu tidak terlihat seperti "buatan tahun 90-an", perhatikan tips ini:

• Kontras adalah Kunci: Jangan gunakan teks abu-abu muda di atas latar belakang putih. Pastikan teksmu mudah dibaca. Kamu bisa menggunakan alat bantu seperti Contrast Checker di internet.
• Gunakan Maksimal 2-3 Jenis Font: Jangan gunakan terlalu banyak jenis font yang berbeda dalam satu website. Itu akan membuat website terlihat berantakan dan berat saat dimuat. Gunakan satu untuk judul (heading) dan satu untuk isi teks (body).
• Warna Brand yang Konsisten: Pilihlah 2 atau 3 warna utama untuk websitemu, dan gunakan secara konsisten. Ini akan membangun identitas visual.