Pada pembahasan tentang Mengenal CSS kita telah mengetahui rumus daripada penulisan CSS. Sesuai yang telah kita bahas, bahwa pada bagian selector, biasanya berupa element-elemnt html misalnya body, h1, p dan lain sebagaianya. Selain element-element html, untuk melakukan format tertentu pada CSS, kita juga bisa menambahkan selector yang disebut "id" dan "class".
Untuk lebih jelasnya, mari kita bahas apa itu "id" dan "class".
Id Selector
--Untuk memformat element tertentu yang bersifat unique(hanya untuk satu elemen tertentu)--Penulisan id selector, pada file CSS di awali dengan tanda pagar "#" dan penamaannya bisa kita sesuaikan dengan kbutuhan.
--Cara penulisan (penerapannya) pada halaman html, akan menjadi atribut yaitu id="nama id" yang dipadukan dengan tag html,contohnya <p id="para1">
Sebagai contoh, misalnya kita akan memberi format khusus pada paragraf pertama disetiap halaman. Mari kita lihat contoh kode di bawah ini :
Dari contoh kode di atas, kita menuliskan CSS nya pada tag head. Disitu di awali penulisan selector id, yang di tandai dengan tanda pagar "#" yaitu #para1. Baru setelah itu diikuti property dan value. Sedangkan penerapanya kita lihat pada tag body, yaitu pada paragraf pertama. Disitu kita padukan dengan tag p. Sehingga pada awal paragraf pertama kita tuliskan <p id="para1">
Maka bisa kita lihat hasilnya adalah sebagai berikut :
Ini adalah paragarf pertama. Dengan selector id, kita format khusus untuk paragraf pertama. Jadinya beda kan?
Sedangkan yang ini adalah paragraf kedua. Paragraf kedua tampil biasa biasa saja. Tidak macam macam
Dan ini adalah paragraf ketiga. Paragraf ketiga juga tampil biasa biasa saja.Ini juga tidak macam macam
Class Selector
--Selector Class bisa kita terapkan untuk mengubah tampilan beberapa element.--Kita bisa melakukan format pada beberapa element html dengan menggunakan selector class yang sama.
--Penemaan pada file CSS diawali dengan tanda titik "." dan diikuti nama sesuai yang kita butuhkan.
--Penerapan pada halaman html adalah sebagai atribut yan dipadukan dengan tag html. Contohnya : <p class="center">.
Mari kita lihat pada contoh kode di bawah ini :
Pada contoh diatas,pada tag head kita tuliskan file CSSnya. Penulisan selector class diawali dengan tanda titik "." dan di ikuti nama yang kita inginkan. Disitu kita lihat .center, yang nantinya akan kita gunakan untuk menampilkan perataan di tengah untuk beberapa element html. Kemudian pada penerapannya bisa kita lihat pada tag body. Disitu kita bisa memformat tag h1 dan p dengan menggunakan selector class yang sama.
Mari kita lihat hasilnya,
Judul dengan Perataan Tengah
Selector class yang sama bisa juga kita terapkan untuk membuat perataan tengah pada paragraf ini.
Paragraf ini tampil biasa aja.
Demikian pembahasan kita pada kesempatan kali ini. Mudah-mudahan bermanfaat.
Tidak ada komentar:
Posting Komentar
Harap berkomentar dengan kata kata yang baik dan sopan ya..:)