Tutorial CSS Combinators

CSS Combinators

Assalamu'alaikum W. W.
A. Pendahuluan

Halo, pada kesempatan kali ini saya akan menjelaskan tentang CSS, bidang combinators / oprator penggabung ketika akan megatur CSS-nya.
1.Pengertian
  Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen / artibut dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukanlah sebuah bahasa pemograman.
  CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

2.Latar Belakang

Ingin mengetahui bagaimana cara membuat tampilan dalam sebuah website dengan baik.
3.Maksud dan Tujuan
Paham dan dapat mengggunakan CSS, dan dapat membuat tampilan dalam sebuah website.
B. Alat dan Bahan

-PC
-Text Editor
-Web Browser
C. Jangka Waktu Pelaksanaan
-
D. Penjelasan
Combinators adalah sesuatu yang menjelaskan hubungan antar selector CSS.
Ada beberapa combinators di CSS, yaitu :

• descendant / ketuluran dari selector (space)
• child / anakan dari selector (>)
• adjacent sibling selector (+)
• general sibling selector (~)

1. Descendant Selector (space / sapsi)
Descendant Selector berguna untuk mengaturan semua komponen yang berada dalam suatu komponen induk. Yang ditandai dengan cara menambahkan spasi.
2. Child Selector (>)
Child Selector berguna untuk mengatur komponen yang merupakan anak langsung dari sebuah komponen induk. Yang ditandai dengan penggunaan tanda (>).
3. Adjacent sibling (+)
Adjacent sibling berguna untuk mengatur sebuah komponen yang paling dekat / komponen setelah komponen induk. Yang ditandai dengan penggunaan tanda (+).
4. General sibling (~)
General sibling berguna untuk mengatur semua komponen setelah komponen induk. Yang ditandai dengan penggunaan tanda (~)
Agar lebih paham, lihatlah contoh penggunaan combinators berikut :

E. Kesimpulan

Ketika kita sedang membuat website kita dapat memanfaatkan fungsi Combinators agar dapat lebih mudah dalam membuatnya.
F. Referensi
https://id.wikipedia.org/wiki/Cascading_Style_Sheets
https://www.w3schools.com/css/css_combinators.asp

Wassalamu'alaikum W. W.

Share this post