Ketika browser memuat halaman website, browser akan memformat dokumen HTML sesuai dengan style yang telah ditentukan.
Jenis-jenis CSS yang perlu diketahui
CSS dibagi menjadi tiga berdasarkan penempatan kodenya, yaitu:
- External CSS
- Internal CSS
- Inline CSS
External CSS
Dengan external CSS, dapat mengubah tampilan seluruh situs web hanya dengan mengubah satu file.
Setiap halaman HTML harus menyertakan referensi ke file external CSS di dalam elemen <link>, yang terdapat di dalam bagian head.
Contoh
External CSS ditentukan dalam elemen <link>, di dalam tag <head> yang merupakan bagian dari halaman HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>Ini adalah heading</h1>
<p>Ini adalah sebuah paragraf.</p>
</body></html>
External CSS dapat ditulis dalam teks editor, dan harus disimpan dengan ekstensi .css.
File .css eksternal tidak boleh berisi tag HTML apa pun .
Berikut adalah ini file mystyle.css:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Internal CSS
Internal CSS dapat digunakan jika satu halaman HTML memiliki style yang unik.
Internal CSS didefinisikan di dalam elemen <style>, yang terdapat di dalam bagian head.
Contoh
Internal CSS ditentukan dalam bagian elemen <style>, di dalam tag <head> yang merupakan bagian 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 sebuah paragraf.</p>
</body></html>
Inline CSS
Inline CSS dapat digunakan untuk menerapkan style yang berbeda untuk satu elemen.
Untuk menggunakan inline CSS, tambahkan atribut style ke elemen yang ingin diubah tampilannya. Atribut style dapat berisi properti CSS apa pun.
Contoh
Style inline ditentukan dalam atribut “style”:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">Ini adalah heading</h1>
<p style="color:red;">Ini adalah sebuah paragraf.</p>
</body></html>
Multiple Style Sheets
Jika suatu properti diatur oleh selector yang sama dengan menggunakan stylesheet yang berbeda, nilai stylesheet terakhir yang akan digunakan.
Contoh
Jika internal CSS didefinisikan setelah link untuk external CSS, elemen <h1> akan berubah warna 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>Style dokumen ini merupakan kombinasi dari stylesheet eksternal dan stylesheet internal</p>
</body></html>
Contoh
Namun, jika internal CSS didefinisikan sebelum link untuk external CSS, elemen <h1> akan berubah warna 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>Style dokumen ini merupakan kombinasi dari stylesheet eksternal dan stylesheet internal</p>
</body></html>
Cascading Order
Style apa yang akan digunakan bila ada lebih dari satu style yang ditentukan untuk elemen HTML?
Terdapat aturan dalam menentukan style yang akan digunakan jika dalam satu file HTML terdapat lebih dari satu definisi CSS, berikut merupakan urutan prioritas aturan dalam menentukan style:
1. Inline CSS
2. External dan Internal CSS (yang terdapat dalam elemen <head>)
3. Browser default
Kesimpulan nya, apabila dalam elemen tersebut terdapat inline CSS maka style tersebut akan digunakan menggantikan external , internal CSS dan browser default.
Tutorial sebelumnya : Apa Itu CSS
Tutorial setelahnya : Penggunaan CSS Selector
Semua Tutorial CSS : Tutorial CSS