Class dan ID Selector
Masih
ingat kan pada pelajaran syntax CSS bagian pertama yang di tulis
adalah selector. Pada contoh-contoh di pelajaran sebelumnya, anda
melihat penggunaan tag HTML sebagai selector.
Misalkan
anda membuat kode CSS untuk tag <h1>. Sekarang bagaimana jika
anda ingin memformat tag <h1> dengan warna / property berbeda?
Misalkan, anda ingin tag <h1> di kolom kiri berwarna biru
sementara tag <h1> di kolom tengah berwarna hitam.
Untuk kasus seperti ini, anda bisa menggunakan Class selector dan ID selector.
Class Selector
Class selector adalah penggabungan beberapa properties yang digunakan lebih dari satu kali.
Cara penulisan Class Selector:
.nama-class {property:value;}
Untuk menempelkan class ke dalam tag HTML:
taghtml.nama-class {Property:value;}
Perhatikan
tanda titik di setiap awal nama Class. Jika anda ingin menggunakan
class selector di luar kode HTML anda menggunakan tag <div class=nama-class> dan di akhiri dengan tag </div>.
Contoh:
Penulisan kode CSS:
.tengah {text-align:center;}
p.tengah {color:red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}
Pemakaian kode CSS
<div class=tengah>
<p>Teks tengah akan berwarna merah.</p>
<h1 > Tag H1 tengah akan berwarna hitam</h1>
</div>
<h1 class=kiri>Tag H1 kiri akan berwarna biru</h1>
Hasil:
Teks tengah akan berwarna merah.Tag H1 tengah akan berwarna hitam
Tag H1 kiri akan berwarna biru
ID Selector
ID
Selector mirip dengan Class selector. Untuk membedakannya, gunakanlah
ID selector untuk memformat bagian yang hanya muncul satu kali dalam
satu halaman web, misalnya untuk memformat bagian menu / sidebar.
Cara penulisan ID Selector:
#nama-ID {property:value;}
Untuk menempelkan ID selector ke dalam tag HTML:
taghtml#nama-ID {Property:value;}
Perhatikan tanda # di setiap awal nama ID. Jika anda ingin menggunakan class selector di luar kode HTML anda menggunakan tag <div id=nama-ID> dan di akhiri dengan tag </div>.
support by : replaceo1
0 comments: