1
1

Ada beberapa cara untuk menuliskan style pada sebuah halaman HTML:

1. Inline style

Inline styles digunakan bila ingin mengatur format pada satu bagian dokumen HTML saja. Inline styles diletakkan pada bagian yang ingin diatur tampilan tulisannya. Dalam hal ini style dituliskan sebagai atribut dari sebuah Tag. Penggunaan inline style Pada sebuah Tag <H1> ditambahkan style untuk menggunakan jenis font Arial. Tag <H1> yang biasanya ditulis
<h1> … </h1>
dapat ditambahkan dengan atribut style berikut jenis properti style yang ingin digunakan. Sehingga sekarang dituliskan sebagai berikut :
<h1 style=”"> … </h1>
Ditambahkan properti style, yakni font-family, berikut nilainya, yakni Arial menjadi sebagai berikut :
<h1 style=”font-family:Arial;”> … </h1>
Contoh :
<h1 style=”font-family:Arial, Helvetica, sans-serif;”> Tulisan dengan font Arial </h1>
Akan ditampilkan sebagai berikut :

Tulisan dengan font Arial

Jika ingin ditambahkan properti lain pada style tersebut, dapat dituliskan dengan menggunakan separator berupa tanda titik-koma ( ; ) Contoh :
<h1 style=”font-family:Arial, Helvetica, sans-serif; color:Green;”> Tulisan Arial berwarna Hijau </h1>
Akan ditampilkan sebagai berikut :

Tulisan Arial berwarna Hijau

2. Internal Style Sheet

Internal style sheet digunakan di dalam satu dokumen HTML dan hanya satu dokumen HTML itu saja yang menggunakan style tersebut.
Perbedaan Internal Style Sheet dengan Inline Style adalah pada penempatannya. Internal Style Sheet ditempatkan pada bagian Head, di antara Tag <head> dan </head>. Semua bagian body dapat diatur tampilannya melalui Style Sheet ini. Di sini kita mendeklarasikan Style yang dipergunakan di dalam Tag <body> sehingga pada saat bagian body ditampilkan, Style-nya akan mengacu pada Style yang sudah dideklarasikan tersebut. Contohnya, sebuah halaman HTML berisi content sebagai berikut :
<h1> TULISAN JUDUL </h1>
<a href=”http://www.kursusprivat.com”> LINK </a>
<p> Tulisan berupa paragraf </p>

Untuk mengatur style pada halaman tersebut kita dapat menuliskan stylesheet di antara Tag <head> … </head> . Misalnya sebagai berikut :
<style type=”text/css”>
h1 { color:blue; background-color:lightblue; }
p { color:green; margin-left:20px; margin-right:20px; background-color:lightgreen; }
a { color:red; background-color:yellow; }
</style>

3. External Style Sheet

External style sheet digunakan untuk membuat format style pada beberapa dokumen HTML sekaligus, dan hanya satu dokumen stylesheet yang disimpan dalam format file .css
Keuntungannya tentu saja lebih praktis jika kita menuliskan satu style yang akan dipergunakan secara seragam pada halaman-halaman HTML yang lain. Kenyataannya, pada sebuah website selalu menggunakan style yang seragam. Dengan menuliskan stylesheet pada satu file tersendiri, maka apabila di kemudian hari kita ingin mengubah style, cukup file stylesheet-nya saja yang kita ubah.
Penggunaan External Stylesheet pada halaman HTML ditandai dengan link ke file Stylesheet. Link terhadap file .css external tersebut dituliskan pada bagian Tag sebagai berikut :
<head>

<link rel=”stylesheet” type=”text/css” href=”namafile.css”>
</head>

Contoh penggunaan dari ketiga jenis style sheet tersebut dapat dilihat pada link di bawah ini : Contoh Membuat Website
Demikian, mudah-mudahan informasi ini bermanfaat.



www.gudangenam.blogspot.com

  1. Pesan Gw : Komentar Anda Sangat Berarti Untuk Perkembangan BLOG ini...

0 komentar:



Posting Komentar