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
adalah penggabungan beberapa properties yang digunakan lebih dari satu kali.Cara penulisan Class Selector:
adalah penggabungan beberapa properties yang digunakan lebih dari satu kali.Cara penulisan Class Selector:
.nama-class { p ro pe rt y: va l u e; }
/*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 :
.tengah{text-align:center;} p.tengah {color:red;} h 1 .kiri {color:blue;} h1.tengah {color:black; }
/*Pemakaian kode CSS*/
Teks tengah akan berwarna merah.
Tag H1 tengah akan berwarna hitam
< / d i v >
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 { p ro pe r t y: va l u e; }
/*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>.
Tidak ada komentar:
Posting Komentar