BatWeber

Belajar CSS Part 10 - Tautan (Link)

Link seringkali ditampilkan dengan pengaturan CSS sedemikian rupa sehingga ditampilkan seperti sebuah button.
Berikut contohnya :
 
 
a:link, a:visited { 
    background-color: #f44336; 
    color: white; 
    padding: 14px 25px; 
    text-align: center;  
    text-decoration: none; 
    display: inline-block; 
} 
 
a:hover, a:active { 
    background-color: red; 
} 
 
Dengan menggunakan script CSS di atas, link akan ditampilkan dengan tampilan seperti sebuah button. 
 
<a class="coba" href="http://batweber.greengaluh.com/css_link.html" target="_blank">Coba sendiri di sini</a> 
<div>
 
 
Demikian Belajar CSS tentang link, semoga bermanfaat.</div>
<div>
Terima kasih dan wassalamu'alaikum warohmatullaahi wabarokaatuh.</div>

Belajar CSS Part 10 - Tautan (Link)

Assalamu'alaikum warohmatullaahi wabarokaatuh. Belajar CSS kali ini akan menjelaskan tentang bagaimana kita bisa mengatur style ...

Belajar CSS Part 9 - Font

<div>
 
 
C. FONT SIZE</div>
<div>

</div>
<div>
 
font-size memiliki fungsi untuk mengatur ukuran font. Ukuran font bisa ditulis dalam satuan piksel atau em. Ukuran em disarankan oleh W3C. Satu em sama dengan 16 piksel. Namun dengan menggunakan satuan em, terdapat kekurangan jika dijalankan pada IE. Maka dari itu, maka solusi diambil dengan menentukan persentase ukuran font pada elemen body.</div>
<div>
Contoh : </div>
<div>
</div>
<div>
<pre style="text-align: start;"><code>
</code></pre>
<pre style="text-align: start;"><code>body {
 font-size: 100%;
}</code></pre>
<pre style="text-align: start;"><code><pre><code>p.piksel {
 font-size: 12px;
}</code></pre>
p.em {
 font-size: 0.75em;
}</code></pre>
 
Penjelasan :
 
<ul>
<li>Dengan script di atas, paragraf dengan class piksel dan class em sebenarnya memiliki ukuran yang sama, karena 16 piksel = 1 em, berarti 12 piksel = 0.75 em.</li>
</ul>
<div>
<a class="coba" href="http://batweber.greengaluh.com/css_font_size.html" target="_blank">Coba sendiri di sini</a></div>
</div>
<div>
 
 
D. FONT WEIGHT</div>
<div>

</div>
<div>
 
font-weight merupakan properti yang berfungsi untuk mengatur sebuah teks apakah akan ditulis tebal atau normal. Contoh :</div>
<div>
</div>
<div>
<pre style="text-align: start;"><code>p.normal {
 font-weight: normal;
}
p.bold {
 font-weight: bold;
}
</code></pre>
</div>
 
Penjelasan :
 
<ul>
<li>Dengan script CSS di atas, paragraf yang kita beri class normal akan ditampilkan dalam teks biasa (tidak tebal).</li>
<li>Sedangkan paragraf yang kita beri class bold akan ditampilkan dalam bentuk cetak tebal alias bold.</li>
</ul>
<div>
<a class="coba" href="http://batweber.greengaluh.com/css_font_weight.html" target="_blank">Coba sendiri di sini</a></div>
</div>
<div>
</div>
<div>
</div>
<div>
 
 
E. FONT VARIANT</div>
<div>
</div>
<div>
<div>
 
font-variant biasa digunakan untuk menentukan apakah sebuah teks akan ditulis dalam bentuk small-caps atau tidak. Dalam bentuk small-caps, seluruh teks akan ditulis dalam huruf kapital. Namun ukuran teks yang awalnya lowercase atau huruf kecil akan lebih kecil dibandingkan yang sudah kapital sejak awal,  Contoh :</div>
<div>
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG_4iX66ATTePNhBP1ce7YfZQe7bQK-Mp_eRdPbbg1jWZch5GzNo2T53OjR8mSKRBMxBmYPaLd9ZI9b_1-57b6r7i94xdT1POub8RA2IHSCR-Grlxv2RgF_eQLGGFu1br8bGjIKJa-Vuo/s1600/tutorial_css_font.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Tutorial CSS Part 9 - Font" border="0" height="104" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG_4iX66ATTePNhBP1ce7YfZQe7bQK-Mp_eRdPbbg1jWZch5GzNo2T53OjR8mSKRBMxBmYPaLd9ZI9b_1-57b6r7i94xdT1POub8RA2IHSCR-Grlxv2RgF_eQLGGFu1br8bGjIKJa-Vuo/s320/tutorial_css_font.jpg" title="Tutorial CSS Part 9 - Font" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Atas : font normal 
Bawah : small caps</td></tr>
</tbody></table>
<div>
</div>
<div>
p.normal {</div>
<div>
<pre style="text-align: start;"><code> font-variant: normal;
}</code></pre>
<pre style="text-align: start;"><code><pre><code>p.small {
 font-variant: small-caps;
}</code></pre>
</code></pre>
</div>
Penjelasan :
 
