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
