Dengan style sheet kita dapat memisahkan style (format tampilan) dengan isi dokumen HTML yang sebenarnya. Hal ini dilakukan dengan tujuan kita ingin mengubah tampilan yang ada pada dokumen HTML, kita tidak perlu menggantikan sebagian besar isi source dengan mengotak-atik setuap baris source dokumen HTML yang ingin kita ubah tersebut.
Cukup dengan mengubah definisi style sheet atau dengan membuat style sheet yang baru, Anda akan dapat melakukan dengan cara yanglebih mudah. Jadi style sheet merupakan sarana yang efisien dan fleksibel untuk mengatur tampilan homepage.
Pembuatan homepage dapat memberikan spesifikasi informasi style dari Style Sheet Language yang akan digunakan dalam sebuah dokumen HTML. Untuk itu, sebaiknya digunakan
elemen META untuk meletakkan default Style Sheet Language untuk dokumen tersebut.
Contoh untuk deklarasi CSS (Cascading Style Sheet) Language, maka deklarasi formatnya adalah sbb:
<meta http-equiv=”Content-Style-Type” content=”text/css”>
Cara lain untuk mendefinisikan tipe style adalah seperti contoh berikut:
<head>
<style type=”text/css”> … </style>
</head>
Penulisan dengan TYPE seperti ini tidak harus dilakukan, tujuannya adalah untuk bagi browser yang tidak support untuk mengabaikannya.
1 Inline Style Information
Menggunakan
atribut STYLE.Atribut ini digunakan untuk mendefinisikan informasi style dokumen HTML untuk sebuah elemen tunggal. Sintaks dari data style tergantung pada Style Sheet Language yang digunakan.
Contoh berikut ini memperlihatkan penentuan informasi warna dan ukuran huruf suatu paragraph tertentu.
<p style=”font-size:12pt; color:blue;”>aangDalam CSS format pendeklarasian property style adalah … “nama : nilai” dan diantara property yang satu dengan lainnya dipisahkan dengan tanda titik kome ( ; ).
Atribut style biasa digunakan untuk mengaplikasikan sebagian style pada sebuah dokumen HTML. Jika style ingin digunakan pada beberapa tag lainnya kembali (re-used), pembuat homepage harus menggunakan
elemen STYLE untuk mengelompokkan informasi tersebut dalam bentuk header. Agar kemampuan lebih optimal dan fleksibel , pembuat homepage bisa mendefinisikan style pada External Style Sheet (style sheet luar).
2 Header Style Information
Style sheet bias diletakkan di bagian kepala dokumen HTML. HTML mengizinkan elemen-elemen STYLE berada di bagian HEAD maupun di dalam BODY. Imlementasi style sheet kali ini bias diterapkan lebih bervariasi dibandingkan dengan Inline Style Information. Sebagai contoh, pendeklarasian elemen STYLE dalam bentuk header ini digunakan untuk:
1. Hal-hal yang berkaitan dengan sebuah tag spesifik HTML, misalnya pendeklarasian untuk semua tag P atau untuk semua tag H, dsb.
2. Mendefinisikan sebuah tag HTML tertentu yang memiliki nama class spesifik dengan nilai –nilai style sheet tertentu (digunakan untuk mendefinisikan style tag tertentu). Misalnya, atribut
CLASS yang berisi nilai-nilai tertentu tersebut digunakan
tag P.
Contoh :
p.aang{text-align:center}
maka style ini hanya digunakan oleh
<p class=”aang”>3. Mendefinisikan sebuah nama identitas spesifik yang memiliki nilai-nilai style sheet tertentu (mendefinisikan tag-tag yang mengandung identitas spesifik tersebut.) Misalnya,
atribut ID yang memiliki nilai-nilai tertentu dengan identitas yang khusus pula digunakan oleh
tag P dan
DIV yang memiliki identitas khusus pula.
Contoh:
#aang{teks-align:center;}
maka style ini digunakan oleh tag-tag apapun yang mengandung nama identitas khusus “aang”, misalnya:
<p id=”aang”>
<div id=”aang”>3 Memformat tampilan teks dengan CSS
Dengan style sheet kita juga dapat membuat cetak tebal, miring, menentukan jenis dan ukuran huruf, dsb.
1) Menentukan ukuran hurufUntuk mengatur ukuran huruf dengan menggunakan stle sheet, gunakan perintah font-size dengan nilai tertentu yang mengadung satuan tertentu pula.
Contoh Penulisan:
<p style=”font-size:12pt”> Riskia Meita Sovie </p>Berarti semua teks yang berada di antara tag <P> dan </P> akan memiliki ukuran huruf 12 point.
Pada contoh tadi kita menggunkaan teknik “Inline Style”. Kita juga bias menggunakan berbagai macam teknik style sheet yang lain. Berbagai macam alternatif penulisan pada style sheet lain :
1. Inline Style :
<p style=”font-size:12pt”>Riskia Meita Sofie </p>2. Definisikan dulu style sheet pada dokumen HTML tersebut di antara elemen
<head></head> maupun anatara
<body></body> dengan contoh penulisan seperti ini …
<head>
<style>P{font-size:12;}</style>
</head>
<body>
<p>Riskia Meita Sovie
</body>3. Dengan menggunakan “External style sheet ( style sheet luar)” yang akan kita pelajari nanti.
4. Ingat juga, pada contoh-contoh yang akan dibuat oleh penulis nanti akan digunakan teknik seperti pada sebelumnya., yaitu mendefinisikan style sheet di antara
<style></style> terlebih dahulu.
2) Menentukan bentuk huruf.Ada berbagai macam bentuk huruf seperti Courier new, Arial, Verdana, Times New Roman , dan masih banyak lagi yang lainnya. Pada pembuatan Homepage, jika kita tidak menentukan jenis huruf pada source HTML-nya, bentuk huruf yang akan ditampilkan nanti akan sesuai dengan bentuk huruf default browser yang telah ditetapkan sebelumnya. Bagaimana kita mengaturnya dengan style sheet? Gunakan perintah style sheet front-family.
Perhatikan contoh berikut ini
p{font-family:arial;}
div{font-family:”times new roman”;}Jika bentuk huruf yang digunakan terdiri atas beberapa kata seperti “times new romwn”, “arial black”…”. Jika hanya terdiri atas satu kata saja seperti “arial”, “verdana”, dan lain-lain, Anda boleh menggunakan tanda kutip tersebut boleh juga tidak.
3) Menentukan Jenis cetakan huruf .Jenis cetakan ada bermacam-macam, antara lain, cetakan tebal, cetakan miring, bergaris bawah, ada garis diatasnya dan teks yang tercoret garis lurus.
Perintah style sheet yang digunakan adalah Cetakan miringfont-style:italic; Cetakan tebeal font-weight:bold; Bergaris bawah text-decoration:underline; Ada garis diatas teks text-decoration:overline; Teks tercoret garis lurus text-decoration:line-through;
4) Menentukan warna hurufPerintah style sheet yang digunakan untuk menentukan warn ahuruf yang digunakan adalah color. Nilai dari perintah itu bias berupa namawarna dalam bahasa inggris seperti “white”, “black”, :red”, “green”, dan sebagainya.
Perhatikan contoh berikut ini.
<style>
div.merah{color:red;}
</style>
<div class=”merah”>
semua teks yang berada pada daerah ini akan berwarna merah
</div>
5) Mengatur jarak baris antar daerah teks
Kita juga bias mengatur jarak baris antar daerah teks tertentu, misalnya antarparagraf, dengan menggunakan style sheet. Perintah yang digunakan adalah line-height, dengan nilai berupa angka disertai dengan satuan ukuran tertentu. Perhatikan contoh berikut ini:
<style>
p{line-height:1 cm;}
</style>
<P>
ini paragraph kedua … dan jarak antara paragraph Saturday dan dua adalah sebesar 1 cm
6) Mengatur perataan teks
Blok-blok teks tertentu, kita biasa menentukan jenis peralatan teksnya, seperti teks rata kiri, rata kanan, dan teks yang ditengah-tengah. Dalam style sheet digunakan perintah text-align untuk menentukan jenis perataan teks tersebut.
Nilai-nilainya adalah left (rata kiri), right (rata kanan), justify (rata kanan dan kiri), dan center ( teks ditengah-tengah). Perhatikan contoh berikut ini.
<style>
div.rata_kanan{teks-align:right;}
</style>
<div class =”rata_kanan”>semua teks yang berada pada daerah ini akan rata kanan
</div>
7) Membuat jarak spasi masuk pada awal paragraph
Untuk menentukan indentasi, yaitu membuat jarak spasi pada awal paragraph (baris yang masuk ke dalam atau seperti fungsi tombol <TAB>) digunakan atribut text-indent. Satuan yang digunakan oleh atribut-atribut ini sama seperti satuan-satuan yang telah kita ketahui sebelumnya, sepertipixel (px), centimeter (cm), point (pt) dan sebagainya. Perhatikan contoh berikut ini:
<style>
p.masuk_5 cm{text-indent:5 cm;}
</style>
<p class=”masuk_5 cm”>
paragraph ini memiliki jarak masuk awal sebesar 5 cm di awal paragraph…
8) Mengatur batas tepi (margin)
Pada pembuatan homepage, kita juga perlu mengatur margin dari halaman homepage tersebut untuk memeindah tam,pilan. Dalam style sheet, untuk mengatur margin digunakan empat macam atribut, antara lain:
margin-top untuk mengatur batas tepi atas margin-right untuk mengatur batas tepi kanan margin-bottom untuk mengatur batas tepi bawah margin-left untuk mengatur batas tepi kiri
Semua batas tersebut adalah relatif, maksudnya jika kita besarkan maupun kita kecilkan layar browser, dan style sheet telah menentukan batas tepi kiri 3 cm dan tepi kanan 3 cm, tampilan akan selalu berusaha menyesuaikan agar kondisi tetap bertahan.
Contoh penulisan :
BODY{ margin-top:4 cm;
margin-right : 3 cm;
margin-bottom : 3 cm;
margin-left : 4 cm; }
Penentuan batas-batas tepi (margin) tersebut bias disederhanakan. Kita tidak perlu lagi menulis margin top, margin-right, dan sebagainya. Dengan atribut margin, kita dapat menyederhanakan bentuk penulisan tersebut.
Oleh karena itu, pada contoh sebelumnya kita bias menggantinya dengan penulisan :
BODY{margin: 4 cm 3 cm 3 cm 4 cm;}
Kita lihat urutan nilai atribut margin. Dari kiri ke kanan menunjukkan urutan margin-top, margin-right, margin-bottom, margin-left.
Jika penulisannya hanya terdiri atas satu nilai batas, nilai batas lainnya secara otomatis akan dibuat sama. Jika terdiri atas dua atau tiga nilai batas, nilai-nilai batas yang berlawan (atas dengan bawah, kiri dengan kanan) akan sama.
Contoh:
{margin: 1 cm 2 cm 3 cm;}
Berati batas atas 1 cm, batas kanan akan sama dengan batas kiri yaitu 2 cm, dan batas bawah 3 cm.
9) Membuat tampilan border
Border merupakan pembatas suatu daerah /blok tertentu. Dalam hal ini, pembatas tertentu. Dan, daerah/blok tertentu . Dalam hal ini, pembatas tersebut berupa garis. Dan, daerah/blok tertentu yang dibatasi oleh border
tersebut adalah daerah yang berada di dalam tag-tag blok seperti P, DIV, dan sebagainya.
Atribut-atribut yang berkaitan dengan pembuatan border:
a. Border, untuk mendefinisikan ada tidaknya garis pembatas. Nilai yang diberikan adalah none (tidak ditampakkan border/garis pembatasnya), solid (garis pembatasnya berupa garis tebal dengan ukuran default), solid thin (garis pembatasnya lebih tipis daripada solid).
b. border-width, untuk menetukan ukuran tebal garis pembatas. Satuan digunakan adalah satuan-satuan dalam dalam HTML seperti px, cm, mm dan sebagainya.
c. background, untuk memberikan latar belakang pada daerah yang dibatasi oleh border tersebut. Latar belakang ini bisa berupa warna maupun gambar. Untuk membuat latar belakang berupa warna, nilai background adalah nama warna atau kode warna RGB heksadesimal . Sedangkan untuk membuat latar belakang berupa gambar, nilai background adalah URL (`nama atau URL gambar yang digunakan sebagai latar belakang’).
d. margin, untuk mendefinisikan batas-batas wilayah border relatif terhadap wilayah tag-tag blok yang digunakan dimana tag-tag blok melingkupi wilayah border tersebut. Selain itu, kita juga bisa menggantikan margintop, margin-right, margin-bottom, dan margin left.
e. padding, untuk mmendefinisikan jarak antara isi border dengan garis pembatasnya. Nilai yang diberi satuan seperti px, cm, mm dan sebagainya.
Bentuk dan aturan penulisannya tidak jauh berbeda dengan bentuk dan aturan penulisan margin yang sederhana. contohnya
{padding: 20px 20px 10px 10px; },
dengan urutan top right bottom left. Selain itu, terdapat atribut lain yang bisa digunakan yaitu padding-top, padding-right. padding-bottom, paddingh-left yang digunakan untuk mendefinisikan padding di satu sisi saja.
f. blockquote mertupakan tag blok yang penulisannya dalam bentuk indetasi (masuk ke dalam) dan biasa digunakan untuk pembuatan kutipan. Berbeda dengan p, walaupun keduanya sama-sama tag blok, pada
BLOCKQUOTE pada umu mnya bisa berisi tag-tag blok yang lain (pada div juga demikian), sedangkan pada p perlakuan seperti itu jarang dilakukan. Jadi pada BLOCKQUOTE bisa saja terjadi.
<BLOCKQUOTE>
<p>…</p>
<BLOCKQUOTE>…</BLOCKQUOTE>
</BLOCKQUOTE>
