Class and ID Selector.

Presentasi berjudul: "Class and ID Selector."— Transcript presentasi:

1 Class and ID Selector

2 Class Selector .tengah {text-align:center;} p.tengah {color:#ff0000;}
Contoh penulisan syntax CSS: .tengah {text-align:center;} p.tengah {color:#ff0000;} h1.kiri {color:#0000ff;} h1.tengah {color:#000000;} Contoh pemakaian kode CSS: <div class=tengah> <p>Teks tengah akan berwarna merah.</p> <h1 class=tengah>Tag H1 tengah akan berwarna hitam</h1> </div> <h1 class=kiri>Tag H1 kiri akan berwarna biru</h1>

3 Class Selector (Lanjutan)
Hasil Teks tengah akan berwarna merah. Tag H1 tengah akan berwarna hitam Tag H1 kiri akan berwarna biru

4 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 ingin menggunakan class ID selector di luar kode HTML, gunakan tag <div id=nama-ID> dan di akhiri dengan tag </div>.

5 ID Selector #tengah {text-align:center;} p.tengah {color:#ff0000;}
Contoh penulisan syntax CSS: #tengah {text-align:center;} p.tengah {color:#ff0000;} h1.kiri {color:#0000ff;} h1.tengah {color:#000000;} Contoh pemakaian kode CSS: <span id=tengah> <p>Teks tengah akan berwarna merah.</p> <h1 class=tengah>Tag H1 tengah akan berwarna hitam</h1> </span> <h1 class=kiri>Tag H1 kiri akan berwarna biru</h1>

6 Latihan……………………………………?