Bagaimana Cara Menambahkan CSS

Ketika browser membaca lembar gaya, itu akan memformat dokumen HTML sesuai dengan informasi dalam lembar gaya.

Tiga Cara Memasukkan CSS

Ada tiga cara memasukkan style sheet:

  • CSS eksternal
  • CSS internal
  • CSS sebaris

CSS eksternal

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

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

Contoh

Gaya eksternal didefinisikan dalam elemen <link>, di dalam bagian <head> dari halaman HTML:

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

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Lembar gaya eksternal dapat ditulis dalam editor teks apa pun, dan harus disimpan dengan ekstensi .css.

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

Berikut ini tampilan file "mystyle.css":

"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;