Ketika browser membaca style sheet, itu akan memformat dokumen HTML menurut informasi di style sheet.
Tiga Cara Sisipkan CSS
Ada tiga cara untuk memasukkan style sheet:
Eksternal Style Sheet
Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs Web dengan mengubah hanya satu file!
Setiap halaman harus menyertakan referensi ke file style sheet eksternal dalam <link> elemen. The <link> elemen berjalan di dalam <head> bagian:
Style sheet eksternal dapat ditulis dalam editor teks. File harus tidak mengandung tag html. Style sheet file harus disimpan dengan .css ekstensi.
Berikut adalah bagaimana "myStyle.css" terlihat:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
} | Jangan menambahkan spasi antara nilai properti dan unit (seperti margin-left:20 px; ). Cara yang benar adalah: margin-left:20px; |
|---|
Style Sheet internal
Style sheet internal dapat digunakan jika satu halaman tunggal memiliki gaya yang unik.
Gaya internal didefinisikan dalam <style> elemen, dalam <head> bagian dari halaman HTML:
Contoh
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head> Cobalah sendiri " Gaya inline
Gaya inline dapat digunakan untuk menerapkan gaya yang unik untuk elemen tunggal.
Untuk menggunakan gaya inline, menambahkan atribut style untuk elemen yang relevan. Atribut style dapat berisi properti CSS.
Contoh di bawah ini menunjukkan bagaimana untuk mengubah warna dan margin kiri dari <h1> elemen:
| Gaya inline kehilangan banyak keuntungan dari style sheet (dengan mencampurkan konten dengan presentasi). Gunakan metode ini hemat! |
|---|
Beberapa Style Sheets
Jika beberapa properti telah ditetapkan untuk pemilih yang sama (elemen) di style sheet yang berbeda, nilai dari style sheet terakhir dibaca akan digunakan.
Contoh
Asumsikan bahwa style sheet eksternal memiliki gaya berikut untuk <h1> elemen:
h1
{
color: navy;
}kemudian, menganggap bahwa internal style sheet juga memiliki gaya berikut untuk <h1> elemen:
h1
{
color: orange;
}Jika gaya internal yang didefinisikan setelah link ke style sheet eksternal, <h1> elemen akan "orange" :
Contoh
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head> Cobalah sendiri " Namun, jika gaya internal didefinisikan sebelum link ke style sheet eksternal, <h1> elemen akan "navy" :
Contoh
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head> Cobalah sendiri " Cascading Pesanan
Gaya apa yang akan digunakan ketika ada lebih dari satu gaya tertentu untuk elemen HTML?
Secara umum kita dapat mengatakan bahwa semua gaya akan "cascade" ke dalam "virtual" style sheet baru dengan aturan berikut, di mana nomor satu memiliki prioritas tertinggi:
- Inline gaya (dalam elemen HTML)
- Eksternal dan internal style sheet (di bagian kepala)
- browser default
Jadi, gaya inline (di dalam elemen HTML tertentu) memiliki prioritas tertinggi, yang berarti bahwa itu akan menimpa gaya didefinisikan dalam <head> tag, atau dalam style sheet eksternal, atau nilai default browser.
Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 » Latihan 4»