<ul>
<li>Dengan script CSS di atas, paragraf yang kita beri class normal akan ditampilkan dalam teks biasa.</li>
<li>Sedangkan paragraf yang kita beri class bold akan ditampilkan dalam bentuk small-caps.</li>
</ul>
<div>
<a class="coba" href="http://batweber.greengaluh.com/css_font_variant.html" target="_blank">Coba sendiri di sini</a></div>
 
 
Demikian Belajar CSS tentang Font, semoga bermanfaat.
Terima kasih dan wassalamu'alaikum warohmatullaahi wabarokaatuh.
</div>

Belajar CSS Part 9 - Font

Assalamu'alaikum warohmatullaahi wabarokaatuh. Dalam Belajar CSS kali ini kita akan mempelajari tentang penggunaan Font dalam C...

Belajar CSS Part 8 - Text Formatting

h1 {
 color: green;
}
</code></pre>
Penjelasan :
 
<ul>
<li>Dengan script CSS di atas, seluruh teks yang berada pada bagian body akan berwarna biru kecuali teks yang diberi tag h1.</li>
</ul>
<a class="coba" href="http://batweber.greengaluh.com/css_text_color.html" target="_blank">Coba sendiri di sini</a>
 
<div>
<div>
 
 
B. TEXT ALIGNMENT</div>
<div>
 
text-alignment adalah properti yang digunakan untuk mengatur sebuah teks atau paragraf apakah akan rata kiri, rata tengah, atau rata kanan. Contoh penggunaannya pada CSS adalah sebagai berikut :
 
<pre><code>
h1 {
 text-align: left;
}

h2 {
 text-align: center;
}
</code></pre>
<pre><code>
</code></pre>
<pre><code><pre style="color: black;"><code>h3 {
 text-align: right;
}</code></pre>
</code></pre>
<pre><code>
</code></pre>
Penjelasan :
 
<ul>
<li>Dengan script CSS di atas, elemen dengan tag h1 akan tersusun rata kiri, elemen h2 akan tersusun rata tengah, dan elemen h3 akan tersusun rata kanan.</li>
</ul>
<a class="coba" href="http://batweber.greengaluh.com/css_text_alignment.html" target="_blank">Coba sendiri di sini</a>
</div>
<div>
 
 
C. TEXT DECORATION 
 
text-decoration biasa digunakan untuk menghapus decoration berupa garis bawah dari sebuah teks. Contoh penggunaannya pada CSS adalah sebagai berikut :
 
<pre><code>
h1 {
 text-decoration: none;
}</code></pre>
<pre><code><pre style="color: black;"><code>h2 {
 text-decoration: overline;
}</code></pre>
</code></pre>
<pre><code><pre style="color: black;"><code>h3 {
 text-decoration: line-through;
}</code></pre>
<pre style="color: black;"><code><pre><code>h4 {
 text-decoration: underline;
}</code></pre>
</code></pre>
</code></pre>
Penjelasan :
 
<ul>
<li>Dengan script CSS di atas, elemen dengan tag h1 tidak akan diberi decoration apapun.</li>
<li>Elemen dengan tag h2 akan diberi garis atas.</li>
<li>Elemen dengan tag h3 akan diberi garis yang mencoret teks.</li>
<li>Elemen dengan tag h4 akan diberi garis bawah.</li>
</ul>
<a class="coba" href="http://batweber.greengaluh.com/css_text_decoration.html" target="_blank">Coba sendiri di sini</a>
</div>
<div>
 
 
D. TEXT TRANSFORMATION 
 
text-transform adalah properti yang digunakan untuk mengatur kapitalisasi dari sebuah teks. Misal mengatur sebuah teks apakah akan dijadikan huruf kapital semua, apakah hanya awalnya saja, atau dijadikan huruf kecil semua. Contoh penggunaannya pada CSS adalah sebagai berikut :
 
<pre><code>
p.uppercase {
 text-transform: uppercase;
}
p.lowercase {
 text-transform: lowercase;
}</code></pre>
<pre><code>p.capital {
 text-transform: capitalize;
}</code></pre>
Penjelasan :
 
<ul>
<li style="text-align: justify;">Dengan script CSS di atas, elemen paragraf dengan class uppercase akan dijadikan huruf kapital secara keseluruhan.</li>
<li style="text-align: justify;">Elemen paragraf dengan class lowercase akan dijadikan huruf kecil seluruhnya.</li>
<li style="text-align: justify;">Elemen paragraf dengan class capital akan dijadikan huruf kapital di setiap awal kata.</li>
</ul>
<a class="coba" href="http://batweber.greengaluh.com/css_text_transformation.html" target="_blank">Coba sendiri di sini</a>
</div>
<div>
 
 
E. TEXT INDENTATION 
 
text-indent adalah properti yang digunakan untuk mengatur ukuran seberapa jauh baris pertama menjorok. Contoh penggunaannya pada CSS adalah sebagai berikut :
 
<pre><code>
p {
 text-indent: 10px;
}</code></pre>
<pre></pre>
Penjelasan :
 
<ul>
<li style="text-align: justify;">Dengan script CSS di atas, elemen paragraf dalam file HTML yang kita buat akan menjorok ke dalam sejauh 10 piksel.</li>
</ul>
<a class="coba" href="http://batweber.greengaluh.com/css_text_indent.html" target="_blank">Coba sendiri di sini</a>
</div>
<div>
 
 
F. LETTER SPACING 
 
letter-spacing adalah properti yang digunakan untuk mengatur jarak antar huruf. Contoh penggunaannya pada CSS adalah sebagai berikut :
 
