Ketika browser membaca style sheet, itu akan memformat dokumen HTML sesuai dengan informasi dalam style sheet.
Tiga Cara untuk Memasukkan CSS
Ada tiga cara memasukkan style sheet:
- External style sheet
- Internal style sheet
- Inline style
External style sheet
Dengan eksternal style sheet, Anda dapat mengubah tampilan seluruh situs web dengan mengubah hanya satu file!
Setiap halaman harus menyertakan referensi ke file style sheet eksternal di dalam elemen <link>. Elemen <link> masuk ke dalam bagian <head>:
Contoh:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Lembar style eksternal dapat ditulis di editor teks apa pun. File tidak boleh mengandung tag html apa pun. File lembar style harus disimpan dengan ekstensi .css.
Berikut ini adalah tampilan "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 Style Sheet
Internal Style Sheet dapat digunakan jika satu halaman memiliki Style yang unik.
Internal Style didefinisikan dalam elemen <style>, di dalam bagian <head> dari halaman HTML:
Contoh:
<!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>
Inline Styles
Inline Styles dapat digunakan untuk Styles tunggal.
Untuk menggunakan Inline Styles, tambahkan Styles ke elemen yang relevan. Atribut style dapat berisi properti CSS apa pun.
Contoh di bawah ini menunjukkan cara mengubah warna dan margin kiri elemen <h1>:
<!DOCTYPE html> <html> <body> <h1 style="color:blue;margin-left:30px;">This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
Catatan: Inline Styles kehilangan banyak keuntungan dari CSS. Gunakan metode ini dengan hemat
Multiple Style Sheets
Styles apa yang digunakan untuk elemen HTML?
Semua Styles di halaman akan "mengalir" di lembar Styles "virtual" baru dengan mengikuti aturan, di mana nomor satu memiliki prioritas tertinggi:
Inline Styles (di dalam elemen HTML)
eksternal style sheet dan internal (di bagian kepala)
Default browser
Jadi, Styles inline memiliki prioritas tertinggi, dan akan mengesampingkan Styles eksternal dan internal dan default browser.
Lihat Tutorial Lengkap Tentang CSS Disini:
1. Artikel: Tutorial CSS
2. Playlist Youtube: Tutorial CSS Dasar