Ali Ba'agil Blog

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 »

Sabtu, Februari 14, 2015

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 »

Sabtu, Februari 14, 2015

Aplikasi Teks Editor untuk Pemrograman Web

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

Aplikasi Teks Editor untuk Pemrograman Web

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

Baca selengkapnya »

Sabtu, Februari 14, 2015

Ali Ba'agil Blog

Tutorial CSS : Mengatur tampilan Link dan Kondisinya

Apa itu CSS ?

Aplikasi Teks Editor untuk Pemrograman Web

Entri Populer

Label

Arsip Blog