Pengenalan Style Sheets

Apa itu Style Sheets - Style Sheets merupakan feature yang sangat penting dalam membuat Dynamic HTML. Meskipun bukan merupakan suatu keharusan dalam membuat web, akan tetapi penggunaan style sheets merupakan kelebihan tersendiri. Suatu style sheet merupakan tempat dimana anda mengontrol dan memanage style-style yang ada. Style sheet mendeskripsikan bagaimana tampilan document HTML di layar. Anda juga bias menyebutnya sebagai template dari documents HTML yang menggunakanya. Anda juga bisa membuat efek-efek sepesial di web anda dengan menggunakan style sheet. Sebagai contoh anda bisa membuat style sheet yang mendefinisikan style untuk <H1> dengan style bold dan italic dan berwarna biru. Atau pada tag <P> yang akan di tampilkan dengan warna kuning dan menggunakan font verdana dan masih banyak lagi yang bisa anda lakukan dengan style sheet. Secara teoritis anda bisa menggunakan style sheet technology dengan HTML. Akan tetapi pada prakteknya hanya Cascading Style Sheet (CSS) technology yang support pada hampir semua web Browser. Karena CSS telah di setandartkan oleh World Wide Web Consortium (W3C) untuk di gunakan di web browser.

Penulisan Style Sheeets

Ada dua cara untuk merubah style dari web page anda yaitu dengan :
1.‰ Merubah inline style
‰2. Menulis script untuk merubah style anda.

Dengan meggunakan inline style anda dapat membuat dynamic style tanpa harus menambahkan script ke web anda. Inline styles merupakan style yang bisa kita pasang pada element web tertentu saja.

Contoh:

Jika anda ingin menambahkan style pada <H1> dengan warna merah, anda harus mengeset attribut STYLE dari tag <H1>.

<H1 STYLE=”color:red”>

jika anda ingin menggunakan script untuk memodifikasi inline style, anda dapat menggunakan Style Object. Style Object mensupport semua property yang di support CSS untuk style. Untuk menggunakan property

pada script :

1. Hilangkan tanda hubung “-” dari property CSS Style
2. Ganti huruf setelah tanda hubung menjadi Capital.

Contoh:
font-weight menjadi fontWeight
text-align menjadi textAlign

 Istilah-istilah dalam Style Sheet

Style rule
Cascading style sheet merupakan kumpulan aturan yang mendefinisikan style dari document. Sebagai contoh kita bisa membuat aturan style yang menentukan bahwa semua <H2> di tampilkan dengan warna orange.

Style sheet

Style sheet dapat dapat di embedded ke HTML document. Atau disebut embedded style sheet. Style sheet juga bisa dibuat sebagai external file dan di link ke document HTML. Style role bisa di kenakan pada bagian

tertentu dari web page. Sebagai contoh anda bisa menentukan paragraph tertentu di tampilkan dengan style bold dan italic sementara yang lain tetap seperti biasa.

Selector
selector { property1: value; property2:value, . . .}
H1{ color:green; background-color:orange}
Style sheets terdiri dari dua bagian:
1. Selector
Bagian pertama sebelum tanda “{}” disebut selector
2. Declaration
Terdiri dari property dan nilainya.

 Komentar dalam Style Sheets

Comments atau komentar biasanya di gunakan oleh programmer untuk memudahkan mengingat kembali script yang sudah di tulisnya, Comments di CSS hampir sama dengan comments di C atau C++ yaitu dengan menggunakan:

/* isi Comments */
Contoh:
H1 { color:blue;} /* H1 elements akan menjadi
biru */
Tags.H1.color = “blue”; /* H1 elements akan
menjadi biru */

Jika Anda adalah orang yang ingin mempelajari CSS ataupun bahasa pemrograman yang lain, silahkan klik disini. Ok, demikian artikel kali ini mengenai pengenalan Style Sheets. Semoga berguna dan bermanfaat. Terima kasih atas kunjungan Anda dan sampai jumpa lagi dalam postingan selanjutnya.