Membangun situs web dengan gaya yang baik di web saat ini membutuhkan pemahaman yang mendalam tentang Lembar Gaya Cascading. Terapkan serangkaian gaya CSS ke dokumen HTML Anda untuk menginformasikan tampilan dan nuansa halaman web Anda.
Atribut Kelas dan ID
Desainer terkadang harus menerapkan gaya saja beberapa elemen dalam dokumen, tetapi tidak semua contoh elemen itu. Untuk mencapai gaya yang diinginkan ini, gunakan kelas dan Indo atribut HTML. Atribut ini adalah atribut global yang berlaku untuk hampir semua applicable tag HTML—jadi apakah Anda menata pembagian, paragraf, tautan, daftar, atau bagian lain dari HTML dalam dokumen Anda, Anda dapat beralih ke atribut kelas dan ID untuk membantu Anda menyelesaikan tugas ini!
Pemilih Kelas
Pemilih kelas menetapkan beberapa gaya ke elemen atau tag yang sama dalam dokumen. Misalnya, untuk memanggil bagian tertentu dari teks Anda dengan warna berbeda sebagai peringatan, tetapkan paragraf Anda dengan kelas seperti ini:
p { warna: #0000ff; }
p.alert { warna: #ff0000; }
Gaya ini akan mengatur warnasemua paragraf menjadi biru (#0000ff), tetapi paragraf apa pun dengan atribut kelas waspada sebagai gantinya akan diberi gaya merah (#ff0000). Hal ini karena atribut class memiliki spesifisitas yang lebih tinggi dari aturan CSS pertama, yang hanya menggunakan pemilih tag. Saat bekerja dengan CSS, aturan yang lebih spesifik akan menggantikan aturan yang kurang spesifik. Jadi dalam contoh ini, aturan yang lebih umum menetapkan warna semua paragraf, tetapi aturan kedua yang lebih spesifik daripada mengesampingkan pengaturan itu hanya di beberapa paragraf.
Inilah cara ini dapat digunakan di beberapa markup HTML:
Paragraf ini akan ditampilkan dengan warna biru, yang merupakan default untuk halaman tersebut.
Paragraf ini juga akan berwarna biru.
Dan paragraf ini akan ditampilkan dalam warna merah karena atribut class akan menimpa warna biru standar dari gaya pemilih elemen.
Dalam contoh itu, gaya p.waspada hanya akan berlaku untuk elemen paragraf yang menggunakan itu waspada kelas. Untuk menggunakan kelas itu di beberapa elemen HTML, hapus elemen HTML dari awal pemanggilan gaya, seperti ini:
.alert {warna-latar belakang: #ff0000;}
Kelas ini sekarang tersedia untuk elemen apa pun yang membutuhkannya. Setiap bagian dari HTML Anda yang memiliki nilai atribut kelas waspada sekarang akan mendapatkan gaya ini. Dalam HTML di bawah ini, kita memiliki paragraf dan heading level-dua yang menggunakan waspada kelas. Keduanya menampilkan warna latar belakang merah:
Paragraf ini akan ditulis dengan warna merah.
Di situs web saat ini, atribut kelas sering digunakan pada sebagian besar elemen karena lebih mudah digunakan dari perspektif kekhususan daripada ID. Anda akan menemukan sebagian besar halaman HTML saat ini diisi dengan atribut kelas, beberapa di antaranya sering diulang dalam dokumen dan yang lain mungkin hanya muncul sekali.
Pemilih ID
Identitas pemilih menamai gaya tertentu tanpa mengaitkannya dengan tag atau lainnya elemen HTML.
Asumsikan divisi dalam markup HTML Anda yang berisi informasi tentang suatu peristiwa. Anda bisa memberikan divisi ini dan atribut ID dari peristiwa, lalu buat garis besar pembagian tersebut dengan batas hitam selebar 1 piksel:
#event { batas: 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 di setiap dokumen HTML individual). Jadi untuk tiga acara yang semuanya membutuhkan perbatasan ini, Anda harus mengidentifikasi atribut ID dari acara1, acara2, dan acara3 dan gaya masing-masing. Oleh karena itu, akan jauh lebih mudah untuk menggunakan atribut kelas yang disebutkan di atas dari peristiwa dan gaya semuanya sekaligus.
Komplikasi Atribut ID
Tantangan lain dengan atribut ID adalah bahwa mereka memiliki spesifisitas yang lebih tinggi daripada atribut kelas. Untuk mengganti gaya yang sudah ada sebelumnya, mungkin sulit untuk melakukannya jika Anda terlalu mengandalkan ID. Banyak pengembang web telah pindah dari menggunakan ID di markup mereka, bahkan jika mereka hanya bermaksud menggunakan nilai itu sekali, dan sebagai gantinya beralih ke atribut kelas yang kurang spesifik untuk hampir semua gaya.
Satu-satunya area di mana atribut ID berperan adalah saat Anda ingin membuat halaman yang memiliki tautan jangkar dalam halaman. Misalnya, pertimbangkan situs web bergaya paralaks yang berisi semua konten pada satu halaman dengan tautan yang "melompat" ke berbagai bagian halaman itu. Atribut ID dan tautan teks menggunakan tautan jangkar ini. Tambahkan nilai atribut itu, didahului oleh # simbol, untuk href atribut tautan, seperti ini:
Ini linknya
Saat diklik atau disentuh, tautan ini melompat ke bagian halaman yang memiliki atribut ID ini. Jika tidak ada elemen pada halaman yang menggunakan nilai ID ini, tautan tidak akan melakukan apa pun.
Untuk membuat tautan dalam halaman di situs, penggunaan atribut ID akan diperlukan, tetapi Anda masih dapat beralih ke kelas untuk tujuan gaya CSS umum. Beginilah cara desainer menandai halaman hari ini—mereka menggunakan pemilih kelas sebanyak mungkin dan hanya beralih ke ID saat mereka membutuhkan atribut untuk bertindak tidak hanya sebagai pengait untuk CSS tetapi juga sebagai tautan dalam halaman.