Class and ID Selector Class Selector Contoh penulisan
- Slides: 6
Class and ID Selector
Class Selector Contoh penulisan syntax CSS: . tengah {text-align: center; } p. tengah {color: #ff 0000; } h 1. kiri {color: #0000 ff; } h 1. tengah {color: #000000; } Contoh pemakaian kode CSS: <div class=tengah> <p>Teks tengah akan berwarna merah. </p> <h 1 class=tengah>Tag H 1 tengah akan berwarna hitam</h 1> </div> <h 1 class=kiri>Tag H 1 kiri akan berwarna biru</h 1>
Class Selector (Lanjutan) • Hasil Teks tengah akan berwarna merah. Tag H 1 tengah akan berwarna hitam Tag H 1 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 ingin menggunakan class ID selector di luar kode HTML, gunakan tag <div id=nama-ID> dan di akhiri dengan tag </div>.
ID Selector Contoh penulisan syntax CSS: #tengah {text-align: center; } p. tengah {color: #ff 0000; } h 1. kiri {color: #0000 ff; } h 1. tengah {color: #000000; } Contoh pemakaian kode CSS: <span id=tengah> <p>Teks tengah akan berwarna merah. </p> <h 1 class=tengah>Tag H 1 tengah akan berwarna hitam</h 1> </span> <h 1 class=kiri>Tag H 1 kiri akan berwarna biru</h 1>
