PERULANGAN CSS

Berbicara tentang perulangan. Terkadang kita membuat 2 class (id) atau lebih yang memiliki bentuk yang sama. Dalam hal ini kita membuat 2 class (kotak1 dan kotak2) memiliki style yang sama. Daripada menulis 2 style yang sama, akan lebih baik menulis 1 kali.

.kotak1, .kotak2 {

border:1px solid blue;

}

contoh:

<style>

.kotak1, .kotak2 {

border:1px solid green;

width:100px;

margin:10px 0;

min-height:10px;

}

</style>

<div class=”kotak1”>kotak 1</div>

<div class=’kotak2’>kotak 2</div>

Apabila diperhatikan pada contoh sebelumnya, dimana kotak1 dan kotak2 di apit oleh kutip berbeda. Sebenarnya hal tersebut tidak begitu memiliki pengaruh, namun akan lebih baik untuk kerapian memakai kutip2 (“) dibandingkan kutip 1. Membahas tentang perulangan, kita dapat melihat metode di atas cocok apabila 2 kotak memiliki beberapa style yang sama tetapi ada style yang berbeda. seperti :

.kotak3, kotak4 {

width:100px;

margin:10px 0;

min-height:10px;

border:1px solid black;

}

.kotak3 {

background:lightblue;

}

Metode ini disebut sebagai Group

contoh:

<style>

.kotak3, kotak4 {

width:100px;

margin:10px 0;

min-height:10px;

border:1px solid black;

}

.kotak3 {

background:lightblue;

}

</style>

<div class='kotak3'>kotak 3</div>

<div class='kotak4'>kotak 4</div>