Ketika browser membaca style sheet, browser akan memformat dokumen HTML sesuai dengan informasi di style sheet.
Section Artikel
Tiga Cara Menyisipkan CSS
Ada beberapa cara yang dapat dilakukan untuk menggunakan CSS, 3 cara tersebut adalah :
- CSS Eksternal
- CSS internal
- CSS sebaris
CSS Eksternal
Dengan eksternal CSS, kita dapat mengubah tampilan seluruh situs web hanya dengan mengubah satu file!
Setiap halaman HTML harus menyertakan referensi ke file eksternal CSS di dalam elemen, di dalam bagian head halaman HTML tersebut.
Contoh
Eksternal CSS yang ditentukan dalam elemen , di dalam bagian dari halaman HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="mystyle.css"> </head> <body> <h1>Ini adalah Heading</h1> <p>Ini adalah Paragaraf.</p> </body> </html>
Eksternal CSS dapat ditulis di 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”:
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
Internal CSS dapat digunakan jika satu halaman HTML memiliki gaya/tampilan yang unik.
Internal CSS ditentukan di dalam elemen
Contoh
Gaya internal ditentukan dalam elemen
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>Ini Heading</h1>
<p>Ini Paragraf.</p>
</body>
</html>Inline CSS
Inline CSS dapat digunakan untuk menerapkan gaya unik untuk satu elemen. Untuk menggunakan Inline CSS, tambahkan atribut ke elemen yang relevan. Atribut style dapat berisi properti CSS apa pun.
Contoh
Inline CSS ditentukan dalam atribut “gaya” 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 ini menghilangkan beberapa kelebihan dari CSS yang dikenal untuk meringkas code.Gunakan metode ini dengan hemat.
Multiple Sytle CSS
Jika beberapa properti telah ditentukan untuk pemilih (elemen) yang sama di halaman CSS berbeda, nilai dari style terakhir yang akan digunakan.
Asumsikan bahwa lembar gaya eksternal memiliki gaya berikut untuk elemen
h1 {
color: navy;
}Kemudian, asumsikan bahwa css internal juga memiliki gaya berikut untuk elemen
h1 {
color: orange;
}Contoh
Jika CSS internal ditentukan setelah ditautkan ke CSS eksternal, elemen akan menjadi “oranye”:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
<body>
<h1>Ini adalah Heading</h1>
<p>Ini adalah Paragraf.</p>
</body>
</html>Contoh
Namun, jika CSS internal ditentukan sebelum tautan ke CSS eksternal, elemen akan menjadi “navy”:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>Ini adalah Heading</h1>
<p>Ini adalah Paragraf.</p>
</body>
</html>Urutan CSS
Style yang mana yang akan digunakan jika ada lebih dari satu style yang ditentukan untuk elemen HTML?Semua Style dalam halaman akan “CSS” menjadi lembar style “virtual” baru dengan aturan berikut, dengan nomor satu memiliki prioritas tertinggi:
- Inline CSS (di dalam elemen HTML)
- Eksternal dan internal CSS (di bagian kepala)
- Default browser
Jadi, inline css memiliki prioritas tertinggi, dan akan menggantikan Eksternal dan internal style serta default browser.
