Perintah CSS


Terdapat 3 cara untuk menuliskan perintah CSS (style sheet/lembar perintah CSS) :

  • Eksternal style sheet
  • Internal style sheet
  • Inline style

Eksternal Style Sheet

Eksternal style sheet sangat ideal digunakan untuk halaman web yang banyak. Dengan cara ini, apabila Anda ingin mengubah tampilan web, Anda hanya perlu mengedit/mengubah file CSS saja. Untuk menggunakannya, setiap halaman harus di link-kan ke style sheet menggunakan tag link. Tag link diletakkan dibagian head.

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

style.css merupakan nama file style sheet (CSS). File ini ditulis dengan perintah CSS tanpa mengandung tag HTML. Serta disimpan dengan ekstensi .css. Berikut contoh dari file style.css :

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

Catatan : Ketika menuliskan value property dan unitnya, jangan menambahkan spasi (seperti “margin-left:20 px”). Namun yang benar ialah :

margin-left:20px

Internal Style Sheet

Cara ini, perintah CSS akan didefinisikan langsung dibagian head HTML, dengan menggunakan tag style.

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

Inline Style

Cara ini, perintah CSS didefinisikan langsung pada tag HTML. Gunakan cara ini apabila perintah CSS yang didefinisikan sangat pendek.

Contoh berikut akan menambahkan warna dan margin pada paragraf :

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