Selektor dan Properti CSS

Dalam bagian ini, kita akan belajar bagaimana memilih elemen HTML menggunakan berbagai jenis selektor dan menerapkan properti CSS untuk mengubah tampilan elemen tersebut.

1. Pengertian Selektor CSS

Selektor adalah bagian dari CSS yang digunakan untuk memilih elemen HTML yang akan diberi gaya (styling).

2. Jenis-Jenis Selektor CSS

Berikut adalah beberapa jenis selektor utama dalam CSS:

• Selektor Elemen (Tag Selector)
  Memilih semua elemen dari jenis tertentu.

  p {
      color: blue;
  }
  

  (Mengubah semua teks dalam elemen <p> menjadi biru.)

• Selektor ID (#id-selector)
  Memilih satu elemen berdasarkan ID uniknya.

  #judul {
      font-size: 24px;
      font-weight: bold;
  }
  

  (Mengubah teks dalam elemen dengan id="judul".)

• Selektor Class (.class-selector)
  Memilih semua elemen dengan class tertentu.

  .kotak {
      background-color: gray;
      padding: 10px;
  }
  

  (Menerapkan warna latar abu-abu dan padding 10px pada semua elemen dengan class kotak.)

• Selektor Atribut
  Memilih elemen berdasarkan atributnya.

  input[type="text"] {
      border: 1px solid black;
  }
  

  (Mengatur border hanya untuk input yang memiliki type="text".)

• Selektor Pseudo-Class
  Memilih elemen dalam keadaan tertentu, misalnya saat kursor diarahkan ke elemen.

  a:hover {
      color: red;
  }
  

  (Mengubah warna teks tautan menjadi merah saat disentuh kursor.)

3. Properti CSS Dasar

Setelah memilih elemen dengan selektor, kita bisa mengubah tampilannya dengan berbagai properti CSS, seperti:

• Warna dan Latar Belakang

  body {
      background-color: #f5f5f5;
      color: #333;
  }
  

• Ukuran dan Jenis Font

  h1 {
      font-family: Arial, sans-serif;
      font-size: 28px;
  }
  

• Jarak dan Tata Letak (Margin & Padding)

  .kontainer {
      margin: 20px;
      padding: 10px;
  }
  

• Border dan Bayangan

  .box {
      border: 2px solid black;
      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
  }
  

4. Kombinasi Selektor

Kita juga bisa menggabungkan selektor untuk menargetkan elemen lebih spesifik, misalnya:

• Selektor Anak Langsung (>)

  div > p {
      color: green;
  }
  

  (Hanya paragraf <p> yang langsung berada di dalam <div> yang akan berwarna hijau.)

• Selektor Turunan (Descendant Selector)

  div p {
      color: purple;
  }
  

  (Semua <p> di dalam <div> akan berubah warna menjadi ungu, termasuk yang berada dalam elemen lain di dalam <div>.)

Kesimpulan

Pemahaman tentang selektor dan properti CSS sangat penting untuk mengontrol tampilan website. Dengan menguasai teknik ini, kita bisa membuat desain yang lebih menarik dan responsif.