Pengaturan layout dengan StyleSheet

Sebuah halaman HTML memerlukan pengaturan style atau gaya tampilan agar berfungsi dengan baik sekaligus mudah dan tampil dengan baik. Caranya dengan mengatur susunan huruf, gambar, posisi-posisi setiap obyek yang ada di halaman html, dan lain-lain.


Untuk keperluan pengaturan tersebut, digunakan penulisan script stylesheet atau juga disebut CSS (Cascading Stylesheet), yaitu standar styling terhadap obyek2 html.

Penulisan.
kode stylesheet dituliskan baik di dalgam dokumen html itu sendiri, maupun di luar. Kode ini, biasanya dituliskan di bagian head html tag.

<style type="text/css">
 .style1 {
    font-size: 12px;
    font-weight: bold;
    color: #0033CC;
}
</style> 

agar bisa dikaitkan ke obyek yang diatur, maka setiap unit pengaturan ini dinamai secara unik. Misalnya sethuruf1, untuk mengatur font agar berwarna biru, berukuran 12, akan tertulis, seperti ini.

<style type="text/css">
 .sethuruf1{
    font-size: 12px;
    font-weight: bold;
    color: #0033CC;
}
</style> 


 di bagian obyek atau kontrol yang diatur, pada property class ditulis nama css-nya. sbb:

 <p class="sethuruf1">Judul Subbab </p> 

pada text box:

<input class="style1" name="textNama" type="text">


Penulisan css di dokumen terpisah
Style css di samping berada di dokumen html yang membutuhkan, juga biasa ditempatkan dalam file terpisah. Tujuannya ialah agar bisa digunakan di dokumen-dokumen lain yang membutuhkan tanpa harus menuliskan secara berulang di file2 yang membutuhkan. Hal ini akan memberikan kemudahan perawatan kode dalam aplikasi web.

File tersebut dinamai dengan ekstensi .css. Dan di dokumen yang menggunakannya dituliskan sebagai berikut. Misal nama file css-nya ialah setting.css. Pada contoh ini file tersebut berada di subfolder style.
 

<link href="style/setting.css" rel="stylesheet" type="text/css" />
 
 
 Tentu saja, pengaturan ini bukan hanya berkaitan dengan huruf saja, tetapi juga mengatur berbagai hal misalnya. background obyek div, warna table, bentuk obyek, dan masih banyak lagi.

Selengkapnya silakan pelajari di link berikut ini: http://www.w3schools.com/css/default.asp