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>
Sederhanakan melalui pengelompokkan
Bila anda ingin menerapkan pemformatan yang sama bagi berbagai tag, misal:
H1 {font-size: 15pt;
font-weight: bold;
color: maroon}
H2 {font-size: 15pt;
font-weight: bold;
color: maroon}
H3 {font-size: 15pt;
font-weight: bold;
color: maroon}
anda dapat mengelompokkannya menjadi
H1, H2, H3
{font-size: 15pt;
font-weight: bold;
color: maroon}
Anda dapat pula mengelompokkan spesifikasi pemformatan. Misal:
H1 {font-size: 15pt;
line-height: 17pt;
font-weight: bold;
font-family: "Arial"
font-style: normal}
dapat disederhanakan menjadi seperti berikut ini
H1 {font:
15pt/17pt bold "Arial" normal}
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} /* Hijau untuk heading 1 */
Artikel Terkait
0 comments:
Post a Comment