Selectors id dan class
Selain menetapkan selector dari elemen HTML, CSS memungkinkan Anda untuk membuat selector buatan Anda sendiri yang disebut "id" dan "class".
Id Selector
Selector id digunakan untuk membuat satu elemen yang unik.
Selector id menggunakan atribut id dari elemen HTML, dan didefinisikan dengan "#".
pengaturan style dibawah ini akan diterapkan ke elemen dengan id = "para1":
| <!DOCTYPE html> <html> <head> <style type="text/css"> #para1 { text-align:center; color:red; } </style> </head> <body> <p id="para1">Hallo Dunia !</p> <p>paragraph ini tidak di kenai efek style</p> </body> </html> |
Selector Class
Selector class digunakan untuk membuat style untuk sekelompok elemen. Berbeda dengan selector id, selector class yang paling sering digunakan pada beberapa elemen.
Hal ini memungkinkan Anda untuk membuat style tertentu untuk banyak elemen HTML dengan kelas yang sama.
Selector class menggunakan atribut class HTML, dan didefinisikan dengan "."
Pada contoh di bawah ini, semua elemen HTML dengan class = "center" akan di ketengahkan:
| <!DOCTYPE html> <html> <head> <style type="text/css"> .center { text-align:center; } </style> </head> <body> <h1 class="center">heading di ketengahkan</h1> <p class="center">paragraph di ketengahkan</p> </body> </html> |
Pada contoh di bawah ini, semua elemen p dengan class = "center" akan menjadi di ketengahkan:
| <!DOCTYPE html> <html> <head> <style type="text/css"> p.center { text-align:center; } </style> </head> <body> <h1 class="center">heading ini tidak dikenai efek</h1> <p class="center">paragraph ini akan di ketengahkan</p> </body> </html> |
Jangan memulai nama kelas dengan nomor! Ini hanya didukung di Internet Explorer.
Artikel Sebelumnya .....
Artikel Selanjutnya .....
Tidak ada komentar:
Posting Komentar