Tutorial CSS Part 3: Mengatur Background

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT5_fs6QMVTPpUUeuP-nG8HNDqmNnzSGvTKtlddS2Ji69sUXJhdm1prES6RhyphenhyphenvYUw7XIqQASMPnCHpTpp94a4XcC1M1Lg6CWb9OS2cU1fqYcMt3OoeMd3l0bjNWbNeMqkoT8Rf99_KxlE/s1600/css-background.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT5_fs6QMVTPpUUeuP-nG8HNDqmNnzSGvTKtlddS2Ji69sUXJhdm1prES6RhyphenhyphenvYUw7XIqQASMPnCHpTpp94a4XcC1M1Lg6CWb9OS2cU1fqYcMt3OoeMd3l0bjNWbNeMqkoT8Rf99_KxlE/s1600/css-background.png" /></a></div> <span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Background adalah latar belakang elemen pada halaman html. Background bisa diterapkan pada body (keseluruhan halaman) atau bisa diterapkan untuk elemen yang lebih kecil seperti paragraf atau bahkan untuk satu teks atau satu huruf saja. Background bisa berupa warna tunggal atau berupa gambar (image).</span><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Ada enam properti yang bisa digunakan untuk mengatur background, yaitu :</span><br /> <ol style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; list-style-image: initial; list-style-position: outside; margin: 0px 0px 1.2em 20px; padding: 0px; text-align: justify; vertical-align: baseline;"> <li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;">background-color,</li> <li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;">background-image</li> <li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;">background-repeat</li> <li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;">background-position</li> <li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;">background-attachment</li> <li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;">background (penggabungan beberapa properti dalam satu deklarasi)</li> </ol> <span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Dan berikut ini penjelasan masing-masing properti tersebut. </span><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><h3 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 18px; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;"> 1. background-color</h3> <span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Adalah properti CSS yang digunakan untuk mengatur warna background. </span><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Ada tiga cara dalam menentukan nilai warna, yaitu : </span><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><ul style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; list-style: square outside; margin: 0px 0px 1.2em 20px; padding: 0px; text-align: justify; vertical-align: baseline;"> <li style="box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 5px 0px; padding: 0px; vertical-align: baseline;">menggunakan nama warna seperti red, blue, green dan sebagainya</li> <li style="box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 5px 0px; padding: 0px; vertical-align: baseline;">menggunakan kode heksa warna seperti #ff0000 untuk warna merah dan #0000ff untuk warna biru, dan seterusnya.</li> <li style="box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 5px 0px; padding: 0px; vertical-align: baseline;">menggunakan nilai RGB seperti rgb(255,0,0) untuk warna merah, rgb(0,0,255) untuk warna biru dan seterusnya.</li> </ul> <h4 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;"> Contoh penggunaan CSS background-color :</h4> <div style="background-color: white; border: solid gray; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; overflow: auto; padding: 0.2em 0.6em; text-align: justify; vertical-align: baseline; width: auto;"> <pre style="box-sizing: border-box; color: inherit; font-family: 'Courier New', Courier, monospace; line-height: 18px; overflow: auto; padding: 0px; word-wrap: normal;">body { background-color: #e0ffff; } </pre> </div> <br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><i style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"><a href="http://www.w3schools.com/css/tryit.asp?filename=trycss_background-color_elements" style="-webkit-transition: all 0.2s ease-in; box-sizing: border-box; color: #859ce6; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">Kita bisa berlatih CSS <b style="box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">background-color</b> disini >></a>. </i><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><h3 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 18px; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;"> 2. background-image</h3> <span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Adalah properti CSS yang digunakan untuk mengatur background berupa gambar (image). File gambar yang akan diterapkan pada background ditulis pada atribut URL. Secara default, gambar akan ditampilkan secara berulang secara horisontal dan vertikal untuk memenuhi area elemen yang ditetapkan.</span><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><h4 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;"> Contoh penggunaan CSS background-image :</h4> <div style="background-color: white; border: solid gray; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; overflow: auto; padding: 0.2em 0.6em; text-align: justify; vertical-align: baseline; width: auto;"> <pre style="box-sizing: border-box; color: inherit; font-family: 'Courier New', Courier, monospace; line-height: 18px; overflow: auto; padding: 0px; word-wrap: normal;">body { background-image: url("bg.gif"); } </pre> </div> <br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><i style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"><a href="http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image" style="-webkit-transition: all 0.2s ease-in; box-sizing: border-box; color: #859ce6; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">Kita bisa berlatih CSS background-image disini >></a></i><span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">. </span><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><h3 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 18px; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;"> 3. background-repeat</h3> <span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Adalah properti CSS yang digunakan untuk mengatur perulangan background-image. Secara default, background-image akan diulang secara vertikal dan horizontal.</span><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Dengan CSS background-repeat ini kita bisa mengatur perulangan dengan beberapa nilai sebagai berikut :</span><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><ul style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; list-style: square outside; margin: 0px 0px 1.2em 20px; padding: 0px; text-align: justify; vertical-align: baseline;"> <li style="box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 5px 0px; padding: 0px; vertical-align: baseline;">no-repeat, artinya background image tidak akan di ulang.</li> <li style="box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 5px 0px; padding: 0px; vertical-align: baseline;">repeat-x, artinya background image akan diulang secara horizontal</li> <li style="box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 5px 0px; padding: 0px; vertical-align: baseline;">repeat-y, artinya background image akan diulang secara vertikal.</li> </ul> <h4 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;"> Contoh penggunaan CSS background repeat :</h4> <div style="background-color: white; border: solid gray; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; overflow: auto; padding: 0.2em 0.6em; text-align: justify; vertical-align: baseline; width: auto;"> <pre style="box-sizing: border-box; color: inherit; font-family: 'Courier New', Courier, monospace; line-height: 18px; overflow: auto; padding: 0px; word-wrap: normal;">body { background-image: url("bg.gif"); background-repeat: repeat-x; } </pre> </div> <br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><i style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"><a href="http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image_gradient2" style="-webkit-transition: all 0.2s ease-in; box-sizing: border-box; color: #859ce6; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">Kita bisa berlatih CSS background-repeat disini >></a></i><span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">. </span><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><h3 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 18px; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;"> 4. background-position</h3> <span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Adalah properti CSS yang digunakan untuk mengatur posisi background image pada elemen html. posisi background image bisa diset left, right, top dan bottom. Salah satu fungsi dari penempatan background image agar tidak mengganggu tampilan teks pada halaman html.</span><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><h4 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;"> Contoh penggunaan CSS background-position :</h4> <div style="background-color: white; border: solid gray; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; overflow: auto; padding: 0.2em 0.6em; text-align: justify; vertical-align: baseline; width: auto;"> <pre style="box-sizing: border-box; color: inherit; font-family: 'Courier New', Courier, monospace; line-height: 18px; overflow: auto; padding: 0px; word-wrap: normal;">body { background-image: url("bg.gif"); background-repeat: repeat-x; background-position : right top; } </pre> </div> <br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><i style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"><a href="http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image_position" style="-webkit-transition: all 0.2s ease-in; box-sizing: border-box; color: #859ce6; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">Kita bisa berlatih CSS background-position disini >></a></i><span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">.</span><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><h3 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 18px; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;"> 5. background-attachment</h3> <span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Adalah properti CSS yang digunakan untuk mengatur bagaimana background itu disematkan dalam halaman. Apakah fix atau ikut scroll bersama elemen. Secara default properti background-attachment akan diset scroll.</span><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Ada beberapa nilai yang bisa dipakai untuk backdround-attachment :</span><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><ul style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; list-style: square outside; margin: 0px 0px 1.2em 20px; padding: 0px; text-align: justify; vertical-align: baseline;"> <li style="box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 5px 0px; padding: 0px; vertical-align: baseline;">scroll<span class="Apple-tab-span" style="box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: pre;"> </span>, background ikut discroll bersama dengan elemen.</li> <li style="box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 5px 0px; padding: 0px; vertical-align: baseline;">fixed<span style="box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: pre;">, background fix jadi saat elemen di scroll, posisi background tetap.</span></li> <li style="box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 5px 0px; padding: 0px; vertical-align: baseline;">local,<span class="Apple-tab-span" style="box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: pre;"> </span><span class="Apple-tab-span" style="box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: pre;"> </span>background ikut discroll bersama dengan isi dari elemen</li> <li style="box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 5px 0px; padding: 0px; vertical-align: baseline;">initial, nilai diset sesuai nilai inisial dari elemen diatasnya.</li> <li style="box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 5px 0px; padding: 0px; vertical-align: baseline;">inherit, nilai diwarisi dari elemen diatasnya.</li> </ul> <h4 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;"> Contoh penggunaan CSS background-attachment :</h4> <div style="background-color: white; border: solid gray; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; overflow: auto; padding: 0.2em 0.6em; text-align: justify; vertical-align: baseline; width: auto;"> <pre style="box-sizing: border-box; color: inherit; font-family: 'Courier New', Courier, monospace; line-height: 16.25px; overflow: auto; padding: 0px; word-wrap: normal;">body { background-image: url("bg.gif"); background-repeat: repeat-x; background-position : right top; background-attachment: fixed; } </pre> </div> <br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><i style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"><a href="http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-attachment" style="-webkit-transition: all 0.2s ease-in; box-sizing: border-box; color: #859ce6; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">Kita bisa berlatih CSS background-attachment disini >></a></i><span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">.</span><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><h3 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 18px; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;"> 6. background</h3> <span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Adalah properti yang bisa diisi dengan nilai dari kelima properti diatas. Jadi properti background bisa dikatakan sebagai penggabungan dari kelima properti background sebelumnya. Cara ini dipakai untuk mempersingkat penulisan.</span><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><h4 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;"> Contoh penggunaan CSS background-attachment :</h4> <div style="background-color: white; border: solid gray; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; overflow: auto; padding: 0.2em 0.6em; text-align: justify; vertical-align: baseline; width: auto;"> <pre style="box-sizing: border-box; color: inherit; font-family: 'Courier New', Courier, monospace; line-height: 16.25px; overflow: auto; padding: 0px; word-wrap: normal;">body { background: #ff00ff url("bg.png") no-repeat right top; } </pre> </div> <br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Pada contoh terlihat ada penumpukan antara background color dan background image. Ini digunakan untuk mencegah kekosongan background jika load image dinon-aktifkan oleh user atau image gagal dimuat karena suatu sebab tertentu. Jadi jika image tidak tampil akan diganti dengan background warna. </span><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><i style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"><a href="http://www.w3schools.com/css/tryit.asp?filename=trycss_background_shorthand" style="-webkit-transition: all 0.2s ease-in; box-sizing: border-box; color: #859ce6; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">Kita bisa berlatih CSS background disini >></a></i><span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">.</span><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><h3 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 18px; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;"> Kesimpulan :</h3> <span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Yang perlu diperhatikan dalam menerapkan background adalah jangan sampai background membuat teks tidak jelas terbaca.</span>

