pw

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