<pre><code>
p {
 letter-spacing: 2px;
}</code></pre>
<pre></pre>
 
Penjelasan :
 
<ul>
<li style="text-align: justify;">Dengan script CSS di atas, Setiap huruf pada elemen paragraf dalam file HTML yang kita buat akan diberi jarak sebanyak 2 piksel.</li>
</ul>
<a class="coba" href="http://batweber.greengaluh.com/css_letter_spacing.html" target="_blank">Coba sendiri di sini</a>
</div>
<div>
 
 
G. LINE HEIGHT 
 
line-height adalah properti yang digunakan untuk mengatur jarak antar baris. Contoh penggunaannya pada CSS adalah sebagai berikut :
 
<pre><code>
p {
 line-height: 0.8;
}</code></pre>
<pre></pre>
 
Penjelasan :
 
<ul>
<li style="text-align: justify;">Dengan script CSS di atas, Setiap baris pada elemen paragraf dalam file HTML yang kita buat akan diberi jarak 0.8 inchi.</li>
</ul>
<a class="coba" href="http://batweber.greengaluh.com/css_line_height.html" target="_blank">Coba sendiri di sini</a>
</div>
<div>
 
 
H. TEXT DIRECTION 
 
direction adalah properti yang digunakan untuk menentukan apakah kita akan menulis dari kiri ke kanan, atau kanan ke kiri. Ya, kita bisa merubah teks menjadi ditulis dari kanan. Contoh penggunaannya pada CSS adalah sebagai berikut :
 
<pre><code>
p {
 direction: rtl;
}</code></pre>
<pre></pre>
Penjelasan :
 
<ul>
<li style="text-align: justify;">Dengan script CSS di atas, Paragraf yang kita tulis akan berorientasi dari kanan ke kiri. rtl di sana berarti right to left.</li>
</ul>
<div>
<a class="coba" href="http://batweber.greengaluh.com/css_text_direction.html" target="_blank">Coba sendiri di sini</a></div>
<div>
</div>
<div style="text-align: justify;">
</div>
 
 
I. WORD SPACING</div>
 
word-spacing adalah properti yang digunakan untuk mengatur jarak antar kata. Contoh penggunaannya pada CSS adalah sebagai berikut :
 
<pre><code>
p {
 word-spacing: 4px;
}</code></pre>
Penjelasan :
 
<ul>
<li style="text-align: justify;">Dengan script CSS di atas, Setiap kata pada elemen paragraf dalam file HTML yang kita buat akan diberi jarak sebanyak 5 piksel.</li>
</ul>
<div>
<a class="coba" href="http://batweber.greengaluh.com/css_word_spacing.html" target="_blank">Coba sendiri di sini</a></div>
<div style="text-align: justify;">
<div style="text-align: justify;">
 
 
Demikian Belajar CSS Part 8 tentang Text Formatting, semoga bermanfaat. 
Terima kasih dan wassalamu'alaikum warohmatullaahi wabarokaatuh. </div>
</div>
</div>

Belajar CSS Part 8 - Text Formatting

Assalamu'alaikum warohmatullaahi wabarokaatuh. Pada artikel kali ini kita akan mempelajari tentang Text Formatting . Dengan fung...

Belajar CSS Part 7 - Height dan Width (Pengaturan Tinggi dan Lebar Elemen)

<li>Script di atas akan mengatur elemen gambar sehingga memiliki tinggi 200 pixel dan lebar 100 pixel</li>
 
<div>
 
<a class="coba" href="http://batweber.greengaluh.com/css_height_width.html" target="_blank">Coba sendiri di sini</a> 
 
 </div>
<div>
</div>
<div>
</div>
B. MENGATUR MAX-WIDTH
 
<div style="text-align: justify;">
Kita juga bisa menggunakan properti max-width untuk pengaturan lebar sebuah elemen. Max-width merupakan properti untuk mengatur lebar maksimal dari sebuah elemen. Perbedaannya dengan width, max-width memiliki fungsi lebih fleksibel. Elemen yang kita gunakan (misalnya gambar) akan secara otomatis menyesuaikan dengan lebar aslinya selama belum menyentuh batas max-width.</div>
<div>
Contoh :</div>
<div>
</div>
<div>
<pre><code>div {
height : 200px;
max-width : 100px;
}</code></pre>
<pre><code>
</code></pre>
Dengan script  di atas, sebuah elemen div akan memiliki tinggi tetap, yaitu 200 pixel. Namun lebar dari elemen tersebut akan menyesuaikan dengan lebar browser dengan catatan tidak melebihi dari 100 pixel. 
 
<a class="coba" href="http://batweber.greengaluh.com/css_height_maxwidth.html" target="_blank">Coba sendiri di sini</a> 
 
 
Demikian Belajar CSS tentang Pengaturan Tinggi dan Lebar (Height dan Width), semoga bermanfaat.
Terima kasih dan wassalamu'alaikum warohmatullaahi wabarokaatuh.
</div>

Belajar CSS Part 7 - Height dan Width (Pengaturan Tinggi dan Lebar Elemen)

Assalamu'alaikum warohmatullaahi wabarokaatuh Kali ini kita akan mempelajari tentang pengaturan tinggi dan lebar dari sebuah e...

Belajar CSS Part 6 - Padding

</div>
</div>

Belajar CSS Part 6 - Padding

