Mudah Belajar CSS PART 5 : Jenis-jenis Selector CSS

Assalamu'alaikum W.W

Pada tutorial sebelumnya kita telah mebahas Aturan Penulisan dalam CSS, selanjutnya rekayasa ternak lele akan memberikan sedikit penjelasan tentang Jenis-jenis Slector CSS. Oke langsung aja ke TEkaPE!!!

Judul
Mudah Belajar  CSS Part 5: Jenis-jenis Selector CSS

Pengertian

Menurut Wikipedia CSS adalah “kode yang digunakan untuk mendefenisikan desain dari bahasa markup”.Salah satu bahasa markup lainnya HTML.

Secara umum CSS (Cascading Style Sheet) adalah kumpulan kode yang digunkanan untuk memformat halaman web yang ditulis dengan HTML maupun XHTML.

Latar Belakang
CSS merupakan salah satu modal dasar jika ingin menjadi web developer. Oleh karena itu, CSS sangat penting untuk dipahami dan dimengerti.

Maksud dan Tujuan
Bisa, mengerti dan memahami sintak-sintak CSS

Alat dan Bahan
Text Editor dan PC

Jangka Waktu
1 Jam

Pembahasan

Selector adalah sebuah pola (pattern) yang digunakan untuk ‘mencari’ suatu tag di dalam HTML. Sebernya ada banyak selector dalam CSS, namun dalam kebanyakan kasus sudah mencukupi untuk membuat sebuah halaman web HTML+CSS dengan 4 selector dibawah ini.

Universal Selector 

Universal Selector hanya ada 1 di dalam CSS, yaitu tanda bintang “*”. Selector ini bertujuan untuk ‘mencari’ semua tag yang ada.

Contoh Universal Selector CSS:

Jadi universal selector digunakan untuk memformat semua tag dalam web.

Element Type Selector

Element Type Selector adalah istilah untuk selector yang nilainya merupakan tag HTML itu sendiri. Setiap tag HTML bisa digunakan sebagai selector, dan seluruh tag tersebut akan ditangkap oleh selector ini.

Contoh Element Type Selector CSS:

Class Selector

Class Selector merupakan salah satu selector yang paling umum dan paling sering digunakan. Class Selector akan ‘mencari’ seluruh tag yang memiliki atribut class dengan nilai yang sesuai.

Untuk penggunaan Class Selector, kita harus memiliki tag HTML yang mempunyai atribut class. Contohnya:

Untuk menggunakan class selector, di dalam CSS kita menggunakan tanda titik sebelum nama dari class.

ID Selector

Penggunaan ID selector hampir sama dengan class selector, dengan perbedaan jika pada Class Selector kita menggunakan atribut class untuk tag HTML, untuk ID selector, kita menggunakan atribut id. 
Atribut id selain untuk selector CSS, juga berperan sebagai kode unik untuk masing-masing tag (terutama dipakai untuk kode JavaScript). Karena hal tersebut, id yang digunakan harus unik dan tidak boleh sama. Dengan kata lain, id hanya bisa digunakan satu kali dalam sebuah halaman web dan tidak boleh sama.

Kesimpulan

Slector sangat penting dalam pengembangan web. Selctor termasuk dalam satruktur  dasar CSS. Jadi kita harus mempleajari selector jika ingin mejadai developer web.

Referensi

https://www.w3schools.com/css/css_syntax.asp
http://www.duniailkom.com/tutorial-belajar-css-mengenal-jenis-jenis-selector-dasar-css/

Share this post