CSS di HTML
Jika Anda baru belajar CSS, Anda mungkin kebingungan dimana CSS harus ditulis.
Apakah ditulis di file yang sama dengan HTML? Atau, ditulis di file CSS terpisah?
Oleh karena itu mari kita pelajari bebera metode untuk membuat CSS di HTML, agar kita bisa memilih metode yang tepat.
Cara Membuat CSS di HTML
Ada 3 cara yang bisa kita gunakan untuk menambahkan CSS ke HTML:
- Inline: menggunakan atribut
style
di dalam tag HTML. - Internal: mengguankan tag
<style>
di<head>
HTML. - Eksternal: menggunakan tag
<link>
untuk menautkan file CSS eksternal (di luar HTML).
Mari kita pelajari satu per satu.
1. CSS Inline
CSS yang ditulis dalam atribut style
tag HTML disebut CSS inline (sebaris). Metode ini hanya mempengaruhi satu elemen HTML dimana atribut style
dideklarasikan.
Kita bisa memasukkan lebih dari satu deklarasi CSS (properti dan nilai) dipisahkan dengan titik koma (;
).
Metode ini memiliki beberapa keterbatasan, salah satunya kita tidak bisa menulis pseudo-class seperti :visited
, :hover
, :active
dan sebagainya.
Saat membuat aplikasi kita jarang menggunakan metode ini, selain memiliki beberapa keterbatasan, kode CSS bercampur dengan HTML sehingga sulit dikelola.
Contoh berikut mengubah warna teks dan latar belakang <h1>
menggunakan metode CSS inline:
<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS</title>
</head>
<body>
<h1 style="color: blue; background-color: bisque">Belajar CSS</h1>
</body>
</html>
2. CSS Internal
CSS yang ditulis di dalam tag <head>
yang dibungkus dengan tag <style>
disebut CSS internal. Metode ini dapat digunakan untuk mengatur gaya satu hamalan HTML.
CSS internal biasanya digunakan saat kita belajar CSS karena kita bisa menulis CSS dengan bebas tanpa batasan seperti metode sebelumnya.
Selain itu, kita juga tidak perlu ribet membuat file CSS terpisah.
Tapi, saat membuat aplikasi, metode ini juga jarang digunakan karena CSS yang kita tulis bercampur dengan HTML.
Contoh berikut menambahkan warna teks dan latar belakang ke semua elemen <h1>
dan menambahkan warna teks yang berbeda ke semua elemen <p>
:
<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS</title>
<style>
h1 {
color: blue;
background-color: bisque;
}
p {
color: gray;
}
</style>
</head>
<body>
<h1>Belajar CSS</h1>
<p>Saya sedang belajar CSS</p>
</body>
</html>
Atribut type="text/css"
di dalam tag <style>
tidak perlu ditulis secara eksplisit karena itu adalah nilai default-nya, dibelakang layar browser menggunakan atribut tersebut secara otomatis.
3. CSS Eksternal
CSS yang ditulis di luar file HTML disebut CSS eksternal.
Metode inilah yang umum digunakan saat membuat aplikasi, kode CSS yang kita tulis terpisah dari HTML sehingga dapat dikelola dengan mudah.
Kita bisa memanggil CSS eksternal menggunakan tag <link>
di dalam tag <head>
.
Di dalam tag <link>
kita perlu menulis atribut href
yang mengarah ke file HTML yang ingin dipanggil.
Kemudian atribut rel
diisi dengan nilai stylesheet
agar browser mengetahui bahwa file yang kita muat adalah file CSS.
Contoh, mari kita buat file CSS dengan nama style.css
(pastikan file ini memiliki ekstensi .css
) yang berisi kode CSS berikut:
h1 {
color: blue;
background-color: bisque;
}
p {
color: gray;
}
Kemudian buat file HTML index.html
di folder yang sama berisi kode HTML berikut:
<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<h1>Belajar CSS</h1>
<p>Saya sedang belajar CSS</p>
</body>
</html>
Coba buka file HTML tersebut di browser, nanti file CSS yang kita sematkan otomatis diterapkan ke halaman tersebut.
Selain bisa digunakan untuk memanggil CSS yang tersimpan di komputer.
Metode ini juga bisa kita gunakan untuk memanggil CSS pihak ketiga yang ada di internet, misalnya Bootstrap:
<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
crossorigin="anonymous"
/>
</head>
<body>
<h1>Belajar CSS</h1>
<p>Saya sedang belajar CSS</p>
</body>
</html>
Untuk saat ini abaikan atribut integrity
dan crossorigin
.
Metode Mana yang Harus Digunakan?
Hindari penggunaan CSS inline (di dalam atribut style
) karena memiliki beberapa batasan dan sulit di baca ketika CSS yang kita tulis banyak, kecuali ada alasan tertentu.
Begitu pula menulis CSS internal, sebaiknya dihindari karena kode CSS bercampur dengan HTML sehingga akan sulit dikelola apalagi kalau CSS-nya banyak.
CSS internal cocok digunakan ketika belajar karena kita bisa menulis CSS dengan leluasa dan tak perlu repot membuat file CSS terpisah.
Gunakan CSS eksternal ketika kita membuat aplikasi sungguhan karena CSS terpisah dengan HTML sehingga aplikasi kita dapat dikelola dengan mudah.