CSS 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

Kebesaran seseorang tidak terlihat ketika ia berdiri dan memberi perintah, tetapi ketika ia berdiri sama tinggi dengan orang lain dan membantu orang lain untuk mengeluarkan yang terbaik dari diri mereka guna mencapai sukses. G. Arthur Keough

dengan teknik grouping ini kita bisa mempersingkat sepersekian detik waktu ketika nulis css. fungsi grouping adalah mengelompokan beberapa selector maupun tag html yang

Last Modif at July 8th, 2011

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.net" 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.net" 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.net" 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.net" 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

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-