Assalamu'alaikum warohmatullaahi wabarokaatuh Dalam Seri Belajar CSS kali ini kita akan mempelajari tentang padding . Padding adal...

Belajar CSS Part 5 - Margin

Belajar CSS Part 5 - Margin

Assalamu'alaikum Warohmatullaahi Wabarokaatuh. Dalam Seri Belajar CSS kali ini kita akan mempelajari tentang penggunaan Margin. ...

Belajar CSS Part 4 - Border

<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKI-OMpOUPrqrQEUr8Ga8mvoPzH2pBW2-Faz1bAZtNtOu7Rssw1fXyo0s0gjih5W7um0BmaUMjdzoBpWpMErWUwV5Yo0L54FeFhj-YoaGntAljWSuHG6y0ksKPShT0xAleyAP3gzaQwPQ/s1600/tutorial_css.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Belajar CSS Part 4 - Border" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKI-OMpOUPrqrQEUr8Ga8mvoPzH2pBW2-Faz1bAZtNtOu7Rssw1fXyo0s0gjih5W7um0BmaUMjdzoBpWpMErWUwV5Yo0L54FeFhj-YoaGntAljWSuHG6y0ksKPShT0xAleyAP3gzaQwPQ/s1600/tutorial_css.jpg" title="Belajar CSS Part 4 - Border" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
Assalamu'alaikum Warohmatullaahi Wabarokaatuh. 
 
 
<div style="text-align: justify;">
Border merupakan garis batas sebuah elemen. Dengan CSS kita bisa mengatur style, width, dan warna dari border tersebut.</div>
 
 
A. BORDER STYLE 
 
<div style="text-align: justify;">
Border Style digunakan untuk mendefinisikan jenis tampilan dari sebuah border. Value yang digunakan dalam pengaturan border style adalah sebagai berikut :</div>
<ul>
<li>dotted</li>
<li>dashed</li>
<li>solid</li>
<li>double</li>
<li>groove</li>
<li>ridge</li>
<li>inset</li>
<li>outset</li>
<li>none</li>
<li>hidden</li>
</ul>
<div>
Berikut merupakan contoh penggunaannya :</div>
<div>
<pre><code>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style</code>: dotted dashed solid double;}</pre>
 
Berikut hasilnya : 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0t_x-KaBXnzj_vQQ6MYLrUQ2_Nnv9aE53XKDClw8b2Py30TbGOEmZRGHCV-O3Iv_e-e6LkUBzkcLwL_OxkeeWcBlSBFMGXO23fEKZn3ezXs_uW9trVdlQgTH6cqcioJTD9xLVUnjCicc/s1600/Tutorial+CSS+Part+4+-+Border.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial CSS Border" border="0" height="512" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0t_x-KaBXnzj_vQQ6MYLrUQ2_Nnv9aE53XKDClw8b2Py30TbGOEmZRGHCV-O3Iv_e-e6LkUBzkcLwL_OxkeeWcBlSBFMGXO23fEKZn3ezXs_uW9trVdlQgTH6cqcioJTD9xLVUnjCicc/s640/Tutorial+CSS+Part+4+-+Border.png" title="Tutorial CSS Part 4 - Border" width="640" /></a></div>
 
<a class="coba" href="http://batweber.greengaluh.com/css_border.html" target="_blank">Coba sendiri di sini</a> 
 
 
B. BORDER WIDTH 
 
<div style="text-align: justify;">
Border Width digunakan untuk mengatur ketebalan dari border. Value dari Border Width bisa didefinisikan dalam nilai spesifik (dalam satuan px, cm, in, dsb.) atau dengan value yang telah didefinisikan yaitu thin (tipis), medium (menengah), atau thick (tebal).</div>
 
Contoh : 
 
 
<pre><code>p.satu {</code></pre>
<pre><code>border-style: solid;</code></pre>
<pre><code><pre style="color: black;"><code>border-width: 5px;</code></pre>
}</code></pre>
<pre>p.dua {</pre>
<pre><code>border-style: solid;</code></pre>
<pre><code>border-width: medium;</code></pre>
<pre><code>}</code></pre>
<pre><code><pre style="color: black;"><code>border-style: solid;</code></pre>
</code><code><pre style="color: black;">p.tiga {</pre>
</code><code><pre style="color: black;"><code>border-width: 3px 10px 5px 4px;</code></pre>
</code><code></code><code><pre style="color: black;"><code>}</code></pre>
</code><code></code><code>
</code></pre>
Penjelasan :
 
<ul>
<li style="text-align: justify;">p.satu menandakan paragraf dengan nama class satu didefinisikan dengan ketebalan 5 pixel</li>
<li style="text-align: justify;">p.dua menandakan paragraf dengan nama class dua didefinisikan dengan ketebalan menengah</li>
<li style="text-align: justify;">p.tiga menandakan paragraf dengan nama class tiga diberi ketebalan masing-masing border atas 3 pixel, border kanan 10 pixel, border bawah 5 pixel, dan border kiri 4 pixel</li>
</ul>
 <a class="coba" href="http://batweber.greengaluh.com/css_border_width.html" target="_blank">Coba sendiri di sini</a> 
 
<ul>
</ul>
<div>
C. BORDER COLOR</div>
</div>
<div>
 </div>
