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 »