Tutorial Cascading Style Sheet (CSS) - Nesting

Bila dokumen HTML yang dibuat memiliki struktur yang baik, maka tidak perlu repot-repot membuat banyak class dan id, karena kita bisa mendefinisikan CSS dengan cara penulisan selector dalam selector. Untuk menuliskan selector dalam selector cukup dipisahkan dengan menggunakan spasi. Berikut cara penulisannya seperti pada gambar berikut :


<style>
/* mengatur warna background */
#top {background-color:#ccc; 
      padding : 1 em;}

/* mengatur warna pada heading h1 dan paragraf p */
#top h1 {color:#ff0;}
#top p {color:red;font-weight:bold;}
</style>

Kemudian penerapan nesting tersebut dituliskan di dalam elemen <div>...</div>

pada dokumen HTML adalah seperti berikut :


<html>
<head>
<title>Belajar</title>

<style>
/* mengatur warna background */
#top {background-color:#ccc; 
      padding : 1 em;}

/* mengatur warna pada heading h1 dan paragraf p */
#top h1 {color:#ff0;}
#top p {color:red;font-weight:bold;}
</style>

</head>
<body>
  <div id="top"> 
    <h1>Coding Pertamaku</h1>
    <p>Percayalah kalo kita belajar pasti akan menemukan kesulitan. dan kesulitan itulah <br> 
       bumbu-bumbu dapur yang akan bisa membuat kita berhasil jika kita mampu melewati kesulitan <br>
       yang ada baik rintangan, ancaman, hambatan dan gangguan <b>(HTAG)</b>dari luar diri kita.<p>
  </div> 
</body>
</html>

Simpanlah script tersebut diatas dengan nama nesting.html, dan setelah itu coba di panggil pada browser sehingga tampilannya adalah seperti gambar berikut :

Selanjutnya bagaimana jika <h1> dan <p> diletakkan diluar <div> seperti contoh code berikut :


<html>
<head>
<title>Belajar</title>

<style>
/* mengatur warna background */
#top {background-color:#ccc; 
      padding : 1 em;}

/* mengatur warna pada heading h1 dan paragraf p */
#top h1 {color:#ff0;}
#top p {color:red;font-weight:bold;}
</style>

</head>
<body>
  <div id="top">  /* awal div id="top" */
    <h1>Coding Pertamaku</h1>
    <p>Percayalah kalo kita belajar pasti akan menemukan kesulitan. dan kesulitan itulah <br> 
       bumbu-bumbu dapur yang akan bisa membuat kita berhasil jika kita mampu melewati kesulitan <br>
       yang ada baik rintangan, ancaman, hambatan dan gangguan <b>(HTAG)</b>dari luar diri kita.<p>
  </div>         /* akhir div id="top" */

    <h1>Coding Keduaku</h1>
    <p>Percayalah kalo kita belajar pasti akan menemukan kesulitan. dan kesulitan itulah <br> 
       bumbu-bumbu dapur yang akan bisa membuat kita berhasil jika kita mampu melewati kesulitan <br>
       yang ada baik rintangan, ancaman, hambatan dan gangguan <b>(HTAG)</b>dari luar diri kita.<p>
</body>
</html>

Maka akan dihasilkan seperti yang tampil pada gambar dibawah ini :

Demikianlah contoh penggunaan nesting dalam CSS, semoga tutorial ini bisa menambah wawasan atau menambah pemahaman bagi yang sedang belajar membuat website.
Nantikan tutorial tentang CSS selanjutnya, dan bagi teman-teman yang ingin selalu mendapatkan update via email, silahkan daftarkan email pada subscribed yang sudah kami sediakan, serta jika masih ada yang didiskusikan silahkan isi pada bagian komentar. Thanks.

Lautan Pasir

Tutorial Cascading Style Sheet (CSS) - Nesting