Raja Tutor

Pengenalan CSS - Cara Menggunakan CSS

Cara Mengunakan CSS

Pada saat browser menampilkan sebuah dokumen HTML maka browser akan membaca style CSS pada dokumen HTML tersebut dan menformat sesuai dengan aturan CSS.

Terdapat 3 cara untuk mengunakan atau menerapkan CSS pada dokumen HTML.

1. Inline CSS
2. Internal CSS
3. Eksternal CSS

Inline CSS

Pada cara ini aturan CSS dituliskan pada setiap elemen HTML yang ingin diformat atau di-style. Untuk lebih jelasnya, perhatikan contoh dibawah ini:

<html> 
   <body>  
      <h1 style="color:blue; text-align:center;" >Sebuah Judul</h1> 
      <p style="color:red;" >Contoh sebuah paragraf.</p > 
   </body> 
</html>

Internal CSS

Pada cara internal ini aturan CSS ditulis di dalam dokumen HTML pada bagian head.
Contoh di bawah ini memperlihatkan sebuah dokumen HTML dengan CSS internal.

<html>
   <head>
      <style>
         body {
            background-color: black;
         }
         h1 {
            color: yellow;
            margin-left: 20px;
         }
      </style>
   </head>
   <body>
      <h1>Sebuah Judul</h1>
      <p>Contoh sebuah paragraf.</p>
   </body>
</html>

Eksternal CSS

Pada cara mengunakan eksternal CSS, file CSS terpisah dari file HTML dan disimpan tersendiri. Pada setiap dokumen HTML file CSS ini harus direferensikan pada bagian tag <head>.

Pada contoh berikut ini, file eksternal didefinisikan pada elemen <link> dalam tag <head> pada halaman HTML.

<html>
   <head>
      <link rel="stylesheet" type="text/css" href="style_utama.css">
   </head>
   <body>
      <h1>Bagian Judul</h1>
      <p>Ini adalah bagian paragraf.</p>
   </body>
</html>

Sebuah file CSS eksternal bisa dibuat dengan editor teks dan disimpan dengan ektensi css. Pada file CSS eksternal ini hanya ada aturan CSS tidak boleh ada tag HTML.

Berikut adalah sebuah contoh file CSS eksternal.

body {
  background-color: white;
}
p {
  color: red;
  margin-left: 10px;
}

Lebih dari satu Style CSS

Bila pada sebuah dokumen HTML ditemukan lebih dari satu aturan CSS maka yang digunakan adalah yang paling akhir dimuat/diload.
Perhatikan contoh berikut ini:

Misalkan pada file CSS eksternal style_utama.css ada pengaturan style untuk elemen <p> seperti berikut:

p {
  color: blue;
}

Lalu pada halaman HTML terdapat CSS internal sebagai berikut:

p {
  color: red;
}

Bila CSS internal didefinisikan setelah CSS eksternal maka emelen <p> akan berwarna merah, yang diperlihatkan pada contoh di bawah.

<head>
   <link rel="stylesheet" type="text/css" href="style_utama.css">
   <style>
      h1 {
      color: red;
      }
   </style>
</head>

Hal sebaliknya terjadi bila CSS internal didefinisikan sebelum CSS eksternal maka elemen <p> akan berwarna biru, yang diperlihatkan pada contoh di bawah.

<head>
   <style>
      h1 {
        color: red;
      }
   </style>
   <link rel="stylesheet" type="text/css" href="style_utama.css">
</head>