Pengenalan Class
Class dalam css digunakan jika kita ingin memberikan lebih dari satu jenis style pada suatu tag html. Dalam hal ini, terdapat 3 jenis class yang bisa digunakan yaitu :
class, adanya selector yang diikuti dengan tanda titik (.) dan nama class-nya, lalu pendefinisian property dsan value nya.
format :
001
|
selector.nama_class {property:value}
|
Untuk nama_class kita dibebaskan untuk menentukannya sendiri.
Generic class, tidak terdapat selector dan langsung diawali dengan tanda titik (.) dan nama class nya.
format :
001
|
.nama_class {property:value}
|
Sama halnya dengan tipe pertama, kita dibebaskan untuk menentukan nama kelasnya. Nah dari dua jenis class di atas, apakah sobat dapat menangkap perbedaan fungsi dalam penggunaanya? Supaya lebih jelas, kita buat contoh terlebih dahulu.
001
|
<html>
|
002
|
<head>
|
003
|
<title>Perbedaan jenis class</title>
| |
004
|
<style>
| |
005
|
p.merah {color:red}
| |
006
| ||
007
|
.warnabiru {color:blue}
| |
008
|
</style>
| |
009
|
</head>
| |
010
| ||
011
|
<body>
| |
012
| ||
013
|
<p class="merah">
| |
014
|
Warna tulisan dalam paragraf ini akan mengikuti aturan style class yang telah ditentukan di atas, yaitu merah.
| |
015
|
</p>
| |
016
| ||
017
|
<p class="warnabiru">
| |
018
|
Warna tulisan dalam paragraf ini akan mengikuti aturan style class yang telah ditentukan di atas, yaitu biru.
| |
019
|
</p>
| |
020
| ||
021
|
<h3 class="warnabiru">
| |
022
|
Warna tulisan heading ini akan berwana biru.
| |
023
|
</h3>
| |
024
| ||
025
|
</body>
| |
026
| ||
027
|
</html>
|
Jika sobat jeli, tipe pertama style class nya hanya bisa digunakan untuk tag paragraf (p) saja, sedangkan tipe kedua–generic class– bisa digunakan untuk setiap tag html oleh karena itu class ‘.warnabiru‘ bisa digunakan dalam tag paragraf (p) dan tag heading (h3). Dapat dipahami?
Pseudo class, merupakan style built in yang telah ada pada aturan css dan didukung oleh beberapa browser. Nama class dari tipe ini sudah ditentukan jadi kita tidak bisa merubah-rubah nama class nya secara sembarangan.
format :
001
|
selector:nama_c lass {property:value}
|
contohnya adalah style untuk link,
001
|
a:link{color:blue}
| |
002
|
a:visited{color:purple}
| |
003
|
a:hover(color:red}
|
Selector ID
Selector ID mirip dengan class, kita menggunakannya untuk membuat style pada setiap tag html. Untuk membuat id, kita memakai tanda pagar (#) sebelum nama id-nya, berbeda dengan class yang memakai tanda titik (.) sebelum nama class-nya
format :
001
|
#nama_id {property:value}
|
Secara teori ID hanya bisa digunakan sekali saja dalam tag html, artinya jika suatu ID sudah dipakai dalam tag <div> (misal) maka pemakaian ID yang sama dalam tag html yang berikutnya akan diabaikan. Namun pada kenyataannya ID bisa digunakan berulang-ulang dalam tag html yang berbeda maupun yang sama, mirip dengan class generic.
Saya rasa cukup sampai di sini. Saya sengaja tidak akan membuat contoh untuk bahasan ID ini, karena untuk latihan dan untuk mengukur pemahaman sobat semua, maka saya serahkan pembuatan contoh style memakai ID kepada sobat semua… Ayo buat aplikasinya sendiri-sendiri, terserah sobat saja
1 komentar:
wah dewa..
di intip dong or di comment
http://dedebrahma.blogspot.com/
Posting Komentar
PLEASE YOUR COOL COMMENT... :))