Lembar Gaya Cascading tentukan tampilan elemen halaman web dengan mengaitkan atribut yang Anda terapkan ke elemen tersebut. Atribut ini dapat berupa ID atau kelas dan, seperti semua atribut, atribut ini menambahkan informasi yang berguna ke elemen yang dilampirkan.
Bergantung pada atribut mana yang Anda tambahkan ke elemen, Anda dapat menulis pemilih CSS untuk menerapkan gaya visual yang diperlukan yang diperlukan untuk mencapai tampilan dan nuansa untuk elemen itu dan situs web secara keseluruhan.
Sementara ID atau kelas berfungsi untuk menghubungkannya dengan aturan CSS, desain web modern metode lebih menyukai kelas daripada ID, sebagian, karena mereka kurang spesifik dan lebih mudah untuk digunakan secara keseluruhan.
Satu atau Lebih Kelas di CSS?
Dalam kebanyakan kasus, Anda menetapkan atribut kelas tunggal ke suatu elemen, tetapi Anda sebenarnya tidak terbatas hanya pada satu kelas seperti halnya Anda dengan ID. Sedangkan elemen hanya dapat memiliki satu atribut ID, Anda dapat memberikan elemen beberapa kelas dan, dalam beberapa kasus, hal itu akan membuat halaman Anda lebih mudah ditata dan banyak lagi fleksibel.
Jika Anda perlu menetapkan beberapa kelas ke sebuah elemen, tambahkan kelas tambahan dan cukup pisahkan dengan spasi di atribut Anda.
Misalnya, paragraf ini memiliki tiga kelas:
Ini akan menjadi teks paragraf
Ini menetapkan tiga kelas berikut pada tag paragraf:
- kutipan tarik
- Unggulan
- Kiri
Perhatikan spasi di antara masing-masing nilai kelas ini. Ruang-ruang itulah yang menjadikannya sebagai kelas individu yang berbeda. Ini juga mengapa nama kelas tidak dapat memiliki spasi di dalamnya karena hal itu akan menjadikannya sebagai kelas yang terpisah.
Setelah Anda memiliki nilai kelas Anda di HTML, Anda kemudian dapat menetapkan ini sebagai kelas di CSS Anda dan menerapkan gaya yang ingin Anda tambahkan. Sebagai contoh.
.pullquote {... }
.fitur {... }
hal.kiri {... }
Dalam contoh ini, deklarasi CSS dan pasangan nilai muncul di dalam kurung kurawal, yang merupakan cara gaya tersebut akan diterapkan ke pemilih yang sesuai.
Jika kamu atur kelas ke elemen tertentu (sebagai contoh, p.kiri), Anda masih dapat menggunakannya sebagai bagian dari daftar kelas; namun, perlu diketahui bahwa itu hanya akan memengaruhi elemen-elemen yang ditentukan dalam CSS. Dengan kata lain, p.kiri style hanya akan berlaku untuk paragraf dengan kelas ini karena pemilih Anda sebenarnya mengatakan untuk menerapkannya ke "paragraf dengan nilai kelas kiri," Sebaliknya, dua selektor lainnya dalam contoh tidak menentukan elemen tertentu, sehingga mereka akan berlaku untuk elemen apa pun yang menggunakan nilai kelas tersebut.
Beberapa Kelas, Semantik, dan JavaScript
Keuntungan lain menggunakan beberapa kelas adalah meningkatkan kemungkinan interaktivitas.
Terapkan kelas baru ke elemen yang ada menggunakan JavaScript tanpa menghapus salah satu kelas awal. Anda juga dapat menggunakan kelas untuk mendefinisikan semantik elemen — tambahkan kelas tambahan untuk mendefinisikan apa arti elemen itu secara semantik. Pendekatan ini adalah bagaimana Microformats bekerja.
Keuntungan dari Beberapa Kelas
Melapisi beberapa kelas dapat mempermudah untuk menambahkan efek khusus ke elemen tanpa harus membuat gaya yang sama sekali baru untuk elemen tersebut.
Misalnya, untuk mengapungkan elemen ke kiri atau kanan, Anda dapat menulis dua kelas:
kiri.
dan.
Baik.
dengan hanya.
mengapung: kiri;
dan.
mengapung: benar;
di dalamnya. Kemudian, setiap kali Anda memiliki elemen yang Anda butuhkan untuk melayang ke kiri, Anda cukup menambahkan kelas "kiri" ke daftar kelasnya.
Namun, ada garis yang bagus untuk berjalan di sini. Ingatlah bahwa standar web mendikte pemisahan gaya dan struktur. Struktur ditangani menggunakan HTML sementara gaya dalam CSS. Jika dokumen HTML Anda diisi dengan elemen yang semuanya memiliki nama kelas seperti "merah" atau "kiri", yang merupakan nama yang mendikte bagaimana elemen harus terlihat daripada apa adanya, Anda melewati garis antara struktur dan gaya.
Kekurangan Banyak Kelas
Kerugian terbesar menggunakan beberapa kelas simultan pada elemen Anda adalah bahwa hal itu dapat membuat mereka sedikit berat untuk dilihat dan dikelola dari waktu ke waktu. Mungkin sulit untuk menentukan gaya apa yang memengaruhi elemen dan apakah ada skrip yang memengaruhinya. Banyak kerangka kerja yang tersedia saat ini, seperti Bootstrap, banyak menggunakan elemen dengan banyak kelas. Kode itu bisa lepas kendali dan sulit untuk dikerjakan dengan sangat cepat jika Anda tidak hati-hati.
Saat Anda menggunakan beberapa kelas, Anda juga menanggung risiko gaya untuk satu kelas menimpa gaya yang lain. Tabrakan ini kemudian dapat mempersulit untuk mencari tahu mengapa gaya Anda tidak diterapkan meskipun tampaknya memang seharusnya demikian. Tetap waspada terhadap kekhususan, bahkan dengan atribut yang diterapkan pada satu elemen itu.
Dengan menggunakan alat seperti alat Webmaster di Google Chrome, Anda dapat lebih mudah melihat bagaimana kelas Anda memengaruhi gaya Anda dan menghindari masalah gaya dan atribut yang saling bertentangan ini.