Selector CSS

on

Dasar-Dasar CSS & Berbagai Macam Selector CSS


Hai semua! ngomong-ngomong tentang html, pastinya web tidak akan tampil cantik tanpa stylenya ya? tentu iya, jadi sekarang saya bakal sharing pengetahuan saya tentang Type Selector, Attribute Selector, Id & Class Selector, juga tentang Child & Descendant Selector. Umm sebelum kita mulai, mari kita pelajari terlebih dahulu tentang dasar-dasar CSS

  • Apa itu CSS?

CSS adalah singkatan dari Cascading Style Sheets, CSS digunakan untuk memperindah halaman web. CSS banyak digunakan oleh programmer karena itu sangat berguna, CSS sangat membantu banyak programmer dalam memberikan style pada halaman web mereka. Selain itu, benefit memakai CSS sebagai media memperindah halaman web juga sangat di senangi, karena ini cukup mudah digunakan. CSS memiliki 3 macam, ada Inline Style, Internal Style & External Style. Yuk disimak, saya akan menjelaskan tentang itu!


  • Inline Style

Inline style yaitu code CSS yang ditulis langsung pada atribut elemen HTML untuk memberikan style pada setiap tag. Inline CSS ditulis pada atribut style dalam sebuah elemen.

See the Pen Inline by felicia rivera (@liverra) on CodePen.


  • Internal Style
Internal style yaitu code CSS yang ditulis dalam tag <style> dan dituliskan pada bagian atas (header) file HTML.

See the Pen Internal by felicia rivera (@liverra) on CodePen.


  • External Style
External style yaitu code CSS yang ditulis terpisah dengan code HTML, eksternal CSS ditulis dalam sebuah file khusus yang umumnya dengan ekstensi .css

See the Pen Untitled by felicia rivera (@liverra) on CodePen.


Bagaimana? apakah sudah cukup dipahami? jika sudah, mari kita lanjut ke Id & Class Selector. Id & Class Selector ini digunakan untuk menandai suatu selector. 

  • Id Selector
Id Selector digunakan dengan tanda "#" (hashtag)

See the Pen id selector by felicia rivera (@liverra) on CodePen.


  • Class Selector
Class Selector digunakan dengan tanda "." (dot)

See the Pen class selector by felicia rivera (@liverra) on CodePen.


Sudahkah kalian memahaminya? sebaiknya, pahami dahulu tentang materi-materi yang sudah dipelajari tadi karena kita akan mempelajari materi baru yaitu Type Selector & Attribute Selector

  • Type Selector
Type Selector digunakan untuk memilih elemen pada jenis yang sama.

See the Pen Untitled by felicia rivera (@liverra) on CodePen.


Efek dari Type selector adalah dari awal pembuka tag, sampai akhir penutup tag. Seperti contoh, Jika di dalam tag <p> terdapat tag <b>, maka tag tersebut juga akan berukuran 20 pixel, sampai ditemui tag penutup </p>

  • Attribute Selector
Attribute Selector digunakan untuk memilih elemen HTML yang memiliki nilai atribut yang sama

See the Pen atb selector by felicia rivera (@liverra) on CodePen.

Masih semangat ngoding kan? pasti semangat dong! karena masih ada penjelasan materi tentang Child Selector dan Descendant Selector nih, tidak mau ketinggalan? Ayo dipahami materi terakhir ini

  • Child Selector
Child Selector hanya dapat dipakai untuk elemen pertama & tidak dapat dipakai untuk keturunan selanjutnya. Child Selector menggunakan tanda ">"

See the Pen child selector by felicia rivera (@liverra) on CodePen.


  • Descendant Selector
Descendant Selector dipakai untuk semua elemen & bisa dipakai ke semua keturunan

See the Pen Untitled by felicia rivera (@liverra) on CodePen.


Yeay! kita sudah selesai mempelajari 3 macam style CSS dan 6 macam selector. Materi ini dapat di praktikkan apabila kalian ingin mencobanya sendiri, saya sudah mencantumkan contoh pada setiap materi sehingga kalian dapat ATM (Amati, Tiru, Modifikasi). Cukup sekian dari saya, terima kasih telah membaca blog ini. 


Happy coding :3

Comments

Post a Comment