Cara Menambahkan CSS
Ketika browser membaca style sheet, maka akan memformat dokumen HTML sesuai dengan informasi di style sheet.
Tiga Cara Menyisipkan CSS
Ada tiga cara untuk menyisipkan style sheet:
- CSS eksternal
- CSS internal
- CSS sebaris
CSS eksternal
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
Gaya eksternal didefinisikan dalam elemen <link>, di dalam bagian <head> halaman HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" 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 adalah tampilan file "mystyle.css":
"gayaku.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Catatan: Jangan tambahkan spasi antara nilai properti dan unit:
Salah (spasi): margin-left: 20 px;
Benar (tanpa spasi):margin-left: 20px;
CSS internal
Lembar gaya internal dapat digunakan jika satu halaman HTML memiliki gaya yang unik.
Gaya internal didefinisikan di dalam elemen <style>, di dalam bagian kepala.
Contoh
Gaya internal didefinisikan dalam elemen <style>, di dalam 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>
CSS sebaris
Gaya sebaris dapat digunakan untuk menerapkan gaya unik untuk satu elemen.
Untuk menggunakan gaya sebaris, tambahkan atribut gaya ke elemen yang relevan. Atribut style dapat berisi properti CSS apa pun.
Contoh
Gaya sebaris didefinisikan dalam atribut "gaya" dari elemen yang relevan:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This
is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Tip: Gaya sebaris kehilangan banyak keuntungan dari lembar gaya (dengan mencampurkan konten dengan presentasi). Gunakan metode ini dengan hemat.
Beberapa Lembar Gaya
Jika beberapa properti telah ditentukan untuk pemilih (elemen) yang sama di lembar gaya yang berbeda, nilai dari lembar gaya yang terakhir dibaca akan digunakan.
Asumsikan bahwa lembar gaya eksternal memiliki gaya berikut untuk elemen <h1>:
h1
{
color: navy;
}
Kemudian, asumsikan bahwa lembar gaya internal juga memiliki gaya berikut untuk elemen <h1>:
h1
{
color: orange;
}
Contoh
Jika gaya internal ditentukan setelah tautan ke lembar gaya 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 gaya internal ditentukan sebelum tautan ke lembar gaya eksternal, elemen <h1> akan menjadi "navy":
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Urutan bertingkat
Gaya apa yang akan digunakan ketika ada lebih dari satu gaya yang ditentukan untuk elemen HTML?
Semua gaya dalam sebuah halaman akan "mengalir" ke dalam lembar gaya "virtual" baru dengan aturan berikut, di mana nomor satu memiliki prioritas tertinggi:
- Gaya sebaris (di dalam elemen HTML)
- Lembar gaya eksternal dan internal (di bagian kepala)
- Peramban bawaan
Jadi, gaya sebaris memiliki prioritas tertinggi, dan akan menggantikan gaya eksternal dan internal serta default browser.
Pernah mendengar tentang W3Schools Spaces ? Di sini Anda dapat membuat situs web Anda sendiri, atau menyimpan cuplikan kode untuk digunakan nanti, secara gratis.
Mulai gratis* tidak perlu kartu kredit