Berbicara mengenai css tak lepas dari yang namanya tampilan. Sebelum kita mengaplikasi kode - kode css terhadap blog atau web yang kita gunakan tentunya harus memahami dahulu konsep dasar penggunaan selector. Pada kesempatan kali ini saya akan berbagi sedikit mengenai tata cara penggunaan 2 buah selector yang di dalam CSS yakni ID dan Class selector.
Mungkin bagi yang sudah mahir tidak usah memikirkannya lagi akan hal ini. Tapi tak ada salahnya jika saya share di tempat ini. Dalam penggunaannya barangkali ada diantara kita yang mememui kesulitan atau kendala dalam membedakan kapan menggunakan kedua selector tersebut, maka dari itu mari kita sama - sama belajar. Dimulai dari :
ID Selector diawali dengan simbol # (pagar) dan pemanggilan di HTML menggunakan format id sedangkan,
Class Selector diawali dengan simbol . (titik) dan pemanggilan di HTML menggunakan format class.
Mungkin bagi yang sudah mahir tidak usah memikirkannya lagi akan hal ini. Tapi tak ada salahnya jika saya share di tempat ini. Dalam penggunaannya barangkali ada diantara kita yang mememui kesulitan atau kendala dalam membedakan kapan menggunakan kedua selector tersebut, maka dari itu mari kita sama - sama belajar. Dimulai dari :
1. Format Penulisan dan Cara Pemanggilan.
ID Selector diawali dengan simbol # (pagar) dan pemanggilan di HTML menggunakan format id sedangkan,
Class Selector diawali dengan simbol . (titik) dan pemanggilan di HTML menggunakan format class.
Contoh :
- ID Selector
Kode CSS :
#cobaID{
color: #fff;
}
Pemanggilan Fungsi :
<div id="cobaID">
ISI TEKS ANDA
</div>
- Class Selector.
Kode CSS :
.cobaClass{Pemanggilan Fungsi :
color: #fff;
}
<div class="cobaClass">
ISI TEKS ANDA
</div>
2. Format atau setting Property dan Hasil Tampilannya.
Untuk Selector ID dan Class, format penulisan property sama yakni diawali dengan yang terdapat di dalam tanda {....} rumusnya {namaproperty:value;} contoh hasil tampilannya langsung dilihat pada output nomor 3 berikut.
3. Banyaknya Pemanggilan dalam Tag HTML.
- ID Selector pemanggilan hanya bisa digunakan satu kali saja untuk satu Tag HTML. Dikarenakan bersifat unik.
- Class Selector pemanggilan bisa digunakan lebih dari satu kali di dalam Tag HTML nya. Keuntungan menggunakan Class selector ini adalah kita tidak perlu membuat banyak properti Style yang sama berulang-ulang dalam CSS
- ID Selector
#cobaID{Pemanggilan Fungsi :
color: #fff;
font-weight: bold;
text-align: center;
width: 25%;
height: 50%;
background-color: #ffa500;
padding: 10px;
}
<div id="cobaID">Output :
ISI TEKS ANDA
</div>
ISI TEKS ANDA
- Class Selector
.cobaClass{Pemanggilan Fungsi :
color: #fff;
font-weight: bold;
text-align: center;
width: 25%;
height: 50%;
background-color: #ffa500;
padding: 10px;
}
.cobaClass2{
border: 2px solid #ffffff;
}
<div class="cobaClass cobaClass2">Output :
ISI TEKS ANDA
</div>
ISI TEKS ANDA
Sekian sedikit ilmu yang bisa saya share. Semoga apa yang saya share pada kesempatan kali ini dapat memberi manfaat bagi rekan semua. Sehingga kita tidak kesulitan kembali untuk menggunakan kode - kode css tersebut dalam memperindah tampilan blog atau web kita :)
