Search This Blog

Monday 14 November 2016

Selectors CSS

Ada beberapa selector dasar CSS yang diambil dari tag HTML itu sendiri, misalnya pada penggunaan tag body yang ingin dijadikan sebagai selector dengan alasan bahwa efek yang diberikan ialah untuk keseluruhan, atau untuk beberapa tag lainnya yang memang pada setiap tag tersebut ingin diberi efek yang sama. Seperti halnya pada penerapan tag paragraf yang biasa kita kenal dengan <p>, atau untuk heading dengan tag yang biasa kita kenal dengan <h1> - <h6>, atau mungkin untuk tag li dan link.
untuk penerapan dari apa yang penulis sebutkan tadi, mari perhatikan contoh program berikut:




pada contoh program diatas kita dapat melihat bahwa penerapan efek yang digunakan dalam CSS tersebut menggunakan tag HTML itu sendiri, dengan kata lain tidak dibuatkannya selector baru. Namun ada pula teknik lain untuk penerapan style pada HTML dengan menggunakan bantuan CSS. Salah satunya dengan bantuan selector yang dibuat sendiri secara bebas. Untuk hal tersebut, disini terbagi menjadi dua hal, yaitu untuk Class dan ID, namun sebelum kesana, mari perkenalkan terlebih dahulu mengenai costum selector, apa perbedaan class dan ID.


Costum Selector

costum selector merupakan sebuah selector dalam CSS yang dapat ditentukan secara bebas oleh web-designer itu sendiri. Untuk penerapannya sendiri tidak berpatok pada tag HTML, namun dapat diterapkan sesuai dengan keinginan dan kenyamanan designer.
Untuk maksud bebas itu sendiri ialah bebas dalam penamaan desain yang ingin diberi style CSS, namun untuk penulisannya itu sendiri tidak sepenuhnya bebas, tetap saja terdapat aturan penulisan yang berlaku disetiap penamaan desain. seperti halnya ingin memberi nama desain dengan Class CSS, maka untuk penulisan harus diawali dengan tanda baca (.) / "titik". Tanda baca titik tersebut merupakan ciri khas sekaligus aturan dalam pembuatan class pada sebuah desain dengan CSS. Begitupun dengan ID, pada ID pun sama, terdapat aturan yang sekaligus menjadi ciri khas baginya dalam pembuatan desain dalam CSS. Pada ID, penulisan nama desain harus diawali dengan tanda baca (#) / "pagar". Tanda baca tersebut ialah penanda bahwa desain yang dibuat ialah menggunakan ID.

Satu hal yang tidak kalah pentingnya untuk Anda ketahui mengenai ID dan Class ialah perbedaannya. Kapan harus menggunakan ID dan kapan kita harus menggunakan Class? itu merupakan sebuah pertanyaan yang terlihat sederhana namun sungguh penting perannya untuk dipahami. Untuk penerapan ID sendiri digunakan pada saat desain yang dibuat memang Unique atau dengan kata lain tidak sama dengan yang lain, atau berbeda sendiri. Maksud dari unique sendiri ialah pada saat kita membuat selector dan selector tersebut memang hanya akan digunakan pada satu desain, maka disitulah kita menggunakan ID. Bukan karena ID tidak dapat digunakan dalam beberapa desain ataupun Class tidak dapat digunakan hanya untuk satu desain, namun memang peraturan dalam penulisannya seperti itu. Biasa penulis menyebutnya "hanya untuk cari aman". Namun ada pula alasan lain ialah karena ke'efektifan seorang programmer dalam menuliskan codenya pada saat membuat program itu penting, alasannya sudah jelas, karena setiap program yang dibuat memang akan menjadi tanggung jawab programmer dan memang semua program (baik dan buruknya) bergantung pada programmer. Maka dengan demikian untuk menghindari penilaian/anggapan sepele pada suatu code itu wajib dihindari.

Kembali pada topik, tadi sudah dibahas secara ringkas mengenai ID, dan kini perlu dipahami mengapa Class digunakan hanya untuk desain yang selectornya digunakan secara bersamaan. Semua itu sebenarnya sudah jelas, ialah karena untuk apa ada sebuah ID dan Class jika antara kedua itu digunakan untuk hal yang sama. Dengan demikian, perbedaan yang terlihat sederhana tersebut alangkah lebih baiknya untuk selalu diperhatikan, selagi memang perbedaannya pun hanya sedikit dan tidak memerlukan waktu lama untuk memahami dan menghafalnya.

Untuk penerapan materi yang penulis sampaikan mengenai Class dan ID, mari perhatikan contoh program berikut:


No comments:

Post a Comment