<div>
<div style="text-align: justify;">
Border Color digunakan untuk mendefinisikan warna dari border. Pendefinisian value warna dapat dilakukan dengan beberapa cara, yaitu :</div>
</div>
<div>
<ul>
<li>Dengan nama warna. Contoh "red", "green", dsb.</li>
<li>Dengan nilai hexa. Contoh "#ff0000", "#00ff00", dsb.</li>
<li>Dengan nilai RGB. Contoh "rgb(255,0,0)", "rgb (0,255,0)", dsb.</li>
<li>Dengan nilai HSL. Contoh "hsl(100%,0,0)", "hsl(0,100%,0)", dsb.</li>
<li>Dengan nilai transparent.</li>
</ul>
<div>
<div style="text-align: justify;">
Penjelasan tentang penyisipan warna bisa Anda baca di <a href="http://batweber.blogspot.co.id/2015/12/belajar-html-part-19-penyisipan-warna.html" target="_blank">Belajar HTML Part 19 - Penyisipan Warna</a>. </div>
</div>
</div>
<div>
<div style="text-align: justify;">
Seperti halnya border width, kita bisa mengatur warna setiap sisi secara terpisah yaitu secara berurutan border atas, border kanan, border bawah, dan border kiri.</div>
</div>
<div>
Contoh : 
 
 
<pre><code>p.satu {</code></pre>
<pre><code>border-style: solid;</code></pre>
<pre><code><pre style="color: black;"><code>border-color: red;</code></pre>
</code></pre>
<pre><code>}</code></pre>
<pre>p.dua {</pre>
<pre><code>border-style: solid;</code></pre>
<pre><code>border-color: red green blue yellow;</code></pre>
<pre><code>}</code></pre>
<pre><code> </code></pre>
Penjelasan : 
<ul>
<li>p.satu menandakan paragraf dengan nama class satu diberi warna merah</li>
<li style="text-align: justify;">p.tiga menandakan paragraf dengan nama class tiga diberi warna masing-masing border atas merah, border kanan hijau, border bawah biru, dan border kiri kuning</li>
</ul>
 <a class="coba" href="http://batweber.greengaluh.com/css_border_color.html" target="_blank">Coba sendiri di sini</a> 
 
<ul>
</ul>
<div>
D. PENDEFINISIAN SETIAP SISI SECARA TERPISAH</div>
</div>
<div>
 </div>
<div>
<div style="text-align: justify;">
Kita juga bisa mendefinisikan warna dari setiap sisi atas, kanan, bawah, dan kiri secara terpisah. Berikut contoh penggunaannya :</div>
</div>
<div>
 </div>
<div>
<pre><code>p.satu {</code></pre>
<pre><code>border-top-style: dotted;</code></pre>
<pre><code><pre style="color: black;"><code>border-right-style: solid;</code></pre>
<pre style="color: black;"><pre><code>border-bottom-style: double;</code></pre>
<pre><code>border-left-style: dashed;</code></pre>
</pre>
</code></pre>
<pre><code>}</code></pre>
<pre><code><pre style="color: black;"><code>p.dua {</code></pre>
<pre style="color: black;"><code>border-style: dotted solid;</code></pre>
<pre style="color: black;"><code>}</code></pre>
</code></pre>
<pre><code>
</code></pre>
Penjelasan : 
<ul>
<li style="text-align: justify;">p.satu diberi nilai berbeda di tiap sisi yaitu dotted untuk border atas, solid untuk border kanan, double untuk border bawah, dan dashed untuk border kiri.</li>
<li style="text-align: justify;">p.dua diberi dua nilai berbeda di tiap sisi yaitu dotted untuk border atas dan bawah, dan solid untuk border kanan dan kiri.</li>
</ul>
<a class="coba" href="http://batweber.greengaluh.com/css_border_deklarasi_terpisah.html" target="_blank">Coba sendiri di sini</a> 
 
 
<ul>
</ul>
<div>
E. SHORTHAND PROPERTY</div>
<div>
 </div>
<div style="text-align: justify;">
Semua kode di atas bisa kita ringkas dengan menggunakan metode shorthand property. Yaitu dengan menggunakan banyak deklarasi ke dalam satu kali deklarasi. Untuk lebih jelasnya, berikut contoh penggunaannya :</div>
<div>
 </div>
 
<pre><code><pre style="color: black;"><code>p {</code></pre>
<pre style="color: black;"><code>border : 5px solid red;</code></pre>
<pre style="color: black;"><code>}</code></pre>
</code></pre>
<div>
</div>
 
<div>
</div>
<div>
Penjelasan :</div>
<div>
<ul>
<li style="text-align: justify;">Dengan script di atas, kita mendefinisikan seluruh paragraf dalam dokumen yang kita buat akan diberi border setebal 5 pixel, style solid, dan warna merah.</li>
<li style="text-align: justify;">Dengan menggunakan shorthand property, kita bisa mendefinisikan semuanya dengan lebih ringkas.</li>
</ul>
 <a class="coba" href="http://batweber.greengaluh.com/css_border_shorthand_property.html" target="_blank">Coba sendiri di sini</a> 
 
 
<ul>
</ul>
<div style="text-align: justify;">
Demikian Seri Belajar CSS tentang Border. Semoga bermanfaat. Aamiin.</div>
</div>
<div style="text-align: justify;">
Terima kasih dan</div>
<div style="text-align: justify;">
Wassalamu'alaikum Warohmatullaahi Wabarokaatuh.</div>
</div>

Belajar CSS Part 4 - Border

