18%
25%
50%
75%

Kripkorn Studios | Komuniti Drupal phpBB Malaysia

Bagaimana Hendak:

Tutorial
CSS Tentang artikel ini
Penulis: kripkorn -- Oct 19, 2008
kemas kini Kemas kini: Apr 18, 2012

Memasukkan Style Sheet

Apabila web browser membaca Style Sheet, ia akan mengubah paparan dokumen tersebut mengikut apa yang terkandung dalam Style Sheet. Terdapat 3 cara untuk memasukan Style Sheet.

Style Sheet Luaran

Style Sheet Luaran sesuai untuk digunakan jika anda ingin mengubah banyak dokumen dengan hanya menggunakan satu Style Sheet. Setiap laman yang ingin menggunakan Style Sheet Luaran perlulah dimasukkan tag <link> di antara tag <head>. Contohnya seperti berikut : 

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

Browser akan membaca style daripada fail mystyle.css dan mengubah paparan dokumen tersebut seperti yang terkandung didalam fail tersebut. Fail CSS tesebut mestilah mengandungi hanya style sahaja dan jangan masukkan HTML tag di dalam fail tersebut. Contoh apa yang terkandung dalam fail mystyle.css ialah: 

hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}

Style Sheet dalaman

Style Sheet dalaman biasanya digunakan apabila satu dokumen mempunyai style yang unik dan tersendiri. Cara menggunakan Style Sheet dalaman adalah dengan menggunakan tag <style> diantara tag <head>. Contohnya seperti berikut :

Style Inline

Style Inline hanya digunakan jika anda ingin mengubah satu elemen dalam HTML. Inline Style akan mengantikan kesemua jenis Style yang telah anda nyatakan di dalam Style Sheet dalaman atau Style Sheet Luaran jika ada. Cara menggunakan Inline Style adalah menggunakankan attribute style=" ... " di dalam elemen tersebut. Contoh dibawah mengubah perenggan. 

<p style="color: sienna; margin-left: 20px">
  Ini adalah perenggan
</p>

Pelbagai style sheets

Jika satu Style dinyatakan di dalam dua jenis Style tetapi mempunyai property yang berbeza maka style akan diwariskan atau diturunkan. Contohnya seperti berikut, Jika anda mempunyai Style Sheet Luaran yang mengubah paparan bagi <h3>: 

h3
{
  color: red;
  text-align: left;
  font-size: 8pt
}

Dan anda menggunakan Style Sheet Dalaman untuk <h3>: 

h3
{
  text-align: right; 
  font-size: 20pt
}

Oleh itu, paparan untuk <h3> akan mengikut Style berikut : 

color: red;
text-align: right; 
font-size: 20pt

Warna bagi <h3> akan mengikut Style Sheet Luaran kerana di dalam Style Sheet Dalaman kita hanya mengubah cara sususan perkataan dan saiz bagi tulisan sahaja.

mad