MATERI

WELCOME TO

MATERI PEMROGRAMAN WEB

Memahami Anatomi dan Cara Kerja Cascading Style Sheet

1.Definisi dan fungsi cascading style sheet
Cascading Style Sheet atau lebih sering disebut dengan istilah CSS merupakan salah satu dokumen website untuk mengatur yang rtbeujuan gaya (style) tampilan website

penggunaan dari CSS dalam pembuatan web akan memberikan beberapa manfaat seperti berikut ini :
· Kode HTML menjadi lebih sederhana dan lebih mudah diatur.
· Ukuran file menjadi lebih kecil sehingga load file lebih cepat.
· Mudah untuk mengubah tampilan, hanya dengan mengubah file CSS saja.
· Dapat berkolaborasi dengan JavaScript dan merupakan pasangan setia HTML.
· Dapat digunakan dalam hampir semua jenis web browser.


Versi CSS Fitur CSS  
CSS 1
Fokus mengatur pemformatan dokumen HTML, seperti
- Font (Jenis ketebalan).
-Warna, teks, background dan
elemen lainnya.
- Text attributes, misalnya spasi
antar baris, kata dan huruf.
- Posisi teks, gambar, table dan elemen lainnya.
- Margin, border dan padiing.  
CSS 2 - Mengatur format dokumen untuk kebutuhan di cetak
dengan printer
- Posisi konten
- Downloadable
- Font huruf
- Table layout
- Media tipe yang  
CSS 3 -Sangat mendukung tampilan desain website
- Animasi warna bahkan sampai animasi 3D
- Menunjang kompabilitas website dengan smartphone
- CSS math
- CSS obyek model
- Mendukung fungsi multimedia pada website
- Beberapa efek teks, seperti teks berbayang, kolom
koran, dan "word-wrap"
-Jenis huruf eksternal, sehingga dapat menggunakan
huruf yang tidak termasuk "web-safe fonts".
-Beberapa efek pada kotak, seperti

Cara Kerja cascading style sheet
Cara kerja CSS dimulai saat deklarasi style yang diinginkan dengan menulis style (selektor, id dan class), maka secara otomatis style tersebut akan
bekerja pada dokumen HTML. Dengan mengatur selektor, id, dan class,
untuk kemudian id dan class tersebut kita sesuaikan dan terapkan pada
kode HTML . Dan secara otomatis pula CSS itu akan bekerja pada file HTML.

 External Style Sheet
<input type="submit" value="Login" class="btn"
onClick=parent.location="Home_Iframe.htm" />
CSS didefinisikan secara terpisah pada file yang berbeda. Dan selanjutnya file atau halaman web yang ingin menerapkan style pada file CSS tersebut tinggal memanggil file CSS tersebut. Cara ini umumnya digunakan pada satu aplikasi berbasis web sehingga tampilan antar halaman akan terlihat konsisten.





Menyajikan Cascading Style Sheet untuk Memformat Tampilan Teks

sytle dalam kemasan CSS

Properti Keterangan  
Color Mengatur warna dari teks  
Direction Menentukan arah tulisan/teks  
letter-spacing Menambah ataupun mengurangi spasi antar karakter dalam teks  
line-height Mengatur tinggi baris teks  
text-align Menentukan batas teks secara horisontal  
text-decoration Menentukan dekorasi/hiasan pada teks  
text-indent Menentukan jarak inden dari baris pertama dalam teks-blok  
text-shadow Menentukan efek bayangan pada teks  
text-transform Mengatur huruf besar-huruf kecil dari teks
 



   
vertical-align Menentukan batas teks secara horisontal  
white-space Menentukan penulisan white-space pada elemen  
word-spacing Menambah ataupun mengurangi spasi antar kata dalam teks