Cara Menambahkan CSS

Saat browser membaca style sheet, browser akan memformat dokumen HTML sesuai dengan informasi di style sheet.

Tiga Cara Memasukkan CSS

Ada tiga cara menyisipkan style sheet:

• CSS eksternal

• CSS dalaman

• CSS sebaris

CSS eksternal

Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs web hanya dengan mengubah satu file!

Setiap halaman HTML harus menyertakan referensi ke file style sheet eksternal di dalam elemen <link>, di dalam bagian head.

Style sheet 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 tampilan file "mystyle.css":

Internal CSS

Lembar gaya internal dapat digunakan jika satu halaman HTML memiliki gaya yang unik.

Gaya internal didefinisikan di dalam elemen <style>, di dalam bagian head.

Inline CSS

Gaya sebaris dapat digunakan untuk menerapkan gaya unik pada satu elemen.

Untuk menggunakan gaya sebaris, tambahkan atribut style ke elemen yang relevan. Atribut style dapat berisi properti CSS apa pun.

Tip: Gaya inline kehilangan banyak keuntungan dari style sheet (dengan mencampurkan konten dengan presentasi). Gunakan metode ini dengan hemat.

Multiple Style Sheets

Jika beberapa properti telah ditentukan untuk pemilih (elemen) yang sama dalam style sheet yang berbeda, nilai dari style sheet yang terakhir dibaca akan digunakan. 

Urutan Bertingkat

Gaya apa yang akan digunakan ketika ada lebih dari satu gaya yang ditentukan untuk sebuah elemen HTML?

Semua gaya dalam halaman akan "mengalir" ke dalam lembar gaya "virtual" baru dengan aturan berikut, di mana nomor satu memiliki prioritas tertinggi:

1. Gaya sebaris (di dalam elemen HTML)

2. Style sheet eksternal dan internal (di bagian kepala)

3. bawaan peramban

Jadi, gaya sebaris memiliki prioritas tertinggi, dan akan menggantikan gaya eksternal dan internal serta default browser.