.jpg)
Cascading Style Sheet adalah template yang mengontrol pemformatan tag HTML pada halaman web. Bila kalian pernah menggunakan Microsoft Word, kalian dapat melihat bahwa konsep Style Sheet mirip dengan template pada Microsoft Word. Kalian dapat megubah tampilan pada dokumen Word dengan mengubah format pada style dokumennya. Begitu pula anda dapat mengubah tampilan halaman web dengan mengubah format pada tag HTML tertentu melalui Style Sheet, untuk menggantikan spesifikasi default dari browser untuk tag-tag tersebut.
Style Sheet relatif masih baru dalam dunia web. Internet Explorer 3.0 keluaran Microsoft adalah web browser pertama yang mendukung Style Sheet. Implementasi Style Sheet pada Internet Explorer 3.0 berdasarkan pada draft World Wide Web Consortium (W3C) yang berjudul “Cascading Style Sheets, Level 1” (diterbitkan pada bulan Mei 1996, lihat (http://www.w3.org/pub/WWW/TR/WD-css1.html). Netscape juga telah memberi tahu bahwa mereka akan mendukung Style Sheet pada versi-versi terbaru dalam browsernya. Browser yang tidak mendukung Style Sheet menampilkan halaman web berdasarkan spesifikasi default browser tersebut saja.
Terdapat 3 Cara Untuk Menambahkan Style Pada Web kalian , yaitu
- Membuat link ke file Style Sheet dari file HTML. Metode seperti ini memungkinkan anda mengubah style sejumlah halaman web dengan hanya mengedit satu file Style Sheet. jadi dengan hanya membuat satu file yang berisi style.html. Maka file tersebut dapat digunakan untuk mengatur tampilan beberapa halaman file html. Halaman tersebut dapat berisi beberapa artikel yang kalian upload. Dan untuk file style yang telah dibuat tadi didalamnya dapat berisi pengaturan font, color dari font atau text, backround dan sebagainya.
- Menyisipkan Style Sheet pada file HTML. Metode seperti ini memungkinkan anda mengubah style suatu halaman web dengan hanya mengedit beberapa baris Style Sheet.
- Menyisipkan secara inline pada tag dalam file HTML. Hal ini memberi cara tercepat untuk mengubah suatu tag, sejumlah tag, atau satu blok informasi pada halaman web.
Syntax dari CSS
Baik Style Sheet yang dilink maupun yang disisipkan memiliki satu atau lebih definisi style. (Syntax inline kadang berbeda). Suatu definisi style terdiri dari suatu tag HTML (tag apapun), diikuti oleh sejumlah properti untuk tag tersebut yang terletak diantara tanda kurung kurawal. Tiap properti diidentifikasi oleh nama properti, diikuti oleh titik dua dan nilai properti. Properti ganda dipisahkan oleh titik koma. Sebagi contoh, definisi style berikut memberi tag <H1> ukuran font yang spesifik (15 point), dan ketebalan huruf (boldface):
=> H1 {font-size: 15pt; font-weight: bold}
Membuat Link ke Style Sheet
Untuk membuat link ke Style Sheet eksternal, anda dapat dengan mudah membuat sebuah file berisi definisi style kemudian simpan (save) dengan ekstensi .CSS, kemudian buat link ke file tersebut dari halaman web. Dengan cara ini, anda dapat memanfaatkan Style Sheet yang sama untuk beberapa halaman dalam site anda.
Sebagai contoh, bila Style Sheet anda dinamai style-saya.css dan terletak di alamat http://alamat-internet/style-saya.css, diantara tag <HEAD> anda harus menambahkan:
<HEAD>
<TITLE>Judul artikel</TITLE>
<LINK REL=STYLESHEET
HREF="http://alamat-internet/style-saya.css"
TYPE="text/css">
</HEAD>
Menyisipkan blok STYLE
Untuk menyisipkan (embed) Style Sheet, tambahkan blok <STYLE> </STYLE> di awal dokumen, di antara tag-tag <HTML> dan <BODY>. Hal ini memungkinkan anda unutk mengubah penampilan satu halaman web. Tag <STYLE> memilki satu parameter yaitu TYPE, yang menspesifikasi type media internet sebagai “text/css” (memungkinkan browser yang tidak mendukung type ini untuk mengabaikan Style Sheet). Tag <STYLE> diikuti oleh sejumlah definisi style dan berakhir dengan tag </STYLE>.
<HTML>
<STYLE TYPE="text/css">
<!--
BODY {font: 10pt "Arial"}
H1 {font: 15pt/17pt "Arial";
font-weight: bold;
color: maroon}
H2 {font: 13pt/15pt "Arial";
font-weight: bold;
color: blue}
P {font: 10pt/12pt "Arial";
color: black}
-->
</STYLE>
<BODY>
...
</BODY>
</HTML>
Variasi melalui class
Gunakan class untuk membuat berbagai macam variasi bagi satu tag HTML. Sebagi contoh, bila anda ingin menggunakan tiga warna untuk heading H1 (katakanlah bergantung pada konteks), anda dapat mendefinisikannnya dalam tiga class dalam STYLE tag berikut:
<STYLE>
H1.red {font: 15pt/17pt;
color: red}
H1.green {font: 15pt/17pt;
color: green}
H1.blue {font: 15pt/17pt;
color: blue}
</STYLE>
Pada halaman web gunakan class tersebut
<H1 CLASS=red>This is the red heading</H1>
...
<H1 CLASS=blue>This is the blue heading</H1>
...
<H1 CLASS=green>You get the picture...</H1>
Link
Implementasi Style Sheet juga memungkinkan anda mengubah penampilan dari link (teks yang diklik oleh user untuk lompat ke halaman lain) dengan memberikan dua class yang telah didefinisikan pada tag <A>:
• A:link menunjukkan link yang belum dikunjungi
• A:visited menunjukkan link yang telah diklik/dikunjungi oleh user
Anda dapat mengeset sejumlah properti pemformatan teks pada class-class A tersebut, termasuk color, Font-size, font-weight, dan text-decoration. Sebagai contoh, untuk menentukan warna yang spesifik pada tiga tipe link, anda dapat menspesifikasi:
A:link {color: red}
A:visited {color: blue}
A:active {color: orange}
Dengan menambahkan text-decoration “none” menghilangkan garis bawah pada teks link
A:visited {color: blue; text-decoration: none}
Komentar
Anda dapat menambahkan komentar pada Style Sheet. Komentar dapat ditulis pada baris manapun dalam spesifikasi style di antara tanda /* dan */ misal:
H1 {font: 20pt/22pt
bold; color=#00FF00} /* penggunaan warna */
Tidak ada komentar:
Posting Komentar