Cara Menambahkan CSS


Saat browser membaca style sheet, browser akan memformat dokumen HTML sesuai dengan informasi di style sheet.


Tiga Cara Menyisipkan CSS

Ada tiga cara untuk memasukkan style sheet:

  • External CSS
  • Internal CSS
  • Inline CSS


External CSS

Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs web hanya dengan mengubah satu file.


Setiap halaman HTML harus menyertakan referensi ke file style sheet eksternal di dalam elemen <link>, di dalam bagian head.


Contoh

Style eksternal ditentukan dalam elemen <link>, di dalam bagian <head> pada halaman HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>Ini adalah heading</h1>
<p>Ini adalah paragraf.</p>

</body>
</html>


Style sheet eksternal dapat ditulis di editor teks apa pun, dan harus disimpan dengan ekstensi .css.

File .css eksternal tidak boleh berisi tag HTML apa pun.

Berikut tampilan file "mystyle.css":

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}


Catatan: Jangan menambahkan spasi antara nilai properti dan unit (seperti margin-left: 20 px;). Cara yang benar adalah: margin-left: 20px;


Internal CSS

Style sheet internal dapat digunakan jika satu halaman HTML memiliki gaya yang unik.

Style internal ditentukan di dalam elemen <style>, di dalam bagian head.


Contoh

Style internal ditentukan dalam elemen <style>, di dalam bagian <head> pada halaman HTML:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>

<h1>Ini adalah heading</h1>
<p>Ini adalah paragraf.</p>

</body>
</html>


Inline CSS

Inline style dapat digunakan untuk menerapkan style unik untuk satu elemen.

Untuk menggunakan inline style, tambahkan atribut style ke elemen yang relevan. Atribut style dapat berisi properti CSS apa pun.


Contoh

Inline style ditentukan dalam atribut "style" dari elemen yang relevan:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">Ini adalah heading</h1>
<p style="color:red;">Ini adalah paragraf.</p>

</body>
</html>


Tips: Inline CSS kehilangan banyak keuntungan dari style sheet (dengan mencampurkan konten dengan presentasi). Gunakan metode ini dengan cermat.


Multiple Style Sheet

Jika beberapa properti telah ditentukan untuk selektor (elemen) yang sama di style sheet berbeda, nilai dari style sheet terakhir akan digunakan.


Asumsikan bahwa style sheet eksternal memiliki style berikut untuk elemen <h1>:

h1 {
  color: navy;
}


Kemudian, asumsikan bahwa style sheet internal juga memiliki style berikut untuk elemen <h1>:

h1 {
  color: orange;
}


Contoh

Jika style internal ditentukan setelah ditautkan ke style sheet eksternal, elemen <h1> akan menjadi "oranye":

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


Contoh

Namun, jika style internal ditentukan sebelum tautan ke style sheet eksternal, elemen <h1> akan menjadi "navy":

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


Cascading Order

Semua style di halaman akan "bertingkat" menjadi style sheet "virtual" baru dengan aturan berikut, dengan nomor satu memiliki prioritas tertinggi:

  1. Inline style (di dalam elemen HTML)
  2. External dan Internal style sheet(di bagian head)
  3. Default browser

Jadi, inline style memiliki prioritas tertinggi, dan akan menggantikan style eksternal dan internal serta default browser.


Sumber referensi: w3schools.com

Komentar

Posting Komentar