بِسْمِ اللّهِ
السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Pada pertemuan kali ini kita akan melanjutkan materi CSS Selector pada pertemuan sebelumnya mengenai kategori pengelompokkan dalam CSS Selector.

Jika pada pertemuan sebelumnya kita telah mempelajari ID Selector dan Class Selector, maka pada pertemuan kali ini kita akan mempelajari Universal Selector dan Grouping Selector.

1. UNIVERSAL SELECTOR

Universal Selector menggunakan lambang bintang (*) sebagai penanda. Universal Selector berfungsi untuk merubah seluruh element HTML dengan style yang diberi pananda (*).

See the Pen CSS - 003 - UNIVERSAL SELECTOR by Septian Pramana (@septianpramana) on CodePen.dark

Pada script/kode diatas, bagian file CSS, terdapat tanda bintang (*) sebelum kode/script style dituliskan, sehingga pada halaman HTML setiap tag/element mendapatkan style yang sama, sesuai dengan style yang ditandai Univesal Selector (Setiap Element diberi style tulisan rata tengah dan berwarna biru).

2. GROUPING SELECTOR

Grouping Selector difungsikan untuk mengelompokkan element-element HTML untuk mendapatkan style yang sama.

See the Pen CSS - 003 - GROUPING SELECTOR by Septian Pramana (@septianpramana) on CodePen.dark

Perhatikan script/baris kode diatas, pada file CSS diberlakukan style dalam pengelompokkan element, untuk element <h1> dan <h2>  tulisan dibuat berwarna merah, <h3> dan <p> tulisan dibuat berwarna biru, sedangkan untuk semua element diberlakukan style posisi text rata tengah dengan menggunakan Universal Selector.

Alhamdulillah materi CSS Selector telah selesai hari ini, pada pertemuan berikutnya, insyaalloh kita masih mempelajari script CSS lebih lanjut  lagi, sehingga kita bisa mempercantik tampilan website yang kita buat.  Sekian pertemuan kita pada kali ini, tetap semangat belajar, jaga kesehatan, dan kurangi / hindari segala aktifitas diluar rumah sebagai bentuk proteksi diri dalam memerangi pandemi CoViD-19.

*) Catatan

Apabila aplikasi contoh CodePen tidak tampil seperti gambar dibawah ini, silahkan buka link/tautan yang ditampilkan untuk mengaktifkan aplikasi dan silahkan kembali lagi ke halaman ini.