grouping atau pengelompokan adalah salah satu teknik penulisan dalam css, selain fungsi utamanya merubah maupun mendesign website. css ini juga dilengkapi berbagai macam teknik penulisan, kali ini kita akan share tentang grouping atau pengelompokan. dengan teknik grouping ini kita bisa mempersingkat sepersekian detik waktu ketika nulis css. fungsi grouping adalah mengelompokan beberapa selector maupun tag html yang berstyle sama(property dan valuenya) dimana setiap selector dipisahkan dengan , (koma)
aturan pelulisan gouping
selector_atau_tag_html, selector_atau_tag_html, selector_atau_tag_html{property:value;}
keterangan
- setiap slector dipisahkan dengan koma dimana selector atau tag akhir sudah tidak memakai koma
contoh penulisan css dengan teknik grouping
pada contoh dibawah, kita akan membuat 2 style. style pertama tidak menggunakan teknik grouping sedangkan style kedua menggunakan teknik grouping
contoh style pertama
perhatikan code/markup dibawah
<html>
<head>
<title>css tanpa grouping</title>
<meta content="indam url:http://www.indaam.com" name="author"/>
<style type="text/css">
h1{font-family:verdana;color:red;}
h2{font-family:verdana;color:red;}
h3{font-family:verdana;color:red;}
h4{font-family:verdana;color:red;}
h5{font-family:verdana;color:red;}
h6{font-family:verdana;color:red;}
p{font-family:verdana;color:red;}
#kanan{
float:left;
background-color:red;
outline:black double 6px;
width:300px;
height:250px;
margin:5px;
}
#tengah{
float:left;
background-color:red;
outline:black double 6px;
width:300px;
height:250px;
margin:5px;
}
#kiri{
float:left;
background-color:red;
outline:black double 6px;
width:300px;
height:250px;
margin:5px;
}
</style>
</head>
<body>
<h1>judul 1</h1>
<h2>judul 2</h2>
<h3>judul 3</h3>
<h4>judul 4</h4>
<h5>judul 5</h5>
<h6>judul 6</h6>
<p> paragraf</p>
<div id="kiri"></div>
<div id="kanan"></div>
<div id="tengah"></div>
<div style="clear:both;/**/"></div>
<p>salam <a href="http://www.indaam.com" title="indam site" target="_blank">indaam site</a></p>
</body>
</html>
untuk melihat hasilnya
- copy markup style diatas
- paste ke notepad
- save as (pilih all types) dengan nama contohcss.htm
- jalankan(double click), atau
- open with (firefox, ie, opera, safari, chrome)
- silakan edit valuenya
- letak valuenya antara : (titik dua) dan ;(titik koma)
contoh style kedua, css dengan teknik grouping
setelah sobat melihat markup kode dibawah, niscaya sobat akan paham perbedaanya
<html>
<head>
<title>css ditulis dengan teknik grouping</title>
<meta content="indam url:http://www.indaam.com" name="author"/>
<style type="text/css">
h1,h2,h3,h4,h5,h6,p{font-family:verdana;color:red;}
#kanan, #tengah, #kiri{
float:left;
background-color:red;
outline:black double 6px;
width:300px;
height:250px;
margin:5px;
}
</style>
</head>
<body>
<h1>judul 1</h1>
<h2>judul 2</h2>
<h3>judul 3</h3>
<h4>judul 4</h4>
<h5>judul 5</h5>
<h6>judul 6</h6>
<p> paragraf</p>
<div id="kiri"></div>
<div id="kanan"></div>
<div id="tengah"></div>
<div style="clear:both;/**/"></div>
<p>salam <a href="http://www.indaam.com" title="indam site" target="_blank">indaam site</a></p>
</body>
</html>
untuk melihat hasilnya
- copy markup style diatas
- paste ke notepad
- save as (pilih all types) dengan nama contohcssditulisdengangrouping.htm
- jalankan(double click), atau
- open with (firefox, ie, opera, safari, chrome)
- silakan edit valuenya
- letak valuenya antara : (titik dua) dan ;(titik koma)
- selamat belajar
keterangan untuk kedua contoh
- coba jalankan kedua contoh diatas
- lihat hasilnya(pasti sama)
- lihat codenya(pasti berbeda)
- pada contoh nomor dua, terlihat kodenya lebih ramping, jadi kita ngga perlu cape-cape nulis kodenya.
- silakan pamami teknik grouping ini
selamat belajar 
References
http://www.w3.org/Style/CSS
Sorry, formulir komentar sedang dalam perbaikan