CSS Tingkat Lanjutan
CSS telah memperkenalkan dirinya sebagai disainer Web. Css juga menggunakan istilah inheritance atau pewarisan. Inheritance pada CSS bisa digunakan untuk membuat penulisan kode CSS menjadi lebih ringkas dan mengurangi pengulangan penulisan.
Inheritance
Berdasarkan
artinya, inheritance atau pewarisan adalah sifat pengaturan properti yang
dimana ia diterapkan pada sebuah tag, maka tag-tag lain yang berada diantara
tag (atau dalam hirarki) tersebut akan memiliki sifat yang sama pula. Pada
dasarnya dalam pewarisan, properti turunan memiliki spesifikasi yang lebih
tinggi ketimbang properti yang dituruni (moyang / ancestor).
Contoh:
b { color : green }
Ini Pewarisan dari tag b
Tag mendefinisikan warna dan
menebalkan huruf dengan aturan CSS,
sedangkan
tag yang notabene berada
didalam lingkup CSS dapat menerapkan aturan HTML dasar tetapi
tetap terpengaruh dengan kondisi warna dan tebalnya huruf.
Class
Selector Class digunakan untuk menentukan style dari sebuah group elemen.
Berbeda dengan ID, selector class bisa dipakai berulangkali pada sebuah dokumen
web. Artinya sebuah nama class dapat dipanggil beberapa kali pada elemen-elemen
yang ada pada sebuah halaman web. Selector class dituliskan dengan
ditandai dengan tanda titik “.” .
Contoh:
.merah {color:red; font-family:Comic Sans MS;}
p.biru {color:blue;}
ini menggunakan class merah
ini menggunakan class merah
Ini P menggunakan klas biru
Ini div tidak bisa menggunakan klas biru
karena class biru itu khusus P
ID
Selain mengijinkan untuk menyatukan elemen-elemen secara bersamaan didalam
sebuah kelas, CSS juga mengijinkan untuk pendefinisian nama ID dan penerapan
aturan style sheet kedalam ID. Selector ID digunakan untuk menentukan style
bagian unik dari html, maksudnya CSS Id sering digunakan untuk elemen-elemen
dalam halaman web yang muncul hanya satu kali saja seperti: header, sidebar,
footer atau body. Pada umumnya selector ID digunakan untuk memformat layout
web. Selector ID pada syntax CSS ditandai dengan “#”.
Contoh:
#merah {color: red; font-family:verdana;}


0 Komentar