Bagian 8: CSS Selector & Layout

Selektor CSS digunakan untuk memilih elemen HTML yang akan diberi gaya. Layout CSS memungkinkan Anda mengatur posisi dan ukuran elemen dalam halaman web.

Jenis Selektor CSS

• Selektor Tag: contoh: p, h1
• Selektor Kelas: contoh: .kotak
• Selektor ID: contoh: #header
• Gabungan: contoh: div.kotak

Contoh Selektor CSS

<style>
  h1 {
    color: blue;
  }
  .highlight {
    background-color: yellow;
  }
  #unik {
    font-weight: bold;
  }
</style>
    

Dasar Layout: Box Model

Setiap elemen dalam HTML dianggap sebagai kotak yang terdiri dari:

• Content: isi elemen
• Padding: jarak dalam kotak
• Border: garis batas
• Margin: jarak luar antar elemen

Layout dengan Flexbox

Flexbox memudahkan pengaturan tata letak elemen dalam baris atau kolom.

<style>
  .container {
    display: flex;
    justify-content: space-around;
  }
  .kotak {
    width: 100px;
    height: 100px;
    background-color: coral;
    margin: 10px;
  }
</style>

<div class="container">
  <div class="kotak">1</div>
  <div class="kotak">2</div>
  <div class="kotak">3</div>
</div>
    

Simulasi CSS Selector & Layout

Silakan coba modifikasi selektor atau tata letaknya dan klik Jalankan: