Tutorial CSS untuk Pemula: Jenis Selector yang Ada di CSS

Halo gan. Di postingan sebelumnya kita sudah membahas cara memasukkan kode CSS ke dalam file HTML.

Kali ini, kita akan bahas jenis-jenis selector yang ada di CSS. Tapi sebelumnya, sudah tau kan selector itu apa?

Singkatnya, selector adalah elemen HTML yang ingin kita ubah tampilannya. Lebih lengkapnya bisa dibaca di sini.

tutorial css untuk pemula

Jenis-jenis selector yang ada di CSS

Ada berbagai jenis selector yang ada di CSS, tapi ke-5 jenis selector inilah yang selalu akan kita temui dalam proses pembuatan halaman web.

..ada jenis selector lain yang lebih dalam menjangkau elemen HTML untuk diubah tampilannya. Ini kita akan bahas di posting yang akan datang.

Ini dia ke-5 jenis selector dasar CSS.

Universal selector

Universal selector berguna untuk mengubah seluruh elemen HTML yang ada. Selector ini menggunakan tanda bintang (*) dan bukan tag HTML.

..oleh sebab itu, selector ini akan mengubah secara global halaman web.

Kita coba praktikkan.

Ini kode CSSnya, kita simpan dengan nama file universal-selector.css:
* {
  font-size: 14px;
  color: green;
}

Ini kode HTMLnya, kita simpan dengan nama file universal-selector.html:
<!DOCTYPE html>
<html>
  <head>
    <title> Universal selector CSS</title>
    <style>
      @import url(universal-selector.css);
    </style>
  </head>

  <body>
    <h1>Mencoba universal selector css</h1>
    <p>Halo agan-agan.. Halo agan-agan.. Halo agan-agan.. Halo agan-agan.. Halo agan-agan.. Halo agan-agan.. Halo agan-agan..</p>
  </body>
</html>

Keduanya ada di dalam 1 folder.

tutorial css untuk pemula


Artinya, semua font yang ada di halaman web akan diubah ukurannya menjadi 14 pixel dan berwarna hijau, nggak peduli itu tagnya apa, semua tag akan sama. Seperti ini jadinya:

tutorial css untuk pemula


Elemen type selector

Elemen type selector ini menggunakan tag HTML untuk mengubah tampilannya. Setiap tag HTML bisa digunakan sebagai selector dan perubahannya akan berlaku ke semua tag yang sama di 1 file HTML.

..jadi jika ada 3 paragraf yang warna teksnya ingin diubah menjadi biru, cukup dengan 1 selector p saja.

Kita praktikkan.

Buat file element-type-selector.html.
<!DOCTPYE html>
<html>
  <head>
    <title>Elemen type selector</title>
    <style>
    @import url(element-type-selector.css);
    </style>
  </head>

  <body>
    <p>Ini kalimat di paragraf 1.. Ini kalimat di paragraf 1.. Ini kalimat di paragraf 1.. Ini kalimat di paragraf 1.. </p>

    <p>Ini kalimat di paragraf 2.. Ini kalimat di paragraf 2.. Ini kalimat di paragraf 2.. Ini kalimat di paragraf 2.. </p>

    <p>Ini kalimat di paragraf 3.. Ini kalimat di paragraf 3.. Ini kalimat di paragraf 3.. Ini kalimat di paragraf 3.. </p>
  </body>
</html>

Lalu, ini file CSSnya: element-stype-selector.css.
p {
  color: blue;
}

Semua paragraf: paragraf 1, 2, dan 3 akan menjadi biru warna hurufnya.

tutorial css untuk pemula

Class selector

Selector jenis ini merupakan yang paling sering digunakan. Selector ini menggunakan tanda titik (.) dan nama dari atribut class di suatu tag HTML. Posisi tanda titik tersebut berada di depan nama atribut classnya.

..jadi apapun tagnya, asal memiliki atribut class yang sama, perubahannya akan sama.

Contohnya, kita akan mengubah warna teks heading dan paragraf menjadi merah.

Buat file class-selector.html.
<!DOCTYPE html>
<html>
  <head>
    <title>Class selector</title>
    <style>
    @import url(class-selector.css);
    </style>
  </head>

  <body>
    <h1 class="merah">Ini adalah heading dengan tag h1</h1>

    <p class="merah">..dan ini adalah paragraf dengan tag p..</p>
  </body>
</html>

Lalu, buat file class-selector.css.
.merah {
  color: red;
}

Karena tag <h1> dan <p> punya nama class yang sama, maka akan sama hasilnya.

tutorial css untuk pemula

Yang perlu diingat, nama class boleh digunakan di lebih dari 1 tag HTML. Contohnya seperti di atas, tag <h1> dan <p> memiliki nama class yang sama.

..dan 1 tag HTML bisa memiliki lebih dari 1 nama class. Seperti ini:
<h2 class="merah mobil kebab">Ini heading</h2>

Artinya, ada 3 class pada tag <h2> di atas: merah, mobil, dan kebab.

ID selector

ID selector ini hampir sama dengan class selector, bedanya. Selector ini menggunakan tanda pagar (#) dan nama dari atribut id di suatu tag HTML. Posisi tanda pagar tersebut berada di depan nama atribut idnya.

Atribut id pada tag HTML nggak boleh dipakai lebih dari 1 kali di 1 file HTML, karena selain berperan sebagai selector di CSS, atribut id juga digunakan oleh kode Javascript.

..jadi harus bersifat unik dan nggak boleh sama.

Contoh kodenya seperti ini.

Kode HTML:
<!DOCTYPE html>
<html>
  <head>
    <title>Id selector</title>
    <style>
    @import url(id-selector.css);
    </style>
  </head>

  <body>
    <p id="warna_biru">Ini adalah paragraf pertama..</p>

    <p id="warna_merah garis_bawah">Ini adalah paragraf kedua..</p>
  </body>
</html> 

Kode CSS:
#warna_biru {
  color: blue;
}

#warna_merah {
  color: red;
}

#garis_bawah {
  text-decoration: underline;
}

Seperti itu.

Yang perlu diingat, dalam 1 file HTML nggak boleh ada nama id yang sama. dan setiap tag HTML boleh punya lebih dari 1 id.

Atribute selector

Kalo selector yang ini, dia menggunakan atribute dari suatu tag HTML. misalnya atribut href yang ada pada tag <a>.

Seperti ini kode CSSnya:
[href] {
  color: green;
  text-decoration: underline;
}

Atributenya ditambahkan tanda kurung siku ([...]) seperti contoh kode di atas.

Kita juga bisa lebih spesifik lagi dalam menjangkau atributenya, yakni dengan valuenya juga.

Seperti ini:
[type="text"] {
  font-size: 20px;
}

Artinya, ukuran font diubah menjadi 20px untuk atribute type dengan value text pada tag <input>, yang mana ini adalah inputan teks dalam pembuatan form.

Sampai sini selesai sudah pembahasan kita tentang jenis-jenis selector yang ada di CSS.

Next, kita akan bahas cara penggunaan selector pada CSS.


Tag : Tutorial CSS
0 Komentar untuk "Tutorial CSS untuk Pemula: Jenis Selector yang Ada di CSS"