Kelas dan ID Bantuan Perluas CSS Anda
Membangun situs web di Web hari ini membutuhkan pemahaman mendalam tentang CSS (Cascading Style Sheets). Ini adalah instruksi yang Anda berikan situs web untuk menentukan bagaimana tata letaknya di jendela browser. Anda menerapkan serangkaian "gaya" ke dokumen HTML Anda yang akan menciptakan tampilan dan nuansa halaman web Anda.
Ada banyak cara untuk menerapkan gaya yang disebutkan di atas pada dokumen, tetapi seringkali Anda ingin menggunakan gaya hanya pada beberapa elemen dalam dokumen, tetapi tidak semua contoh elemen tersebut.
Anda juga mungkin ingin membuat gaya yang dapat Anda terapkan pada beberapa elemen dalam dokumen, tanpa harus mengulang aturan gaya untuk setiap contoh individual. Untuk mencapai gaya yang diinginkan ini, Anda akan menggunakan atribut HTML kelas dan ID. Atribut-atribut ini adalah atribut global yang dapat diterapkan ke hampir setiap tag HTML . Itu berarti bahwa apakah Anda menata divisi, paragraf, tautan, daftar atau bagian lain dari HTML di dokumen Anda, Anda dapat beralih ke atribut kelas dan ID untuk membantu Anda menyelesaikan tugas ini!
Pemilih Kelas
Pemilih kelas memungkinkan Anda menyetel beberapa gaya ke elemen atau tag yang sama dalam dokumen. Misalnya, Anda mungkin ingin bagian tertentu dari teks Anda dipanggil dengan warna yang berbeda dari bagian teks lainnya dalam dokumen. Bagian yang disorot ini bisa berupa "lansiran" yang Anda tetapkan di halaman. Anda dapat menetapkan paragraf Anda dengan kelas-kelas seperti ini:
p {color: # 0000ff; }
p.alert {color: # ff0000; }
Gaya-gaya ini akan mengatur warna semua paragraf menjadi biru (# 0000ff), tetapi setiap paragraf dengan atribut kelas "waspada" justru akan diberi warna merah (# ff0000). Ini karena atribut class memiliki kekhususan yang lebih tinggi daripada aturan CSS pertama, yang hanya menggunakan pemilih tag.
Ketika bekerja dengan CSS, aturan yang lebih spesifik akan menggantikan yang kurang spesifik. Jadi dalam contoh ini, aturan yang lebih umum mengatur warna semua paragraf, tetapi yang kedua, aturan yang lebih spesifik daripada menimpa pengaturan itu hanya pada beberapa paragraf.
Berikut adalah bagaimana ini bisa digunakan dalam beberapa markup HTML:
Paragraf ini akan ditampilkan dengan warna biru, yang merupakan default untuk halaman.
Paragraf ini juga berwarna biru.
Dan paragraf ini akan ditampilkan dalam warna merah karena atribut class akan menimpa warna biru standar dari style selector styling.
Dalam contoh itu, gaya "p.alert" hanya akan berlaku untuk elemen paragraf yang menggunakan kelas "lansiran" tersebut. Jika Anda ingin menggunakan kelas tersebut di beberapa elemen HTML, Anda cukup menghapus elemen HTML dari awal panggilan gaya (pastikan untuk meninggalkan periode (.) di tempat), seperti ini:
.alert {background-color: # ff0000;}
Kelas ini sekarang tersedia untuk semua elemen yang membutuhkannya. Bagian apa pun dari HTML Anda yang memiliki nilai atribut kelas "lansiran" sekarang akan mendapatkan gaya ini. Dalam HTML di bawah ini, kami memiliki paragraf dan tingkat 2 yang menggunakan kelas "siaga". Kedua hal ini akan memiliki warna latar merah berdasarkan CSS yang baru saja kami tunjukkan.
Paragraf ini akan ditulis dengan warna merah.
Dan h2 ini juga akan berwarna merah.
Di situs web saat ini, atribut kelas sering digunakan pada sebagian besar elemen karena mereka lebih mudah untuk bekerja dengan dari perspektif spesifisitas yang ID. Anda akan menemukan halaman HTML terbaru untuk diisi dengan atribut kelas, beberapa di antaranya diulang beberapa kali dalam dokumen dan yang lain yang mungkin hanya muncul sekali.
ID Selectors
Pemilih ID memungkinkan Anda memberi nama untuk gaya tertentu tanpa mengaitkannya dengan tag atau elemen HTML lainnya. Katakanlah Anda memiliki divisi dalam markup HTML Anda yang berisi informasi tentang suatu peristiwa.
Anda bisa memberikan divisi ini atribut ID "event", dan kemudian jika Anda ingin menguraikan divisi itu dengan perbatasan hitam lebar 1-pixel Anda menulis kode ID seperti ini:
#event {border: 1px solid # 000; }
Tantangan dengan pemilih ID adalah bahwa mereka tidak dapat diulang dalam dokumen HTML. Mereka harus unik (Anda dapat menggunakan ID yang sama di beberapa halaman situs Anda, tetapi hanya sekali dalam setiap dokumen HTML individu). Jadi, jika Anda memiliki 3 peristiwa yang semuanya membutuhkan perbatasan ini, Anda perlu memberi mereka atribut ID "event1", "event2", dan "event3", dan beri gaya masing-masing. Oleh karena itu, akan jauh lebih mudah untuk menggunakan atribut kelas "acara" yang disebutkan di atas dan menata semuanya sekaligus.
Tantangan lain dengan atribut ID adalah bahwa mereka memiliki spesifitas yang lebih tinggi daripada atribut kelas. Ini berarti bahwa jika Anda perlu memiliki CSS yang mengesampingkan gaya yang telah ditetapkan sebelumnya, akan sulit untuk melakukannya jika Anda terlalu bergantung pada ID. Karena alasan inilah banyak pengembang web yang menjauh dari menggunakan ID di markup mereka, meskipun mereka hanya berniat menggunakan nilai itu sekali, dan sebaliknya beralih ke atribut kelas yang kurang spesifik untuk hampir semua gaya.
Satu area di mana atribut ID akan berperan adalah ketika Anda ingin membuat halaman yang memiliki tautan tautan di halaman. Misalnya, jika Anda memiliki situs web gaya paralaks yang berisi semua konten pada satu halaman dengan tautan yang "melompat" ke berbagai bagian halaman itu. Ini dilakukan menggunakan atribut ID dan tautan teks yang menggunakan tautan tautan ini.
Anda cukup menambahkan nilai atribut itu, didahului oleh simbol #, ke atribut href dari tautan, seperti ini:
Ini adalah tautan
Ketika diklik atau disentuh, tautan ini akan melompat ke bagian halaman yang memiliki atribut ID ini. Jika tidak ada elemen di halaman yang menggunakan nilai ID ini, tautan tidak akan melakukan apa-apa.
Ingat, jika Anda ingin membuat tautan dalam laman di situs, penggunaan atribut ID akan diperlukan, tetapi Anda masih dapat beralih ke kelas untuk keperluan styling CSS umum. Ini adalah bagaimana saya menandai halaman hari ini - saya menggunakan pemilih kelas sebanyak mungkin dan hanya beralih ke ID ketika saya membutuhkan atribut untuk bertindak tidak hanya sebagai pengait untuk CSS tetapi juga sebagai tautan dalam-halaman.
Artikel asli oleh Jennifer Krynin. Diedit oleh Jeremy Girard pada 8/9/17