Bagaimana menambahkan CSS

Ketika peramban membaca tabel gaya, dia akan memformat dokumen HTML berdasarkan informasi di tabel gaya.

Tiga metode penggunaan CSS

Terdapat tiga metode untuk memasukkan gaya tabel:

  • CSS Eksternal
  • Gaya CSS internal
  • Gaya CSS dalam

CSS Eksternal

Dengan menggunakan gaya eksternal, Anda hanya perlu mengubah satu berkas untuk mengubah penampilan seluruh situs!

Setiap halaman HTML harus mengandung referensi ke berkas gaya eksternal di elemen <link> di bagian head.

contoh

Gaya eksternal di definisikan di elemen <link> di bagian <head> 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>

Coba Sendiri

Laman gaya eksternal dapat ditulis di mana saja editor teks dan harus disimpan dengan ekstensi .css.

Laman gaya eksternal .css tidak boleh mengandung setiap tag HTML.

"mystyle.css" seperti ini:

"mystyle.css"

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

Perhatian:Jangan menambahkan spasi di antara nilai properti dan satuan (contoh margin-left: 20 px;）。Penulisan yang benar adalah:margin-left: 20px;

Gaya CSS internal

Jika halaman HTML memiliki gaya yang unik, maka dapat digunakan laman gaya internal.

Gaya internal ditentukan di elemen <style> di bagian head.

contoh

Gaya internal ditentukan di elemen <style> di bagian <head> halaman HTML:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}
h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Coba Sendiri

Gaya CSS dalam

Gaya dalam (juga disebut gaya inline) dapat digunakan untuk menerapkan gaya unik untuk elemen tunggal.

Untuk menggunakan gaya dalam, tambahkan properti style ke elemen yang relevan. Properti style dapat mengandung setiap properti CSS.

contoh

Gaya dalam ditentukan di properti "style" elemen yang relevan:

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">Ini adalah judul</h1>
<p style="color:red;">Ini adalah paragraf.</p>
</body>
</html>

Coba Sendiri

petunjuk:gaya dalam (juga disebut gaya inline) kehilangan banyak kelebihan laman gaya (dengan menggabungkan konten dan presentasi). Gunakan metode ini dengan hati-hati.

berbagai laman gaya

jika ada beberapa properti yang diatur untuk pemilih yang sama (elemen) di berbagai laman gaya, maka akan digunakan nilai dari laman gaya yang dibaca terakhir.

asumsikan adagaya eksternalgaya yang diatur untuk elemen <h1> adalah seperti berikut:

h1 {
  color: navy;
}

lalu, asumsikan adagaya internaljuga diatur gaya berikut untuk elemen <h1>:

h1 {
  warna: kuning;    
}

contoh

jika gaya internal dihubungkan ke laman gaya eksternalsetelahnyajika diatur, elemen <h1> akan berwarna oranye:

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

Coba Sendiri

contoh

namun, jika dihubungkan ke laman gaya eksternalsebelumnyaDefinisi gaya internal, maka elemen <h1> akan menjadi biru tua:

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

Coba Sendiri

Urutan Lapisan

Ketika disediakan beberapa gaya untuk elemen HTML yang sama, gaya mana yang akan digunakan?

Semua gaya di halaman akan disusun menurut aturan berikut untuk menjadi tabel gaya 'virtual' baru, di mana prioritas pertama adalah yang tertinggi:

  1. Gaya dalam teks (pada elemen HTML)
  2. Tabel gaya luar dan internal (pada bagian head)
  3. Gaya Baku Peramban

Oleh karena itu, gaya dalam teks memiliki prioritas tertinggi, dan akan menutupi gaya luar dan internal serta gaya baku peramban.

Coba Sendiri