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 »

Tutorial CSS : Mengatur tampilan Link dan Kondisinya

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0Hbf0OcomZyhWbcKxa3eVb5IVA-B0EREwONmYIXLR9xGEtIKlXm6QOiGm-qguIA2qTb9QveG_w9v7b1YrOtV-1AVX0jEumjM3SKp_k5wtccvstx66ZgHjBCRkpFDcSz_5UC7LnuCdyko/s1600/css-link.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0Hbf0OcomZyhWbcKxa3eVb5IVA-B0EREwONmYIXLR9xGEtIKlXm6QOiGm-qguIA2qTb9QveG_w9v7b1YrOtV-1AVX0jEumjM3SKp_k5wtccvstx66ZgHjBCRkpFDcSz_5UC7LnuCdyko/s1600/css-link.png" /></a></div> <span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Link adalah sebuah tautan yang bisa menghubungkan kita ke halaman lain. Secara default biasanya tampilan link dibuat bergaris bawah (underline). Namun dengan CSS kita bisa mengatur tampilan link dengan beberapa properti pada text seperti color, font-family, font-size dan lain-lain. Selain itu kita juga biasa mengatur background dengan CSS untuk mengatur background seperti background-color.</span><br /> <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;">Contoh penggunaan CSS untuk link :</span><br /> <div style="background-color: white; border: solid gray; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; 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;">a { color: blue; } </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;">Selain mengatur tampilan link, kita juga bisa membuat tampilan berbeda-beda untuk tiap kondisi link. Untuk menyatakan kondisi sebuah link kita menggunakan tanda titikdua (:) setelah tag link a. Dan deklarasi CSS ditulis setelah kondisi dengan cara seperti penulisan deklarasi CSS pada umumnya.</span><br /> <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 empat kondisi link yang bisa dibuat CSS-nya, yaitu :</span><br /> <ul style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; 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-size: 15px; font: inherit; margin: 5px 0px; padding: 0px; vertical-align: baseline;"><b style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">a:link</b>, yaitu link dalam kondisi normal, belum dikunjungi</li> <li style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px; vertical-align: baseline;"><b style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">a:visited</b>, yaitu link yang sudah dikunjungi</li> <li style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px; vertical-align: baseline;"><b style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">a:hover</b>, yaitu kondisi link saat mouse mengenai link/mouse berada diatas link tapi belum diklik.</li> <li style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px; vertical-align: baseline;"><b style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">a:active</b>, yaitu kondisi link pada saat diklik.</li> </ul> <h3 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 18px; font: inherit; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;"> Contoh penggunaan CSS untuk beberapa kondisi link :</h3> <h4 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;"> 1. Link dalam kondisi normal</h4> <div style="background-color: white; border: solid gray; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; 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;">a { color: blue; } </pre> </div> <h4 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;"> 2. Link telah dikunjungi (Visited)</h4> <div style="background-color: white; border: solid gray; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; 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;">a:visited { color: green; } </pre> </div> <h4 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;"> 3. Link saat ada mouse diatasnya (Hover)</h4> <div style="background-color: white; border: solid gray; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; 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;">a:hover { color: red; } </pre> </div> <h4 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;"> 4. Link saat diklik</h4> <div style="background-color: white; border: solid gray; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; 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;">a:active { color: yellow; } </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;" /> <a href="http://www.w3schools.com/css/tryit.asp?filename=trycss_link" style="-webkit-transition: all 0.2s ease-in; background-color: white; box-sizing: border-box; color: #859ce6; font-family: verdana; font-size: 15px; font: inherit; line-height: 27px; margin: 0px; padding: 0px; text-align: justify; text-decoration: initial; vertical-align: baseline;" target="_blank">Kita bisa berlatih CSS link disini >></a><br /> <h3 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 18px; font: inherit; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;"> <b>Penting dalam menulis CSS untuk beberapa kondisi Link</b></h3> <div style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; line-height: 27px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"> Saat penulisan CSS untuk beberapa kondis link harus memperhatikan urutan. Yaitu <b style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">hover</b> harus ditulis setelah <b style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">link</b> dan <b style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">visited</b>, kemudian active harus ditulis setelah <b style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">hover</b>.</div>

Tutorial CSS : Mengatur tampilan Link dan Kondisinya

