MATERI WEB & HTML bag 4

BAB 4

CASCADING STYLE SHEET

Cascading Style Sheet ( CSS ) digunakan dalam kode HTML untuk menciptakan suatu kumpulan style yang terkadang dapat digunakan untuk memperluas kemampuan HTML. Sebagai contoh, kode HTML murni tidak memungkinkan untuk menggunakan sebuah definisi font yang diterapkan pada setiap sel dan bahkan tag pun tak berpengaruh pada sel-sel tabel. Misalnya, diinginkan untuk mengaturukuran font pada setiap sel sebesar 2. Dengan menggunakan tag semua sel harus diformat dengan menggunakan font size="2".

Tentu saja tindakan seperti ini tidak praktis. Namun, dengan menggunakan CSS, kita hanya perlu mendefinisikan style sekali saja dan style akan berlaku untuk setiap sel dalam tabel. Kode-kode CSS:

<STYLE>...</STYLE >

digunakan untuk mendefinisikan style sheet dengan menggunakan CSS.

Di dalam tag ini terdapat atribut "text/css".

Komentar dalam CSS menggunakan pasangan /* dan */.

1. Mengatur font dan teks
   Dalam pengaturan font dan teks, CSS mendukung sejumlah property seperti:
   • Font-family = untuk menentukan nama font
     Contoh: font-family:arial;
     Atau bisa juga nama font yang disebutkan lebih dari satu.
     Contoh: font-family:verdana,arial,Helvetica;
     Yang berarti font yang digunakan adalah verdana, apabila verdana tidak ada maka akan digunakan font arial dan seterusnya.
   • Font-size = untuk menentukan ukuran font
     Nilai yang dapat dimasukkan dalam property ini:

     xx-small = sangat kecil x-smal = agak lebih kecil small = kecil medium = sedang large = besar x-large = agak lebih besar xx-large = sangat besar 

     atau dapat juga dengan menggunakan satuan:
     px = pixel in = inchi cm = centimeter mm = millimeter pt = titik pc = pica em = tinggi font en = separuh tinggi font
   • Text-decoration

     None = teks tidak diapa-apakan Underline = teks digarisbawahi Line-through = teks dicoret Blink = teks berkedip Overline = teks diberi garis diatasnya Font-style = normal, italic, oblique Text-align = left, center, right, justify Font-weight = normal, bold, bolder, lighter 

   • Text-transform

       None = teks tidak dikonversi Capitalize = awal setiap kata dikonversi menjadi huruf capital Uppercase = setiap huruf kecil akan diubah menjadi huruf capital Lowercase = setiap huruf capital akan diubah menjadi huurf kecil 

2. mengatur bingkai
   • border-style

     none = nilai default solid = bentuk 2 dimensi double = bentuk 2 dimensi inset = bentuk 3 dimensi outset = bentuk 3 dimensi groove = bentuk 3 dimensi ridge = bentuk 3 dimensi dotted = berupa titik-titik dashed = berupa dash 

   • border-width = diisi sesuai dengan keinginan kita atau bisa juga dengan satuan px ( pixel )
   • border-color
     aqua = 00ffff; black = 000000; blue = 0000ff; fuchsia = ff00ff; gray = 808080; green = 008000; lime = 00ff00; maroon = 800000; navy = 000080; olive = 808000; purple = 800080; red = ff0000; silver = c0c0c0; teal = 008080; yellow = ffff00; white = ffffff
3. memberi jarak
   • padding-top = menentukan jarak dari tepi atas
   • padding-right = menentukan jarak dari tepi kanan
   • padding-bottom = mennetukan jarak dari tepi bawah
   • padding-left = menentukan jarak dari tepi kiri
4. mengatur warna kita dapat mengatur warna sesuai dengan keinginan kita. Kita dapat menggunkan kode seperti disebutkan dalam border-color diatas atau bias juga dengan menuliskan langsung warna yang kita kehendaki.
5. mengatur background
   cara penulisan kode background = background-image:url(gambar.jpg)
6. mengatur link
   • a : link [ link yang belum dikunjungi ]
   • a : visited [ link yang sudah dikunjungi ]
   • a : active [ link yang sedang aktif ]
7. penggunaan atribut id dalam tag

   #nama_id{property_1:nilai_1;...;property_n:linai_n;}

   Nama id dapat mengandung huruf, angka, atau karakter garis bawah. Karakter petama harus berupa huruf atau karakter garis bawah
8. penggunaan kelas

   .kelas{property_1:nilai_1;...;property_n:nilai_n;}

   dapat mengandung huruf, angka, atau karakter garis bawah karakter pertama harus berupa huruf atau karakter garis bawah
9. tag span
   Tag span dapat digunakan untuk mmeperluas kemampuan suatu style. Penerapannya dapat digunakan bersama-sama atribut style, class, dan id.
• span dengan atribut style

<span style="definisi">

...

</span>

• span dengan atribut class

<span class="namakelas">

...

</span>

• span dengan atribut id

<span id="nama_id">

..

</span>