Cara Menambahkan CSS dan Hierarki Prioritas
Cara Menambahkan CSS ke HTML
Ada tiga cara umum untuk menghubungkan CSS dengan HTML.
1. Inline CSS
Menulis style langsung di tag HTML melalui atribut style.
<p style="color: red; font-size: 18px;">
Teks ini berwarna merah dan lebih besar.
</p>Kelebihan:
- Cepat untuk percobaan kecil.
Kekurangan:
- Sulit dirawat jika banyak elemen.
- Mencampur struktur dan styling di satu tempat.
2. Internal CSS
Menulis CSS di dalam tag <style> pada bagian <head>.
<head>
<style>
p {
color: blue;
}
</style>
</head>Kelebihan:
- Semua style ada di satu file HTML.
Kekurangan:
- Tidak terpisah dari struktur.
- Tidak efektif untuk proyek dengan banyak halaman.
3. External CSS
Menulis CSS di file terpisah dengan ekstensi .css dan menghubungkannya menggunakan <link> di <head>.
<head>
<link rel="stylesheet" href="styles.css" />
</head>styles.css:
body {
font-family: "Poppins", sans-serif;
}Kelebihan:
- Struktur (HTML) dan tampilan (CSS) terpisah.
- Satu file CSS bisa digunakan di banyak halaman.
- Lebih rapi dan mudah dikelola.
Ini adalah cara yang digunakan pada contoh styles.css di proyek portfolio.
Hierarki CSS (Spesifisitas dan Prioritas)
Ketika ada lebih dari satu aturan yang berlaku untuk elemen yang sama, CSS menggunakan sistem prioritas:
Secara umum:
!important- Inline style
- ID selector (
#id) - Class, pseudo-class, attribute selector (
.class,a:hover,[type="text"]) - Selector tag (
p,h1,div) - Urutan penulisan (aturan yang lebih bawah akan mengoverride aturan sebelumnya jika spesifisitas sama)
Contoh:
p {
color: black;
}
.highlight {
color: blue;
}
#teks-utama {
color: red;
}Untuk elemen:
<p id="teks-utama" class="highlight">Contoh teks</p>Warna yang akan digunakan adalah merah (#teks-utama), karena ID memiliki prioritas lebih tinggi daripada class dan selector tag.
Jika kita menambahkan inline style:
<p
id="teks-utama"
class="highlight"
style="color: green;"
>
Contoh teks
</p>Maka warna yang dipakai adalah hijau, karena inline style lebih kuat.
Penggunaan !important:
p {
color: black !important;
}!important akan mengalahkan aturan lain, namun sebaiknya digunakan dengan hati-hati karena bisa membuat stylesheet sulit dirawat.