Link adalah sebuah tautan yang bisa menghubungkan kita ke halaman lain. Secara default biasanya tampilan link dibuat bergaris bawah (under...

Baca selengkapnya »

Apa itu CSS ?

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8sNlRUKsy94D_A1c7opQtzfSqJcyE06EsJkOoPJyKs_90RSp21EPIYcdFyEy_5UpX_Uqq1HvFJ4BFBMkgp6nvkxcvhb56gf3ZHvlwWr5QtarQ4vDrKup50WYxgt0S_zBBYJeSnlmp1cI/s1600/css-cascade-style-sheet.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8sNlRUKsy94D_A1c7opQtzfSqJcyE06EsJkOoPJyKs_90RSp21EPIYcdFyEy_5UpX_Uqq1HvFJ4BFBMkgp6nvkxcvhb56gf3ZHvlwWr5QtarQ4vDrKup50WYxgt0S_zBBYJeSnlmp1cI/s1600/css-cascade-style-sheet.png" width="320" /></a></div> <span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">CSS adalah singkatan dari Cascading Style Sheet. CSS berfungsi sebagai pengendali komponen pada elemen sebuah website. CSS menentukan tampilan sebuah website melalui nilai-nilai properti style yang disetting pada tiap-tiap elemen dalam website tersebut.</span><br /> <span style="background-color: white; font-family: verdana; font-size: 18px; line-height: 27px; text-align: justify;"><br /></span> <span style="background-color: white; font-family: verdana; font-size: 18px; line-height: 27px; text-align: justify;">Latar belakang penggunaan CSS</span><br /> <span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Penggunaan CSS didasari oleh kebutuhan akan tampilan sebuah website. Sebagaimana diketahui bahwa selain isi, tampilan sebuah website merupakan faktor yang tidak kalah pentingnya. Tampilan website yang baik akan membuat pengunjung nyaman dalam membaca dan mengakses isi sebuah website. Hal ini tentu positif bagi perkembangan website tersebut.</span><br /> <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;">Tata letak website yang baik merupakan susunan dari tiap-tiap bagian secara baik dan proporsional. Sebagai contoh saat kita mengatur jarak antar bagian melalui margin dan padding, juga saat mengatur penggunaan font, ukuran font dan warna font.</span><br /> <span style="background-color: white; font-family: verdana; font-size: 18px; line-height: 27px; text-align: justify;"><br /></span> <span style="background-color: white; font-family: verdana; font-size: 18px; line-height: 27px; text-align: justify;">Cara Membuat CSS</span><br /> <span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Dalam membuat CSS ada empat hal utama yang perlu diketahui, yaitu:</span><br /> <ol style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; 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-size: 15px; font: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;"><b style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Selector,</b> adalah bagian atau elemen website yang akan diatur stylenya.</li> <li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 0px; box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;"><b style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Deklarasi,</b> merupakan pernyataan yang menetapkan style yang berisi Properti dan Nilai.</li> <li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 0px; box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;"><b style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Properti,</b> adalah parameter tampilan yang akan kita atur.</li> <li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 0px; box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;"><b style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Nilai,</b> merupakan ukuran yang itetapkan pada parameter properti.</li> </ol> <span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Contoh membuat CSS untuk paragraf :</span><br /> <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;" /> <div style="background-color: white; border: solid gray; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; 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;">p { margin: 10px; } </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;">Penjelasan contoh diatas :</span><br /> <ol style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; 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-size: 15px; font: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;"><b style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">p</b> merupakan selector untuk elemen paragraf</li> <li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 0px; box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;">{...}, merupakan deklarasi, dalam hal ini berisi margin: 10px;</li> <li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 0px; box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;"><b style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">margin</b>, merupakan properti untuk mengatur jarak dengan elemen lain.</li> <li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 0px; box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;"><b style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">10px</b>, merupakan nilai yang ditetapkan untuk properti margin.</li> </ol> <span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Dalam sebuah deklarasi kita bisa menyetting beberapa properti sekaligus, seperti contoh berikut ini :</span><br /> <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;" /> <div style="background-color: white; border: solid gray; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; 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;">p { margin: 10px; padding: 5px; font-size: 10px; } </pre> </div> <h3 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 18px; font: inherit; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;"> Cara Penulisan CSS</h3> <span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Untuk menggunakan CSS ada tiga cara yang bisa dilakukan yaitu dengan cara Inline CSS, Embedded CSS dan External CSS.</span><br /> <span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;"><b>1. Inline CSS</b></span><span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;"><br /></span><span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Adalah penulisan CSS didalam elemen html secara langsung. Jadi dalam hal ini kita tidak memerlukan penulisan selector karena sudah langsung tertuju pada elemen yang dimaksud. Sebagai gantinya, kita menggunakan tag style="..." pada elemen tersebut.</span><br /> <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;">Contoh penulisan Inline CSS:</span><br /> <br /> <div style="background-color: white; border: solid gray; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; 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;"><p style="margin:10px;"> </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;">Penjelasan dari kode diatas adalah, kita menetapkan properti margin sebesar 10px untuk elemen paragraf (p). Diantara tanda petik dua (") kita bisa menyisipkan beberapa deklarasi properti dan nilai sekaligus dengan cara masing-masing deklarasi tetap diakhiri dengan tanda titik koma (;).</span><br /> <h4 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;"> <b>2. Embedded CSS</b></h4> <span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Adalah penulisan CSS secara tersendiri namun berada dalam satu file html. Cara ini membutuhkan selector dalam penulisannya. Beberapa kode CSS ditulis didalam tag <style>...</style>. kita bisa menuliskan beberapa selector beserta deklarasi properti dan nilai didalam tag <style> ini.</span><br /> <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;">Contoh penulisan Embedded CSS dalam sebuah file html:</span><br /> <div class="dp-highlighter" style="background-color: #e7e5dc; box-sizing: border-box; font-family: Consolas, Monaco, 'Courier New', Courier, monospace; font-size: 12px; font: inherit; line-height: 1.8em; margin: 18px 0px !important; overflow: auto; padding: 1px 0px 0px; text-align: justify; vertical-align: baseline; width: 601.9166870117188px;"> <div class="bar" style="box-sizing: border-box; font-size: 12px; font: 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; font: inherit; 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-1-apa-itu-css.html#" style="-webkit-transition: all 0.2s ease-in; background-color: inherit; background-image: none; background-position: initial initial; background-repeat: initial initial; border: none; box-sizing: border-box; color: #a0a0a0; font-size: 9px; font: inherit; margin: 0px 10px 0px 0px; padding: 0px; text-decoration: initial; vertical-align: baseline;">view plain</a><a href="http://nulis-ilmu.blogspot.com/2014/12/tutorial-css-part-1-apa-itu-css.html#" style="-webkit-transition: all 0.2s ease-in; background-color: inherit; background-image: none; background-position: initial initial; background-repeat: initial initial; border: none; box-sizing: border-box; color: #a0a0a0; font-size: 9px; font: inherit; margin: 0px 10px 0px 0px; padding: 0px; text-decoration: initial; vertical-align: baseline;">print</a><a href="http://nulis-ilmu.blogspot.com/2014/12/tutorial-css-part-1-apa-itu-css.html#" style="-webkit-transition: all 0.2s ease-in; background-color: inherit; background-image: none; background-position: initial initial; background-repeat: initial initial; border: none; box-sizing: border-box; color: #a0a0a0; font-size: 9px; font: inherit; margin: 0px 10px 0px 0px; padding: 0px; text-decoration: initial; vertical-align: baseline;">?</a></div> </div> <ol class="dp-c" style="background-color: white; border: none; box-sizing: border-box; color: #5c5c5c; font-size: 12px; font: 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-size: 12px; font: 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-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; font-size: 12px; font: 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-size: 12px; font: 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-size: 12px; font: 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-size: 12px; font: 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-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><title>Contoh Embedded 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-size: 12px; font: 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-size: 12px; font: 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-size: 12px; font: 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-size: 12px; font: 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-size: 12px; font: 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-size: 12px; font: 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-size: 12px; font: 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-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">  p {    </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-size: 12px; font: 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-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">    margin: 10px;    </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-size: 12px; font: 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-size: 12px; font: 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-size: 12px; font: 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-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">  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-size: 12px; font: 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-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">    font-size: 15px;    </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-size: 12px; font: 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-size: 12px; font: 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-size: 12px; font: 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-size: 12px; font: 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-size: 12px; font: 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-size: 12px; font: 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-size: 12px; font: 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-size: 12px; font: 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-size: 12px; font: 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-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><h1>Judul dengan font 15px</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-size: 12px; font: 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-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><p>Ini adalah paragraf pertama</p>    </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-size: 12px; font: 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-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><p>Ini adalah paragraf kedua</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-size: 12px; font: 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-size: 12px; font: 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-size: 12px; font: 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-size: 12px; font: 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 embeddes CSS diatas kita menetapkan font untuk heading h1 sebesar 15px dan margin antar paragraf sebesar 10px.</span><br /> <h4 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;"> <b>3. Eksternal CSS</b></h4> <span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Ini adalah cara paling efektif dan banyak dipakai oleh kebanyakan website saat ini. Dengan eksternal CSS kita menaruh kode-kode CSS didalam sebuah file tersendiri lalu membuat link didalam file html menuju file CSS yang telah dibuat. Cara ini lebih efisien dan mempermudah pekerjaan mendesain dan mengelola sebuah website.</span><br /> <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;" /> <b style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; line-height: 27px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">Contoh penulisan Eksternal CSS :</b><br /> <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;">- Pertama kita membuat kode berikut ini pada file .css, lalu menyimpannya misalnya dengan nama style.css </span><br /> <div class="dp-highlighter" style="background-color: #e7e5dc; box-sizing: border-box; font-family: Consolas, Monaco, 'Courier New', Courier, monospace; font-size: 12px; font: inherit; line-height: 1.8em; margin: 18px 0px !important; overflow: auto; padding: 1px 0px 0px; text-align: justify; vertical-align: baseline; width: 601.9166870117188px;"> <div class="bar" style="box-sizing: border-box; font-size: 12px; font: 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; font: inherit; 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-1-apa-itu-css.html#" style="-webkit-transition: all 0.2s ease-in; background-color: inherit; background-image: none; background-position: initial initial; background-repeat: initial initial; border: none; box-sizing: border-box; color: #a0a0a0; font-size: 9px; font: inherit; margin: 0px 10px 0px 0px; padding: 0px; text-decoration: initial; vertical-align: baseline;">view plain</a><a href="http://nulis-ilmu.blogspot.com/2014/12/tutorial-css-part-1-apa-itu-css.html#" style="-webkit-transition: all 0.2s ease-in; background-color: inherit; background-image: none; background-position: initial initial; background-repeat: initial initial; border: none; box-sizing: border-box; color: #a0a0a0; font-size: 9px; font: inherit; margin: 0px 10px 0px 0px; padding: 0px; text-decoration: initial; vertical-align: baseline;">print</a><a href="http://nulis-ilmu.blogspot.com/2014/12/tutorial-css-part-1-apa-itu-css.html#" style="-webkit-transition: all 0.2s ease-in; background-color: inherit; background-image: none; background-position: initial initial; background-repeat: initial initial; border: none; box-sizing: border-box; color: #a0a0a0; font-size: 9px; font: inherit; margin: 0px 10px 0px 0px; padding: 0px; text-decoration: initial; vertical-align: baseline;">?</a></div> </div> <ol class="dp-c" style="background-color: white; border: none; box-sizing: border-box; color: #5c5c5c; font-size: 12px; font: 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-size: 12px; font: 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-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; font-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">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-size: 12px; font: 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-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">  margin: 10px;    </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-size: 12px; font: 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-size: 12px; font: 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-size: 12px; font: 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-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">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-size: 12px; font: 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-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">  font-size: 15px;    </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-size: 12px; font: 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-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">}    </span></li> </ol> </div> <span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">- Kemudian kita buat file html berikut ini yang menggunakan css dari file style.css lalu disimpan misalnya dengan nama index.php </span><br /> <div class="dp-highlighter" style="background-color: #e7e5dc; box-sizing: border-box; font-family: Consolas, Monaco, 'Courier New', Courier, monospace; font-size: 12px; font: inherit; line-height: 1.8em; margin: 18px 0px !important; overflow: auto; padding: 1px 0px 0px; text-align: justify; vertical-align: baseline; width: 601.9166870117188px;"> <div class="bar" style="box-sizing: border-box; font-size: 12px; font: 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; font: inherit; 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-1-apa-itu-css.html#" style="-webkit-transition: all 0.2s ease-in; background-color: inherit; background-image: none; background-position: initial initial; background-repeat: initial initial; border: none; box-sizing: border-box; color: #a0a0a0; font-size: 9px; font: inherit; margin: 0px 10px 0px 0px; padding: 0px; text-decoration: initial; vertical-align: baseline;">view plain</a><a href="http://nulis-ilmu.blogspot.com/2014/12/tutorial-css-part-1-apa-itu-css.html#" style="-webkit-transition: all 0.2s ease-in; background-color: inherit; background-image: none; background-position: initial initial; background-repeat: initial initial; border: none; box-sizing: border-box; color: #a0a0a0; font-size: 9px; font: inherit; margin: 0px 10px 0px 0px; padding: 0px; text-decoration: initial; vertical-align: baseline;">print</a><a href="http://nulis-ilmu.blogspot.com/2014/12/tutorial-css-part-1-apa-itu-css.html#" style="-webkit-transition: all 0.2s ease-in; background-color: inherit; background-image: none; background-position: initial initial; background-repeat: initial initial; border: none; box-sizing: border-box; color: #a0a0a0; font-size: 9px; font: inherit; margin: 0px 10px 0px 0px; padding: 0px; text-decoration: initial; vertical-align: baseline;">?</a></div> </div> <ol class="dp-c" style="background-color: white; border: none; box-sizing: border-box; color: #5c5c5c; font-size: 12px; font: 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-size: 12px; font: 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-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="background-color: inherit; border: none; box-sizing: border-box; font-size: 12px; font: 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-size: 12px; font: 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-size: 12px; font: 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-size: 12px; font: 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-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><title>Contoh Embedded 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-size: 12px; font: 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-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><link rel=<span class="string" style="background-color: inherit; border: none; box-sizing: border-box; color: blue; font-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"stylesheet"</span><span style="background-color: inherit; border: none; box-sizing: border-box; font-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> type=</span><span class="string" style="background-color: inherit; border: none; box-sizing: border-box; color: blue; font-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"text/css"</span><span style="background-color: inherit; border: none; box-sizing: border-box; font-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> href=</span><span class="string" style="background-color: inherit; border: none; box-sizing: border-box; color: blue; font-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"style.css"</span><span style="background-color: inherit; border: none; box-sizing: border-box; font-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">>    </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-size: 12px; font: 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-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></head>    </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-size: 12px; font: 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-size: 12px; font: 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-size: 12px; font: 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-size: 12px; font: 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-size: 12px; font: 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-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><h1>Judul dengan font 15px</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-size: 12px; font: 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-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><p>In adalah paragraf pertama</p>    </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-size: 12px; font: 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-size: 12px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><p>In adalah paragraf kedua</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-size: 12px; font: 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-size: 12px; font: 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-size: 12px; font: 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-size: 12px; font: 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 menggunakan CSS yang sama daricontoh sebelumnya, hanya saja kali ini kita memisahkan kode-kode css didalam fle tersediri, yang kita beri nama style.css. </span><br /> <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 bagian head dari file index.html kita taruh link menuju file css dengan kode </span><i style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; line-height: 27px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"><link rel="stylesheet" type="text/css" href="style.css"></i><span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">. Hasil tampilan dari contoh ini sama dengan contoh sebelumnya,</span><br /> <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;">Keuntungan dari cara ini adalah kita bisa lebih mudah mengelola CSS untuk banyak halaman secara sekaligus. Selain itu proses membuka website untuk halaman kedua dans eterusnya menjadi lebih ringan karena tidak perlu loading ulang css.</span><br /> <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;">Untuk membuat file CSS dapat menggunakan </span><a href="http://aliknightmare.blogspot.com/2015/02/aplikasi-teks-editor-untuk-pemrograman.html" target="_blank">aplikasi teks editor untuk pemrograman web </a><span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">seperti pada pembuatan script HTML dan PHP.</span>

Apa itu CSS ?

CSS adalah singkatan dari Cascading Style Sheet. CSS berfungsi sebagai pengendali komponen pada elemen sebuah website. CSS menentukan tamp...

Baca selengkapnya »

Aplikasi Teks Editor untuk Pemrograman Web

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh90WQLZ7BSlV-6Jsn4J7wnUQyV2dxeLnD-n3C6382L063dvP_vQzHAsEotKwHBUHQSw-ZL__xQwRilUfZcdDKml7H7eXlRwiyDQ6g8kXoV9INuNPrxnuoE3V7uXqoe_06qjW6W1HWN0kc/s1600/TextEditor.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh90WQLZ7BSlV-6Jsn4J7wnUQyV2dxeLnD-n3C6382L063dvP_vQzHAsEotKwHBUHQSw-ZL__xQwRilUfZcdDKml7H7eXlRwiyDQ6g8kXoV9INuNPrxnuoE3V7uXqoe_06qjW6W1HWN0kc/s1600/TextEditor.png" width="320" /></a></div> <span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Untuk menunjang pembuatan script-script website kita harus mempunyai teks editor yang baik. Sebenarnya menggunakan aplikasi teks editor seperti notepad saja sudah cukup untuk menghasilkan script HTML maupun PHP namun jika script sudah banyak dan kompleks maka aplikasi minimum seperti notepad agaknya sudah tidak cocok lagi.</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;" /><span style="background-color: white; font-family: verdana; font-size: 15px; line-height: 27px; text-align: justify;">Mengapa demikian, karena dengan banyaknya script maka tag-tag akan seakin banyak dan pengelompokan script juga semakin luas jadi siperlukan setidaknya fitur syntax highlighting untuk membantu pengelompokan script. Selain itu beberapa fitur seperti auto completion dan accordion juga perlu untuk melokalisir area manakala terjadi masalah.</span><br /> <h4 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;"> Syarat-syarat teks editor untuk pembuatan script HTML, PHP, CSS dan JAVASCRIPT</h4> <ol style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; 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-size: 15px; font: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;"><span style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><b>Syntax Highlighter</b></span>, adalah fitur yang membedakan warna untuk masing-masing bagian script. Misalnya tag dengan warna hijau dan teks dengan warna hitam.</li> <li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 0px; box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;"><span style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><b>Code Folding</b></span>, adalah fitur untuk meminimize satu blok script. Jadi script bisa dicek per blok.</li> <li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 0px; box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;"><span style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><b>Auto Complete</b></span>, adalah fitur untuk memberikan sugesti terhadap kode yang akan ditulis. Jadi tidak perlu menghafal kode atau setidaknya meringankan kerja dalam mengetik kode.</li> <li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 0px; box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;"><span style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><b>Auto Recovery</b></span>, berfungsi jika tiba-tiba terjadi kesalahan daya saat proses mengetik kode sehingga kode yang telah diketik tidak hilang.</li> <li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 0px; box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;"><span style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><b>Project Manager</b></span>, adalah fitur ekstra untuk memudahkan proses pengerjaan sebuah proyek website atau aplikasi PHP.</li> <li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 0px; box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;"><span style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><b>Folder Tree</b></span>, adalah fitur mirip file manager yang membantu kita dalam proses buka tutup file.</li> <li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 0px; box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;"><span style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><b>Support multi language script</b></span>, dengan demikian aplikasi text editor bisa beradaptasi dengan berbagai bahasa pemrograman seperti HTML, PHP, CSS dan JAVASCRIPT.</li> <li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 0px; box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;"><span style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><b>Freeware</b></span>, ini bukan syarat utama namun menjadi salah satu syarat manakala kita tidak mau atau tidak mampu membeli aplikasi yang berbayar. Setidaknya keinginan untuk belajar dan berkarya tidak diawali dengan membajak aplikasi yang berbayar.<div style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> <h4 style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 16px 0px; padding: 0px; vertical-align: baseline;"> <b>Berikut ini beberapa aplikasi teks editor yang memenuhi kriteria diatas</b></h4> </div> <div style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> <span style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><b>1. Notepad++</b></span><br style="box-sizing: border-box; margin: 0px; padding: 0px;" /><div class="separator" style="box-sizing: border-box; clear: both; font-size: 15px; font: inherit; margin: 0px; padding: 0px; text-align: center; vertical-align: baseline;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge_clH4Gecd7mamYEVRTRKqaMCQlmQVq_WRGqAMyXeURuMWBHItJZKXTg1MBo-99Y5WkmJb4X2yt4TGErhKMIc7wfCIkAhEdireuv3xXdJ39EYAlEHkOD3eRzktwzQQgp1X2q29K5FUG4/s1600/Notepad++_Logo.png" imageanchor="1" style="-webkit-transition: all 0.2s ease-in; box-sizing: border-box; color: #859ce6; font-size: 15px; font: inherit; margin: 0px 1em; padding: 0px; text-decoration: initial; vertical-align: baseline;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge_clH4Gecd7mamYEVRTRKqaMCQlmQVq_WRGqAMyXeURuMWBHItJZKXTg1MBo-99Y5WkmJb4X2yt4TGErhKMIc7wfCIkAhEdireuv3xXdJ39EYAlEHkOD3eRzktwzQQgp1X2q29K5FUG4/s1600/Notepad++_Logo.png" style="border: 0px none; box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; max-width: 100%; outline: none; padding: 0px; page-break-after: always; vertical-align: baseline;" /></a></div> <b style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><br style="box-sizing: border-box; margin: 0px; padding: 0px;" /></b></div> <div style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> Merupakan aplikasi text editor yang gratis dan powerfull. Sayangnya Notepad++ hanya tersedia untuk platform OS Windows.</div> <div style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> Notepad++ dapat di download disitus resminya di ttp://notepad-plus-plus.org/</div> <div style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> <br style="box-sizing: border-box; margin: 0px; padding: 0px;" /></div> <div style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> <span style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><b>2. BlueFish Editor</b></span><br style="box-sizing: border-box; margin: 0px; padding: 0px;" /><div class="separator" style="box-sizing: border-box; clear: both; font-size: 15px; font: inherit; margin: 0px; padding: 0px; text-align: center; vertical-align: baseline;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoey_ZzeD7fja9BS3Qy23W_RUNNXhnPZ9mTm006zRFoc3u0BUfH4O57-rINA6_bNAkE5Rj7c81K5B8IG9TPrk2EyRAHPzf4XFrfaMn-cLJ5V2CWHr9lKTotRmNA3CW49kQ5dizkrRTDu0/s1600/bluefish-2.2-is-out.png" imageanchor="1" style="-webkit-transition: all 0.2s ease-in; box-sizing: border-box; color: #859ce6; font-size: 15px; font: inherit; margin: 0px 1em; padding: 0px; text-decoration: initial; vertical-align: baseline;"><img border="0" height="173" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoey_ZzeD7fja9BS3Qy23W_RUNNXhnPZ9mTm006zRFoc3u0BUfH4O57-rINA6_bNAkE5Rj7c81K5B8IG9TPrk2EyRAHPzf4XFrfaMn-cLJ5V2CWHr9lKTotRmNA3CW49kQ5dizkrRTDu0/s1600/bluefish-2.2-is-out.png" style="border: 0px none; box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; max-width: 100%; outline: none; padding: 0px; page-break-after: always; vertical-align: baseline;" width="200" /></a></div> <b style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><br style="box-sizing: border-box; margin: 0px; padding: 0px;" /></b></div> <div style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> BlueFish juga termasuk aplikasi text editor yang gratis dan powerfull. Kita bisa memilih mode berbagai bahas pemrograman. Awalnya saya mengenal Bluefish karena saya menggunakan Linux, namun ternyata BlueFish juga tersedia untuk platform Windows.</div> <div style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"> BlueFish dapat didownload disitus resminya di http://bluefish.openoffice.nl/</div> </li> </ol>

Aplikasi Teks Editor untuk Pemrograman Web

Untuk menunjang pembuatan script-script website kita harus mempunyai teks editor yang baik. Sebenarnya menggunakan aplikasi teks editor se...

Baca selengkapnya »

Makai Tenshi Djibril Season 1 [Uncensored - 2005]

<img alt="BROKEN IMAGE" src="http://cdn.myanimelist.net/images/anime/12/37381.jpg" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 10px; background-color: white; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 10px; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; height: auto; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; max-width: 550px; outline: none; padding: 3px; vertical-align: baseline;" /><br style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;" /><br style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;" /><span style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;">Sinopsis: Suatu hari musim panas, Naoto Kamino akhirnya mengerahkan keberanian untuk mengungkapkan perasaannya yang sebenarnya kepada cewek incaran nya, Manabe Rika. Sayangnya, pada saat yang sama, seorang anak muda bernama Asumo muncul (meskipun ia menyebut diri sebagai setan). Dia plot untuk menculik Rika dan tidak akan berhenti untuk mendapatkan nya - tapi Rika memiliki rahasia kecil dari dirinya sendiri, ia dapat mengubah dan memperoleh kekuatan super saat ber kentu ...</span><br style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;" /><br style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;" /><span style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;">English: Jiburiru: The Devil Angel</span><br style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;" /><span style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;">Synonyms: Hell Angel Gabriel, Makai Tenshi Jibril</span><br style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;" /><span style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;">Japanese: 魔界天使ジブリール</span><br style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;" /><br style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;" /><span style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;">Information</span><br style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;" /><span style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;">Type: OVA</span><br style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;" /><span style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;">Episodes: 4</span><br style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;" /><span style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;">Status: Finished Airing</span><br style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;" /><span style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;">Aired: Nov 26, 2004 to Jun 24, 2005</span><br style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;" /><span style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;">Producers: Animac, JapanAnime</span><br style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;" /><span style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;">Genres: Hentai, Demons, Magical Girls, Romance, Small Breasts, Uncensored</span><br style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;" /><span style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;">Duration: 30 min. per episode</span><br style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;" /><span style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;">Rating: Rx - Hentai</span><br style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;" /><span style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;">Subtitle: Indonesia</span><br style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;" /><br style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;" /><span style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;">Episode 01</span><br style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;" /><span style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;">MP4: </span><a href="https://www.mediafire.com/download/4dgvhe0clx22z08/Animecave.Makai.Tenshi.Jibril.01.mp4" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">MF</a><span style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;"> | </span><a href="http://www.tusfiles.net/t0kdktlm6uq3" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">TF</a><br style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;" /><span style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;">3GP: </span><a href="http://uppit.com/r5ft43qqjlgi/Animecave.Makai.Tenshi.Jibril.01.3gp" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">UP</a><span style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;"> | </span><a href="http://www.tusfiles.net/3yvethulr16u" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">TF</a><br style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;" /><span style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;">Episode 02</span><br style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;" /><span style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;">MP4: </span><a href="https://www.mediafire.com/download/2mv07bwf3mh7v5y/Animecave.Makai.Tenshi.Jibril.02.mp4" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">MF</a><span style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;"> | </span><a href="http://www.tusfiles.net/1o685joafeyb" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">TF</a><br style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;" /><span style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;">3GP: </span><a href="http://uppit.com/vovpnaqcnx2j/Animecave.Makai.Tenshi.Jibril.02.3gp" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">UP</a><span style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;"> | </span><a href="http://www.tusfiles.net/z0qoe5t3y3jo" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">TF</a><br style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;" /><span style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;">Episode 03</span><br style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;" /><span style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;">MP4: </span><a href="https://www.mediafire.com/download/ja9iq4nfcwmj8q7/Animecave.Makai.Tenshi.Jibril.03.mp4" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">MF</a><span style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;"> | </span><a href="http://www.tusfiles.net/ubqy5kkbmyg0" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">TF</a><br style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;" /><span style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;">3GP: </span><a href="http://uppit.com/kv937scq9196/Animecave.Makai.Tenshi.Jibril.03.3gp" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">UP</a><span style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;"> | </span><a href="http://www.tusfiles.net/38yt3ojn09mq" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">TF</a><br style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;" /><span style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;">Episode 04 END</span><br style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;" /><span style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;">MP4: </span><a href="https://www.mediafire.com/download/eob3okiae6p3i25/Animecave.Makai.Tenshi.Jibril.04.mp4" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">MF</a><span style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;"> | </span><a href="http://www.tusfiles.net/zyhbnrt9dizh" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">TF</a><br style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;" /><span style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;">3GP: </span><a href="http://uppit.com/lk6axxs8e8jl/Animecave.Makai.Tenshi.Jibril.04.3gp" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">UP</a><span style="background-color: white; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px;"> | </span><a href="http://www.tusfiles.net/ahkrgcqo2g09" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">TF</a><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfLi93IyRDDXVvRjqYnvVylnHviBaYe91uE7agjCAfOTN2cXB0t1_jGomb-Ycq0qDc7E5Cam6waJ1Ncp-7EGFeA5SMMNLMfe0V5uMpwoxBadR_cNTJv3MGE0FSIsJ4kqFyXo9duAbEDxU/s1600/index.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfLi93IyRDDXVvRjqYnvVylnHviBaYe91uE7agjCAfOTN2cXB0t1_jGomb-Ycq0qDc7E5Cam6waJ1Ncp-7EGFeA5SMMNLMfe0V5uMpwoxBadR_cNTJv3MGE0FSIsJ4kqFyXo9duAbEDxU/s1600/index.jpg" /></a></div>

Makai Tenshi Djibril Season 1 [Uncensored - 2005]

Sinopsis: Suatu hari musim panas, Naoto Kamino akhirnya mengerahkan keberanian untuk mengungkapkan perasaannya yang sebenarnya kepada cewek ...

Baca selengkapnya »