Mengenal Selector Pada CSS dan Penggunaan Simple Selector Pada CSS

Seperti yang telah diuraikan sebelumnya bahwa CSS adalah kumpulan kode yang digunakan untuk mendefenisikan desain dari bahasa markup, dimana bahasa markup ini salah satunya adalah HTML. Begitu juga dengan fungsi CSS yaitu untuk mengubah/memformat tampilan dari tag HTML. Maka terdapat aturan-aturan dalam kode CSS supaya dapat dihubungkan dengan tag HTML.

Pada tutorial kali ini, kita akan belajar tentang bagaimana cara untuk menghubungakan Kode CSS dengan tag HTML sehingga CSS dapat memformat Tag HTML yang sesuai. Untuk itu pada CSS dikenal ada yang namanya Selector.

Pengertian Selector pada CSS

Selector adalah tag HTML di mana gaya akan diterapkan. Selektor CSS digunakan untuk “menemukan” (atau memilih) elemen HTML yang mana yang akan diformat/diubah formatnya. Selector dapat berupa tag HTML seperti <h1> atau <table> dll.

Secara umum selector dibagi menjadi 5 kategori berikut ini:

  1. Simple Selectors
  2. Combinator Selectors
  3. Pseudo-class Selectors
  4. Pseudo-elements Selectors
  5. Attribute Selectors

Penggunaan Simple Selectors

Simple Selector pada CSS digunakan untuk memilih elemen HTML yang akan diformat berdasarkan dari name, id atau class. Sehingga format yang diberikan apda kode CSS akan diterapkan pada setiap tag HTML sesuai dengna nama elemen, nama id dan nama class-nya.

Contoh pemilihan Elemen HTML berdasarkan nama elemen:

Kode CSS di atas akan memberikan format pada elemen <p> dengan format perataan paragraf justify dan ukuran huruf 0.8em. Tentang Ukuran em, silahkan baca: Satuan Ukuran Yang Digunakan Pada CSS (CSS Measurement Units).

Dari kode CSS tersebut maka paragraf yang ada pada halaman html akan ditampilkan seperti pada gamber berikut ini.

Hasil Selector Paragraf

Hasil Selector Paragraf <p>

Contoh pemilihan Elemen HTML berdasarkan nama ID:

Kode CSS di atas akan memberikan format terhadap elemen HTML yang memiliki nama id “judul” dengan format teks UPPERCASE atau huruf kapital dan berwarna biru.

Contoh tag HTML berikut:

Maka tag HTML <h1> akan menghasilkan tampilan seperti berikut ini.

Hasil Selector ID CSS

Hasil Selector ID CSS

Contoh pemilihan berdasarkan nama CLASS:

Kode CSS di atas akan memformat tag HTML yang memiliki nama class “hijau”, sehingga kode HTML berikut ini:

Akan menghasilkan tampilan seperti berikut ini:

Hasil Selector Class

Hasil Selector Class

Demikian tutorial Mengenal Selector Pada CSS dan Penggunaan Simple Selector CSS. Untuk penggunaan jenis selector lainnya insyaAllah akan kita bahas pada tutorial selanjutnya.

Mungkin Anda juga menyukai

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *