CSS Properti dan Value

Di bagian ini kamu akan memahami bagaimana CSS bekerja memberi gaya kepada elemen HTML setelah dipilih dengan selector.

Apa Itu Property dan Value?

Dalam CSS, property adalah fitur tampilan yang ingin kamu atur, dan value adalah nilai atau pengaturan dari property tersebut.

Contoh:

p {
  color: red;
  font-size: 16px;
}

Keterangan:

color → property untuk mengatur warna teks
red → value yang diterapkan ke property color
font-size → property untuk mengatur ukuran teks
16px → value yang menunjukkan ukuran teks

Format Penulisan CSS

selector {
  property: value;
  property: value;
}

Contoh:

h1 {
  color: blue;
  font-size: 32px;
}

Daftar Property CSS yang Sering Digunakan

Property	Fungsi	Contoh Value
`color`	Mengatur warna teks	`red`, `#333`, `rgb(0,0,0)`
`background-color`	Warna latar belakang	`yellow`, `#fafafa`
`font-size`	Ukuran teks	`14px`, `2em`
`font-weight`	Ketebalan teks	`normal`, `bold`, `700`
`text-align`	Perataan teks	`left`, `center`, `justify`
`margin`	Jarak luar elemen	`10px`, `auto`
`padding`	Jarak dalam elemen	`8px`, `0 20px`
`border`	Menambahkan garis di sekitar elemen	`1px solid black`
`width` / `height`	Mengatur ukuran elemen	`100px`, `50%`

Contoh Kode CSS Lengkap

Berikut ini adalah contoh code html dan css lengkap beserta hasilnya di brower.

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f9f9f9;
    }

    h1 {
      color: #2c3e50;
      font-size: 28px;
      text-align: center;
    }

    p {
      color: #555;
      font-size: 16px;
      line-height: 1.5;
      padding: 10px;
    }

    .highlight {
      background-color: yellow;
      font-weight: bold;
    }
  </style>
</head>
<body>

  <h1>Belajar Property & Value di CSS</h1>
  <p>Ini adalah paragraf biasa untuk latihan styling.</p>
  <p class="highlight">Ini adalah paragraf yang disorot!</p>

</body>
</html>

Hasilnya:

css-property-value

Catatan Penting

Setiap pasangan property dan value diakhiri dengan titik koma (;)
Gunakan satuan ukuran: px, em, % untuk value yang membutuhkan ukuran
CSS akan membaca dari atas ke bawah, dan properti yang terakhir (dalam selector yang sama) akan menimpa yang sebelumnya

Tips Belajar Property & Value

Latihan membuat halaman sederhana lalu coba ubah property-nya satu per satu
Gunakan tools seperti CSS Reference untuk melihat contoh-contoh visual
Gunakan browser (klik kanan → Inspect) untuk melihat dan mengubah CSS secara langsung

Kesimpulan

CSS bekerja dengan aturan: Pilih elemen (selector) → Tentukan tampilannya (property: value)

Dengan menguasai property dan value, kamu bisa:

Mengatur warna, ukuran, dan jarak elemen
Membuat halaman web lebih mudah dibaca dan menarik
Mengembangkan desain yang konsisten dan profesional