Bagaimana untuk membuat CSS

Bagaimana untuk memasukkan tajuk gaya

Ketika membaca tajuk gaya, pemilik dokumen akan mensesuaikan format dokumen HTML menurutnya. Ada tiga cara untuk memasukkan tajuk gaya:

Tajuk gaya luaran

Ketika gaya perlu diterapkan kepada banyak halaman, tajuk gaya luaran adalah pilihan yang ideal. Dalam keadaan penggunaan tajuk gaya luaran, anda boleh mengubah keseluruhan penampilan laman halaman dengan mengubah satu file. Setiap halaman menggunakan tag <link> untuk menyambung ke tajuk gaya.<link> tag di (kepala dokumen):

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

Pemilik dokumen akan baca deklarasi gaya dari file mystyle.css dan menyesuaikan format dokumen menurutnya.

Tajuk gaya luaran boleh diedit dalam mana-mana editor teks. File tidak boleh mengandungi mana-mana tag html. Tajuk gaya patut disimpan dengan ekstensi .css. Berikut adalah contoh file tajuk gaya:

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

Jangan tinggalkan ruang di antara nilai properti dan unit. Jika anda gunakan "margin-left: 20 px" bukannya "margin-left: 20px", ia hanya berfungsi di IE 6, tetapi tak berfungsi dengan baik di Mozilla/Firefox atau Netscape.

Tajuk gaya dalaman

Ketika dokumen tunggal memerlukan gaya khusus, patut digunakan tajuk gaya dalaman. Anda boleh menggunakan tag <style> untuk menentukan tajuk gaya dalaman di kepala dokumen, seperti ini:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

Gaya sambung

Kerana menggabungkan ekspresi dan konten, gaya sambung akan kehilangan banyak kelebihan tajuk gaya. Gunakan kaedah ini dengan berhati-hati, contohnya jika gaya hanya perlu diterapkan sekali dalam seorang elemen.

Untuk menggunakan gaya sambung, anda perlu menggunakan properti (style) dalam tag yang relevan. Properti Style boleh mengandungi mana-mana properti CSS. Contoh ini menunjukkan bagaimana merubah warna paragraf dan marjin eksternal kiri:

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

Gaya Berlekuk

Jika beberapa properti didefinisikan dengan pemilihan yang sama dalam beberapa gaya, nilai properti akan dipindahkan dari gaya yang lebih spesifik.

Contohnya, gaya luar mempunyai tiga properti untuk pemilihan h3:

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

Manakala gaya dalaman mempunyai dua properti untuk pemilihan h3:

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

Jika halaman ini yang memiliki gaya dalaman yang dihubungkan dengan gaya luar yang sama serta dihubungkan dengan gaya luar, gaya yang didapat h3 adalah:

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

Jadi properti warna (color) akan dipindahkan kepada latar belakang gaya luar, manakala susun teks (text-alignment) dan saiz font (font-size) akan digantikan oleh aturan gaya dalaman.