usahawan-maju | Tutorial Belajar CSS Tingkat Lanjut - 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:
<head>
<style type="text/css">
b { color : green }
</style>
</head>
<body>
<b> <font size="+1"> Ini Pewarisan dari tag b </font></b>
</body>
Tag <b> mendefinisikan warna dan menebalkan huruf dengan aturan CSS, sedangkan tag <font> yang notabene berada didalam lingkup CSS dapat menerapkan aturan HTML dasar tetapi tetap terpengaruh dengan kondisi warna dan tebalnya huruf.
<head>
<style type="text/css">
b { color : green }
</style>
</head>
<body>
<b> <font size="+1"> Ini Pewarisan dari tag b </font></b>
</body>
Tag <b> mendefinisikan warna dan menebalkan huruf dengan aturan CSS, sedangkan tag <font> 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:
<head>
<style type="text/css">
.merah {color:red; font-family:Comic Sans MS;}
p.biru {color:blue;}
</style>
</head>
<body>
<p class="merah"> ini menggunakan class merah </p>
<div class="merah"> ini menggunakan class merah </div>
<p class="biru"> Ini P menggunakan klas biru </p>
<div class="biru"> Ini div tidak bisa menggunakan klas biru karena class biru itu khusus P</div>
</body>
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:
<head>
<style type="text/css">
.merah {color:red; font-family:Comic Sans MS;}
p.biru {color:blue;}
</style>
</head>
<body>
<p class="merah"> ini menggunakan class merah </p>
<div class="merah"> ini menggunakan class merah </div>
<p class="biru"> Ini P menggunakan klas biru </p>
<div class="biru"> Ini div tidak bisa menggunakan klas biru karena class biru itu khusus P</div>
</body>
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 “#”.
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:
<head>
<style type="text/css">
#merah {color: red; font-family:verdana;}
</style>
</head>
<body>
<h1 id="merah">Ini pemanggilan ID merah</h1>
</body>
<head>
<style type="text/css">
#merah {color: red; font-family:verdana;}
</style>
</head>
<body>
<h1 id="merah">Ini pemanggilan ID merah</h1>
</body>
