Seperti janji saya kemarin kita akan membahas tentang Lanjutan dari Pengertian Apa itu Inheritance Style CSS, Jika teman-teman baru saja bergabung, teman-teman bisa lihat dulu artikel saya sebelumnya ya teman-teman. Inheritance adalah turunan ya teman-teman, oke di artikel kali ini saya langsung akan melihat contoh lain, dari sebuah inheritance, oke jangan kemana-mana simak terus ya teman-teman.
Langsun saja untuk Lanjutan dari Pengertian Apa itu Inheritance Style CSS, Sebagai contoh lain, dapatkah anda menebak warna dari tag <strong> ini?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><strong>Lanjutan dari Pengertian Apa itu Inheritance Style CSS</strong></title>
<style>
strong {
color: red;
}
div {
color: magenta;
}
body{
color: green;
}
</style>
</head>
<body>
<h2>Belajar CSS</h2>
<p>CSS adalah dunianya web design.
Jika anda ingin mempelajari cara mendesain web,
CSS mutlak harus dikuasai.</p>
<div>
<p>CSS merupakan singkatan dari <strong>Cascading Style Sheet</strong>.
CSS digunakan untuk mengubah tampilan (style) dari halaman web.</p>
</div>
</body>
</body>
</html>
Terlihat, isi dari tag <strong> yakni teks “Cascading Style Sheet” akan berwarna merah. Tapi tunggu dulu, bukankah style paling akhir yang menang (last rules apply)?
Efek cascading yang kita pelajari sebelumnya hanya akan terjadi untuk selector yang sama. Pada contoh diatas, saya menggunakan selector yang berbeda, sehingga yang terjadi adalah inheritance, bukan cascading. Memahami kedua perbedaan ini sangat penting agar anda bisa yakin kenapa sebuah style tidak berefek apa-apa, atau kenapa sebuah element malah ‘terkena’ style dari selector lain.
Ketika kita menggunakan selector yang berbeda dan property yang berbeda, efek inheritance akan menggabungkan property yang ada. Seperti contoh berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><strong>Lanjutan dari Pengertian Apa itu Inheritance Style CSS</strong></title>
<style>
body{
color: green;
}
div{
font-size: 25px;
}
p {
background-color: silver;
}
</style>
</head>
<body>
<h2>Belajar CSS</h2>
<p>CSS adalah dunianya web design.
Jika anda ingin mempelajari cara mendesain web,
CSS mutlak harus dikuasai.</p>
<div>
<p>CSS merupakan singkatan dari <strong>Cascading Style Sheet</strong>.
CSS digunakan untuk mengubah tampilan (style) dari halaman web.</p>
</div>
</body>
</body>
</html>
Dari tampilan diatas, tag <p> yang berada di dalam tag <div> akan berwarna hijau, berukuran 25 pixel, dan memiliki warna background silver. Dari manakah seluruh style ini berasal?
Seluruh style pada tag <p> berasal dari akumulasi style parent element-nya, yakni tag <body>, tag <div>, dan style dari element <p> itu sendiri. Inilah hasil dari efek inheritance. Sebagai tambahan, perhatikan style pada tag <strong>. Selain memiliki warna dan ukuran yang sama dengan tag <p>, tag <strong> juga tampil dengan huruf tebal. Style ini berasal dari web browser style, dimana efeknya ikut bergabung dengan style yang digunakan.
Oke dan sepertinya sudah cukup panjang ya kita membahas tentang Lanjutan dari Pengertian Apa itu Inheritance Style CSS, semoga bermanfaat, terimakasih.
The post Lanjutan dari Pengertian Apa itu Inheritance Style CSS appeared first on Kursus Website Terbaik.