Tutorial CSS Part 3: Mengatur Background

Background adalah latar belakang elemen pada halaman html. Background bisa diterapkan pada body (keseluruhan halaman) atau bisa diterapkan...

Baca selengkapnya »

Tutorial CSS : Mengenal Selector Id dan Class

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfzVFk1z-rH-Im6F_vRrud0qTuAfUBjvLq8rNoar3nw81s_v6WxlY_MNWnjrRupn8JHmVvwknrGqRRkyoNY0GHnYtYUi4h6XKbHEXnj9WCOEsQeiHaoWdYhNqvpYhT6xWZcoWcDtzySTo/s1600/selector-id-dan-class.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="258" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfzVFk1z-rH-Im6F_vRrud0qTuAfUBjvLq8rNoar3nw81s_v6WxlY_MNWnjrRupn8JHmVvwknrGqRRkyoNY0GHnYtYUi4h6XKbHEXnj9WCOEsQeiHaoWdYhNqvpYhT6xWZcoWcDtzySTo/s1600/selector-id-dan-class.png" width="320" /></a></div> <span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Selector pada CSS berfungsi untuk memilih elemen html yang di-style sesuai dengan deklarasi pada selector tersebut. Pada tulisan sebelumnya kita telah mengenal selector CSS menggunakan elemen-elemen html seperti paragraf (p) dan heading (h1). Selector CSS dengan nama elemen ini juga berlaku untuk elemen yang lain seperti link (a), list (ul dan ol), table dan yang lainnya.</span><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Kemudian muncul pertanyaan bagaimana jika kita akan menerapkan style yang berbeda untuk elemen yang sama? Misalnya paragraf pertama dibuat margin 10px lalu paragraf kedua dibuat margin 20px. Jawabannya, kita bisa menggunakan selector Id dan Class.</span><br /> <h3 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 18px; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;"> Menggunakan Selector Id pada CSS</h3> <span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Selector Id digunakan untuk memilih satu elemen unik pada html. Cara menggunakan selector Id adalah dengan menambahkan attribut id pada elemen html tertentu. Id ini harus unik dalam satu page, jika kita bisa menerapkan CSS kepada satu elemen yang dimaksud (unique element).</span><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><h4 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;"> Cara penulisan selector Id</h4> <span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Untuk menuliskan selector Id kita menggunakan karakter hash (#). Kemudian nama Id ditulis tepat setelah tanda # tanpa spasi. Deklarasi CSS untuk ID ini ditulis diantara kurung kurawal seperti pada selector elemen.</span><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Kemudian pada elemen html tertentu kita taruh atribut "id" dengan nama yang sama dengan id pada CSS tadi. Atribut id ini juga digunakan untuk pemrograman Javascript, jadi bisa saling pakai Id.</span><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><h4 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;"> Contoh penggunaan selector Id</h4> <div class="dp-highlighter" style="background-color: #e7e5dc; box-sizing: border-box; font-family: Consolas, Monaco, 'Courier New', Courier, monospace; font-size: 12px; line-height: 1.8em; margin: 18px 0px !important; overflow: auto; padding: 1px 0px 0px; text-align: justify; vertical-align: baseline; width: 601.90625px;"> <div class="bar" style="box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px 0px 0px 45px; vertical-align: baseline;"> <div class="tools" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-style: solid; border-left-width: 3px; box-sizing: border-box; color: silver; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 9px; line-height: normal; margin: 0px; padding: 3px 8px 10px 10px; vertical-align: baseline;"> <a href="http://nulis-ilmu.blogspot.com/2014/12/tutorial-css-part-2-mengenal-selector-id-dan-class.html#" style="-webkit-transition: all 0.2s ease-in; background-color: inherit; background-image: none; border: none; box-sizing: border-box; color: #a0a0a0; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px 10px 0px 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">view plain</a><a href="http://nulis-ilmu.blogspot.com/2014/12/tutorial-css-part-2-mengenal-selector-id-dan-class.html#" style="-webkit-transition: all 0.2s ease-in; background-color: inherit; background-image: none; border: none; box-sizing: border-box; color: #a0a0a0; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px 10px 0px 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">print</a><a href="http://nulis-ilmu.blogspot.com/2014/12/tutorial-css-part-2-mengenal-selector-id-dan-class.html#" style="-webkit-transition: all 0.2s ease-in; background-color: inherit; background-image: none; border: none; box-sizing: border-box; color: #a0a0a0; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px 10px 0px 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">?</a></div> </div> <ol class="dp-c" style="background-color: white; border: none; box-sizing: border-box; color: #5c5c5c; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; list-style-image: initial; list-style-position: initial; margin: 0px 0px 1px 45px !important; padding: 0px; vertical-align: baseline;"> <li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><html>    </span></span></li> <li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><head>    </span></li> <li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><title>Contoh Selector Id CSS</title>    </span></li> <li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></head>    </span></li> <li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">    </span></li> <li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><style>    </span></li> <li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">h1 {    </span></li> <li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">  font-size: 20px;    </span></li> <li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}    </span></li> <li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">         </span></li> <li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="comment" style="background-color: inherit; border: none; box-sizing: border-box; color: #008200; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">#top {  </span><span style="background-color: inherit; border: none; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">  </span></span></li> <li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">     color: red;    </span></li> <li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}    </span></li> <li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">    </span></li> <li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="comment" style="background-color: inherit; border: none; box-sizing: border-box; color: #008200; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">#bottom {  </span><span style="background-color: inherit; border: none; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">  </span></span></li> <li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">  color: blue;    </span></li> <li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}    </span></li> <li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">    </span></li> <li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></style>    </span></li> <li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">    </span></li> <li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><body>    </span></li> <li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><h1>Contoh Penggunaan Selector Id</h1>    </span></li> <li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><p id=<span class="string" style="background-color: inherit; border: none; box-sizing: border-box; color: blue; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"top"</span><span style="background-color: inherit; border: none; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">>Paragraf paling atas warna merah</p>    </span></span></li> <li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><p>Paragraf ditengah tidak di-style</p>    </span></li> <li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><p id=<span class="string" style="background-color: inherit; border: none; box-sizing: border-box; color: blue; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"bottom"</span><span style="background-color: inherit; border: none; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">>Paragraf paling bawah warna biru</p>    </span></span></li> <li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></body>    </span></li> <li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></html>    </span></li> </ol> </div> <span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Pada contoh diatas, kita mempunyai dua buah id, yaitu "top" dan "bottom". Pada CSS, paragraf dengan id "top" kita buat warna merah dan paragraf dengan id "bottom" kita buat warna biru.</span><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Kemudian pada tag <p> untuk paragraf paling atas kita tambahkan attribut id="top" dan pada paragraf paling bawah kita tambahkan atribut id="bottom".</span><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><h4 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;"> Dan berikut ini hasil tampilan dari contoh penggunaan selector Id diatas :</h4> <div class="separator" style="background-color: white; box-sizing: border-box; clear: both; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: center; vertical-align: baseline;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivJAzaP7wGWrq0-q-87RfVkzVbWw_fQ4HYlPDaQg9sI9h-Nmj7eBRzkANBJngbTg4TjbOijhlYjxnm2GW5vFHgM-y2EzaT_WR9F63ZpFn58Jjsriic2jEjdge3hif0HisfO1PDhEW8Ve8/s1600/selector-id.png" imageanchor="1" style="-webkit-transition: all 0.2s ease-in; box-sizing: border-box; color: #859ce6; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px 1em; padding: 0px; text-decoration: none; vertical-align: baseline;"><img alt="contoh penggunaan selector id pada css" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivJAzaP7wGWrq0-q-87RfVkzVbWw_fQ4HYlPDaQg9sI9h-Nmj7eBRzkANBJngbTg4TjbOijhlYjxnm2GW5vFHgM-y2EzaT_WR9F63ZpFn58Jjsriic2jEjdge3hif0HisfO1PDhEW8Ve8/s1600/selector-id.png" style="border: 0px none; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; max-width: 100%; outline: none; padding: 0px; page-break-after: always; vertical-align: baseline;" title="" /></a></div> <h3 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 18px; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;"> Menggunakan Selector Class pada CSS</h3> <span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Selector Class digunakan untuk memilih elemen html yang memiliki sifat atau perilaku yang sama dalam satu halaman. Selector Class ini bisa digunakan untuk beberapa elemen dalam satu halaman. Penerapan selector Class sebaiknya memperhatikan kesamaan elemen-elemen pada halaman html.</span><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Sebagai contoh kita akan menerapkan style pada paragraf yang berada diantara paragraf pertama dan paragraf terakhir pada contoh diatas. Kemudian kita buat class "midle" untuk mendefinisikannya. Jadi setiap paragraf dengan class "midle" akan dikenakan style yang kita buat.</span><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><h4 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;"> Cara penulisan selector class</h4> <span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Penulisan selector class pada CSS diawali dengan huruf titik (.) atau dot. Kemudian nama class ditulis tepat setelah tanda titik. Deklarasi CSS untuk Class ini ditulis diantara kurung kurawal seperti pada selector elemen dan selector id.</span><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Kemudian pada elemen html tertentu kita taruh atribut "class" dengan nama yang sama dengan nama class pada CSS tadi.</span><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><h4 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;"> Contoh penggunaan selector class</h4> <div class="dp-highlighter" style="background-color: #e7e5dc; box-sizing: border-box; font-family: Consolas, Monaco, 'Courier New', Courier, monospace; font-size: 12px; line-height: 1.8em; margin: 18px 0px !important; overflow: auto; padding: 1px 0px 0px; text-align: justify; vertical-align: baseline; width: 601.90625px;"> <div class="bar" style="box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px 0px 0px 45px; vertical-align: baseline;"> <div class="tools" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-style: solid; border-left-width: 3px; box-sizing: border-box; color: silver; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 9px; line-height: normal; margin: 0px; padding: 3px 8px 10px 10px; vertical-align: baseline;"> <a href="http://nulis-ilmu.blogspot.com/2014/12/tutorial-css-part-2-mengenal-selector-id-dan-class.html#" style="-webkit-transition: all 0.2s ease-in; background-color: inherit; background-image: none; border: none; box-sizing: border-box; color: #a0a0a0; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px 10px 0px 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">view plain</a><a href="http://nulis-ilmu.blogspot.com/2014/12/tutorial-css-part-2-mengenal-selector-id-dan-class.html#" style="-webkit-transition: all 0.2s ease-in; background-color: inherit; background-image: none; border: none; box-sizing: border-box; color: #a0a0a0; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px 10px 0px 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">print</a><a href="http://nulis-ilmu.blogspot.com/2014/12/tutorial-css-part-2-mengenal-selector-id-dan-class.html#" style="-webkit-transition: all 0.2s ease-in; background-color: inherit; background-image: none; border: none; box-sizing: border-box; color: #a0a0a0; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px 10px 0px 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">?</a></div> </div> <ol class="dp-c" style="background-color: white; border: none; box-sizing: border-box; color: #5c5c5c; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; list-style-image: initial; list-style-position: initial; margin: 0px 0px 1px 45px !important; padding: 0px; vertical-align: baseline;"> <li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><html>    </span></span></li> <li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><head>    </span></li> <li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><title>Contoh Selector Class CSS</title>    </span></li> <li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></head>    </span></li> <li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">    </span></li> <li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><style>    </span></li> <li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">h1 {    </span></li> <li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">  font-size: 20px;    </span></li> <li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}    </span></li> <li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">         </span></li> <li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="comment" style="background-color: inherit; border: none; box-sizing: border-box; color: #008200; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">#top {  </span><span style="background-color: inherit; border: none; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">  </span></span></li> <li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">     color: red;    </span></li> <li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}    </span></li> <li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">    </span></li> <li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="comment" style="background-color: inherit; border: none; box-sizing: border-box; color: #008200; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">#bottom {  </span><span style="background-color: inherit; border: none; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">  </span></span></li> <li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">  color: blue;    </span></li> <li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}    </span></li> <li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">    </span></li> <li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">.midle {    </span></li> <li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">  color: green;    </span></li> <li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}    </span></li> <li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">    </span></li> <li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></style>    </span></li> <li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">    </span></li> <li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><body>    </span></li> <li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><h1>Contoh Penggunaan Selector Id</h1>    </span></li> <li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><p id=<span class="string" style="background-color: inherit; border: none; box-sizing: border-box; color: blue; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"top"</span><span style="background-color: inherit; border: none; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">>Paragraf paling atas warna merah</p>    </span></span></li> <li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><p <span class="keyword" style="background-color: inherit; border: none; box-sizing: border-box; color: #006699; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">class</span><span style="background-color: inherit; border: none; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="string" style="background-color: inherit; border: none; box-sizing: border-box; color: blue; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"midle"</span><span style="background-color: inherit; border: none; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">>Paragraf ditengah warna hijau</p>    </span></span></li> <li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><p <span class="keyword" style="background-color: inherit; border: none; box-sizing: border-box; color: #006699; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">class</span><span style="background-color: inherit; border: none; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="string" style="background-color: inherit; border: none; box-sizing: border-box; color: blue; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"midle"</span><span style="background-color: inherit; border: none; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">>Paragraf ditengah warna hijau</p>    </span></span></li> <li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><p id=<span class="string" style="background-color: inherit; border: none; box-sizing: border-box; color: blue; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"bottom"</span><span style="background-color: inherit; border: none; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">>Paragraf paling bawah warna biru</p>    </span></span></li> <li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></body>    </span></li> <li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></html>    </span></li> </ol> </div> <span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Pada contoh diatas kita menambahkan sebuah selector class dengan nama "midle" dan diset dengan warna hijau. Kemudian untuk semua paragraf yang ditengah kita taruh atribut class="midle".</span><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><h4 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;"> Dan berikut ini hasil tampilan dari contoh penggunaan selector class diatas :</h4> <div class="separator" style="background-color: white; box-sizing: border-box; clear: both; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: center; vertical-align: baseline;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8d-JR-C-yaYncxUKCfTCdT7ONWdfv67lLkZBGx16iQTgq81fXXahXcfEyMvUYM2tfcZmQnDyglOq7O-P_YR6L0IswiA1ZiZEt6lokqpBg93FneTK2_gjsLVBxXq1FuPCMhxJ78Y8LWEo/s1600/selector-class.png" imageanchor="1" style="-webkit-transition: all 0.2s ease-in; box-sizing: border-box; color: #859ce6; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px 1em; padding: 0px; text-decoration: none; vertical-align: baseline;"><img alt="contoh penggunaan selector class pada css" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8d-JR-C-yaYncxUKCfTCdT7ONWdfv67lLkZBGx16iQTgq81fXXahXcfEyMvUYM2tfcZmQnDyglOq7O-P_YR6L0IswiA1ZiZEt6lokqpBg93FneTK2_gjsLVBxXq1FuPCMhxJ78Y8LWEo/s1600/selector-class.png" style="border: 0px none; box-sizing: border-box; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; max-width: 100%; outline: none; padding: 0px; page-break-after: always; vertical-align: baseline;" title="" /></a></div> <h4 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;"> Perbedaan selector id dan selector class</h4> <span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Untuk memahami perbedaan penggunaan selector id dan selector class pada css perlu digaris bawahi bahwa id itu unik dan hanya ada satu dalam satu halaman html. Sedangkan class bisa lebih dari satu yang penting mempunyai kesamaan anta elemen dalam satu class.</span><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><br style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; line-height: 27px; margin: 0px; padding: 0px; text-align: justify;" /><span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Jika kita sengaja atau tidak sengaja menggunakan id untuk beberapa elemen memang css akan tetap bisa bekerja, namun tetap dianjurkan untuk menggunakan class khususnya jika dalam halaman tersebut juga ada javascript-nya.</span>

Tutorial CSS : Mengenal Selector Id dan Class

Selector pada CSS berfungsi untuk memilih elemen html yang di-style sesuai dengan deklarasi pada selector tersebut. Pada tulisan sebelumny...

Baca selengkapnya »