![[Tutoriial CSS #4] Cara Menambahkan CSS](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijomfZi5DI02xU6xzzQyXst-1GynvsR9VHvheSCLpQx_mH3eyDkHiOnRvMilvMlxDvdzNxl4VVk0tNyjQCQizKcyzunPUVzB1h1HoX71WSXtzONSgu38_AOJFr707bNTdnLO_z-m9tb4Vz/w920-h400-p-k-no-nu/CSS.PNG)
[Tutoriial CSS #4] Cara Menambahkan CSS
Cara Menambahkan CSS
Ketika browser membaca Style Sheets, itu akan memformat dokumen HTML sesuai dengan informasi dalam Style Sheets.
Tiga Cara Memasukkan CSS
Ada tiga cara memasukkan style sheet:
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>Ini adalah heading </h1>
<p>Ini adalah Paragraf </p>
</body>
</html>
Style Sheets 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;
CSS internal
Style Sheets internal dapat digunakan jika satu halaman HTML tunggal 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> dari 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>
CSS sebaris
Gaya inline dapat digunakan untuk menerapkan gaya unik untuk elemen tunggal.
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 "style" 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>
Note: Gaya inline kehilangan banyak keuntungan dari Style Sheets (dengan mencampurkan konten dengan presentasi). Gunakan metode ini dengan hemat.
Lembar Style Berganda
Jika beberapa properti telah ditentukan untuk pemilih (elemen) yang sama di Style Sheets yang berbeda, nilai dari Style Sheets baca terakhir akan digunakan.
Asumsikan bahwa Style Sheets eksternal memiliki gaya 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 gaya internal ditentukan setelah tautan ke Style Sheets 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 Style Sheets eksternal, elemen <h1> akan menjadi "navy":
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>Gaya apa yang akan digunakan ketika ada lebih dari satu gaya yang ditentukan untuk elemen HTML?
Semua gaya dalam halaman akan "mengalir" ke Style Sheets "virtual" baru dengan aturan berikut, di mana nomor satu memiliki prioritas tertinggi:
- Gaya sebaris (di dalam elemen HTML)
- Style Sheets eksternal dan internal (di bagian kepala)
- Default browser
Jadi, gaya sebaris memiliki prioritas tertinggi, dan akan menggantikan gaya eksternal dan internal dan bawaan peramban.
0 Response to "[Tutoriial CSS #4] Cara Menambahkan CSS"
Post a Comment