Assalamu'alaikum Warohmatullaahi Wabarokaatuh. Border merupakan garis batas sebuah elemen. Dengan CSS kita bisa mengatur...

Belajar CSS Part 3 - Background

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKI-OMpOUPrqrQEUr8Ga8mvoPzH2pBW2-Faz1bAZtNtOu7Rssw1fXyo0s0gjih5W7um0BmaUMjdzoBpWpMErWUwV5Yo0L54FeFhj-YoaGntAljWSuHG6y0ksKPShT0xAleyAP3gzaQwPQ/s1600/tutorial_css.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial CSS Background" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKI-OMpOUPrqrQEUr8Ga8mvoPzH2pBW2-Faz1bAZtNtOu7Rssw1fXyo0s0gjih5W7um0BmaUMjdzoBpWpMErWUwV5Yo0L54FeFhj-YoaGntAljWSuHG6y0ksKPShT0xAleyAP3gzaQwPQ/s1600/tutorial_css.jpg" title="Tutorial CSS Part 3 - Background" /></a></div>
 
Assalamu'alaikum warohmatullaahi wabarokatuh. 
 
<div style="text-align: justify;">
Properties background digunakan untuk mengatur efek latar belakang dari sebuah elemen. Kita bisa memilih background dengan dua pilihan :</div>
<ul>
<li>Background warna</li>
<li>Background gambar</li>
</ul>
<div>
A. BACKGROUND WARNA</div>
<div>
 </div>
<div style="text-align: justify;">
Opsi pertama, kita bisa menggunakan background warna. Kelebihan dari menggunakan background warna, yaitu lebih fleksibel dan lebih ringan. </div>
<div style="text-align: justify;">
Untuk menggunakan background warna kita bisa menggunakan nama warna, kode Hexa, ataupun kode RGB. Penjelasan tentang kode-kode ini bisa Anda lihat di <a href="http://batweber.blogspot.co.id/2015/12/belajar-html-part-19-penyisipan-warna.html" target="_blank">Belajar HTML Part 19 tentang Penyisipan Warna</a>. Berikut contoh script untuk menggunakan background warna :</div>
<pre><code>
h1 {
 background-color: green;
}
div {
 background-color: #ff0000;
}
p {
 background-color: rgb(0,0,255);
}
</code>
</pre>
Penjelasan :
 
<ul>
<li>Dengan script di atas, elemen h1 akan memiliki background berwarna hijau. Elemen div akan memiliki background berwarna merah, dan elemen p akan memiliki background biru.</li>
</ul>
 <a class="coba" href="http://batweber.greengaluh.com/css_background.html" target="_blank">Coba sendiri di sini</a> 
  
<ul>
</ul>
<div>
B. BACKGROUND GAMBAR</div>
<div>
 </div>
<div>
Opsi kedua, kita bisa menggunakan gambar sebagai background. Dengan menggunakan background gambar, kita bisa menambahkan beberapa pengaturan tambahan :</div>
<div>
<ul>
<li>background-repeat</li>
<li>background-position</li>
<li>background-attachment</li>
</ul>
<div>
Berikut contoh script-nya :</div>
</div>
<div>
 </div>
<div>
<pre><code>body {
 background-image: url("gambar/contoh_bg_gambar.jpg");
 background-repeat: repeat-x;
 background-attachment: fixed;</code></pre>
<pre><code><pre><code style="background-color: black;"> background-position: right top;</code></pre>
}</code></pre>
</div>
<div>
 </div>
<div>
Penjelasan :</div>
<div>
<ul>
<li>background-image digunakan untuk memilih gambar yang akan digunakan. lokasi gambar kita tulis dalam tanda kurung. Dalam contoh di atas, gambar yang digunakan untuk background bernama contoh_bg_gambar.jpg yang berlokasi di dalam folder gambar. Anda bisa mengubahnya sesuai kebutuhan.</li>
<li>background-repeat digunakan untuk mengatur pengulangan gambar. repeat-x berarti gambar akan berulang secara horizontal. Jika ingin gambar berulang secara vertikal, kita bisa menggunakan repeat-y</li>
<li>background-attachment : fixed; berarti gambar tidak akan mengikuti tampilan layar jika di-scroll</li>
<li>background-position digunakan untuk mengatur posisi gambar. right top berarti gambar akan berada di posisi kanan atas.</li>
</ul>
<a class="coba" href="http://batweber.greengaluh.com/css_background_image.html" target="_blank">Coba sendiri di sini</a> 
 
<ul>
</ul>
<div>
C. BACKGROUND SHORTHAND PROPERTY</div>
</div>
<div>
 </div>
<div>
Background Sorthand Property maksudnya, kita bisa meringkas seluruh property dalam satu kali deklarasi. Caranya bisa kita lihat dalam contoh berikut :</div>
<div>
 </div>
<div>
<pre><code>body {
 background: #ffffff url("gambar/contoh_bg_gambar.jpg") repeat-x fixed </code>right top;</pre>
<pre><code>}</code></pre>
<pre><code>
</code></pre>
Dalam contoh di atas, kita meringkas seluruh deklarasi dalam satu property. 
 
 <a class="coba" href="http://batweber.greengaluh.com/css_background_shorthand_property.html" target="_blank">Coba sendiri di sini</a> 
 
 
Demikian Seri Belajar CSS tentang Background, Semoga bermanfaat. 
Terima kasih, wassalamu'alaikum warohmatullaahi wabarokaatuh.</div>

Belajar CSS Part 3 - Background

Assalamu'alaikum warohmatullaahi wabarokatuh. Properties background digunakan untuk mengatur efek latar belakang dari sebuah ele...

Belajar CSS Part 2 - Selector dan Komentar

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKI-OMpOUPrqrQEUr8Ga8mvoPzH2pBW2-Faz1bAZtNtOu7Rssw1fXyo0s0gjih5W7um0BmaUMjdzoBpWpMErWUwV5Yo0L54FeFhj-YoaGntAljWSuHG6y0ksKPShT0xAleyAP3gzaQwPQ/s1600/tutorial_css.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial CSS Selector dan Komentar " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKI-OMpOUPrqrQEUr8Ga8mvoPzH2pBW2-Faz1bAZtNtOu7Rssw1fXyo0s0gjih5W7um0BmaUMjdzoBpWpMErWUwV5Yo0L54FeFhj-YoaGntAljWSuHG6y0ksKPShT0xAleyAP3gzaQwPQ/s1600/tutorial_css.jpg" title="Tutorial CSS Part 2 - Selector dan Komentar " /></a></div>
 
Assalamu'alaikum warohmatullaahi wabarokatuh. 
 
 
<div style="text-align: justify;">
Kali ini kita akan mempelajari tentang selector dan komentar dalam CSS. Tentang apa itu selector sudah kami bahas pada <a href="http://batweber.blogspot.co.id/2015/12/belajar-css-part-1-mengenal-css-dan-sintaks-dasar-css.html" target="_blank">Belajar CSS Part 1 tentang Pengenalan dan Sintaks Dasar CSS</a>. Sedangkan komentar, tidak berbeda fungsinya dengan <a href="http://batweber.blogspot.co.id/2015/12/belajar-html-part-9-komentar.html" target="_blank">komentar pada HTML</a>, yaitu agar sebuah script tidak diproses oleh browser. Yang berbeda hanya dari segi cara penyisipannya saja.</div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
A. SELECTOR</div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
1. Element Selector </div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
Element Selector digunakan untuk memilih elemen biasa yang akan digunakan untuk menyeleksi elemen biasa. Lebih jelanya kita simak contoh berikut ini :</div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
<code>p { font-size:12px;}</code></div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
Yang menjadi element selector di sana adalah p. Dengan demikian semua tag pada dokumen HTML yang disisipi file CSS tersebut akan memiliki font-size atau ukuran font 12 pixel.</div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
2. Id Selector</div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
Id selector digunakan untuk menyeleksi elemen yang telah diberi atribut id tertentu. id selector ditandai dengan tanda pagar(#). Contoh :</div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
<code>#paragrafkhusus {font-size:16px;}</code></div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
Dengan id selector di atas sebuah elemen yang diberi id paragrafkhusus akan memiliki ukuran font 16 pixel. 
 
<a class="coba" href="http://batweber.greengaluh.com/paragraf_khusus.html" target="_blank">Coba sendiri di sini</a></div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
 
3. Class Selector</div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
Class Selector akan menyeleksi elemen dalam sebuah dokumen HTML dengan class tertentu. Untuk mempelajari tentang Class pada HTML, Anda bisa membaca <a href="http://batweber.blogspot.co.id/2015/12/belajar-html-part-16-class.html" target="_blank">artikel </a><a href="http://batweber.blogspot.co.id/2015/12/belajar-html-part-16-class.html" target="_blank">pada link ini</a>. </div>
<div style="text-align: justify;">
Perbedaan id dengan class adalah, id hanya bisa digunakan satu kali di setiap halaman HTML, sedangkan class bisa digunakan berkali-kali dalam sebuah file HTML. </div>
<div style="text-align: justify;">
Class Selector ditandai dengan tanda titik(.). Contoh :</div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
<code>.paragraftertentu {font-size:14px;}</code></div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
Dengan script di atas, maka setiap elemen yang diberi class paragraftertentu akan memiliki font dengan ukuran 14 pixel. 
 
<a class="coba" href="http://batweber.greengaluh.com/paragraf_tertentu.html" target="_blank">Coba sendiri di sini</a></div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
 
4. Pengelompokan selector</div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
Jika beberapa elemen, class, ataupun id memiliki declaration yang sama, maka kita bisa mengelompokkannya dengan memberi koma(,) sebagai pemisah masing-masing elemen. Contoh :</div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
<code>h1, h2, p {</code></div>
<div style="text-align: justify;">
text-align : center;</div>
<div style="text-align: justify;">
color : red;</div>
<div style="text-align: justify;">
}</div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
Dengan script di atas, semua elemen <h1>, <h2>, dan pada sebuah file HTML akan rata tengah dan memiliki teks berwarna merah. 
 
<a class="coba" href="http://batweber.greengaluh.com/pengelompokkan_selector.html" target="_blank">Coba sendiri di sini</a></div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
 
B. KOMENTAR</div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
Komentar pada CSS dimulai dengan tanda slash dan bintang (/*) dan diakhiri dengan bintang dan slash (*/). Contoh : </div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
<code>/* ini adalah komentar </code></div>
<div style="text-align: justify;">
komentar tidak akan diproses oleh browser, </div>
<div style="text-align: justify;">
namun akan mempermudah pembuat script*/</div>
<div style="text-align: justify;">
p {text-align:center;}</div>
<div style="text-align: justify;">
 
<a class="coba" href="http://batweber.greengaluh.com/komentar.html" target="_blank">Coba sendiri di sini</a> 
 
 </div>
<div style="text-align: justify;">
Demikian Seri Belajar CSS tentang Selector dan Komentar. Semoga bermanfaat. 
Terima kasih, wassalamu'alaikum warohmatullaahi wabarokaatuh.</div>

Belajar CSS Part 2 - Selector dan Komentar

Assalamu'alaikum warohmatullaahi wabarokatuh. Kali ini kita akan mempelajari tentang selector dan komentar dalam CSS . Tentang...

Belajar CSS Part 1 - Mengenal CSS dan Sintaks Dasar CSS

<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8l7r-ebnBUYWfjHx4N7-mhoeD6hyphenhyphenKMsAIgQA3XmB5yLJlnbecxplNAZWjvBLSqhFWBgc8REPG13rrSePzftiDg2LKjEeuqDzLCz4uOwep6GRNgpP76tRSZjzLuQ60fZw7bsBcjQlp964/s1600/tutorial_css.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tutorial CSS Mengenal CSS dan Sintaks Dasar CSS" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8l7r-ebnBUYWfjHx4N7-mhoeD6hyphenhyphenKMsAIgQA3XmB5yLJlnbecxplNAZWjvBLSqhFWBgc8REPG13rrSePzftiDg2LKjEeuqDzLCz4uOwep6GRNgpP76tRSZjzLuQ60fZw7bsBcjQlp964/s1600/tutorial_css.jpg" title="Tutorial CSS Part 1 - Mengenal CSS dan Sintaks Dasar CSS" /></a></div>
 
Assalamu'alaikum warohmatullaahi wabarokaatuh. 
 
 
<div style="text-align: justify;">
Selamat datang di Seri Belajar CSS BatWeber. Kali ini kita akan mulai mempelajari CSS. Untuk mempelajari CSS ini, disarankan Anda harus mengenal HTML terlebih dahulu. Jika Anda ingin mempelajari HTML terlebih dahulu, Anda bisa mulai mencarinya <a href="http://batweber.blogspot.co.id/search/label/Belajar%20HTML" target="_blank">di sini</a>. </div>
<div style="text-align: justify;">
Sebelumnya, kami juga pernah membahas tentang <a href="http://batweber.blogspot.co.id/2015/12/belajar-html-part-10-kombinasi-dengan-css.html" target="_blank">kombinasi HTML dengan CSS</a>. Disarankan Anda memahami artikel tersebut terlebih dahulu.</div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
Ok, kita langsung saja.</div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
A. APA ITU CSS?</div>
<div style="text-align: justify;">
</div>
<ul>
<li>CSS merupakan singkatan dari Cascading Style Sheet</li>
<li>CSS berfungsi untuk mengatur bagaimana sebuah file HTML ditampilkan pada sebuah halaman web</li>
<li>Ekstensi dari sebuah file CSS adalah .css</li>
</ul>
<div>
B. SINTAKS DASAR CSS</div>
<div>
 </div>
<div>
Sintaks dasar CSS terdiri dari selector dan  declaration atau bisa didefinisikan sebagai berikut :</div>
<div>
 </div>
<code style="background-color: black;">
selector {declaration}
</code>
 
<code> </code>
 
<div style="text-align: justify;">
Declaration itu sendiri terdiri dari dua komponen yaitu property dan value. Berikut sintaks lengkapnya : 
 
<code style="background-color: black;">selector {property:value;}</code> 
<ul>
<li>Selector adalah elemen yang dipilih dari HTML untuk diatur tampilannya</li>
<li>Declaration adalah pengaturan tampilan yang akan kita terapkan pada selector</li>
<li>Property adalah properti yang akan diubah dari selector (misal : lebar, warna, dsb)</li>
<li>Value adalah nilai yang diberikan terhadap property (misal : hijau atau merah untuk warna, dsb)</li>
</ul>
<div>
Contoh penggunaannya adalah sebagai berikut : 
 </div>
</div>
<code style="background-color: black;">
h1 {color:blue;background-color:red;} </code> 
 
Script di atas berarti : 
<ul>
<li>h1 sebagai selector </li>
<li>color:blue; dan background-color:red; sebagai declaration</li>
<li>color dan background-color sebagai property</li>
<li>blue dan red sebagai value</li>
</ul>
<div style="text-align: justify;">
Dengan menggunakan script di atas dalam file CSS kita, maka setiap file HTML yang memuat file tersebut akan memiliki elemen <h1> dengan teks berwarna biru dan background berwarna merah. 
 
atau Anda juga bisa mencoba langsung  : 
 
<a class="coba" href="http://batweber.greengaluh.com/syntaks_dasar_css.html" target="_blank">Coba sendiri di sini</a></div>
<div style="text-align: justify;">
 
 </div>
<div style="text-align: justify;">
Demikian Pengenalan CSS dan Sintaks Dasar CSS. Semoga artikel ini bermanfaat.</div>
<div style="text-align: justify;">
Terima kasih, wassalamu'alaikum warohmatullaahi wabarokaatuh.</div>

Belajar CSS Part 1 - Mengenal CSS dan Sintaks Dasar CSS

Assalamu'alaikum warohmatullaahi wabarokaatuh. Selamat datang di Seri Belajar CSS BatWeber. Kali ini kita akan mulai mempela...