CSS: Inline, Internal, dan External
Cascading Style Sheets (CSS) adalah teknologi yang digunakan untuk mempercantik tampilan halaman web dengan mengontrol tata letak, warna, font, dan berbagai properti lainnya. Dalam penggunaannya, CSS dapat disisipkan ke dalam dokumen HTML dalam beberapa cara yang berbeda, yaitu CSS inline, internal, dan eksternal. Artikel ini akan menjelaskan ketiga cara tersebut beserta contoh dan penjelasan detailnya.
CSS Inline
CSS inline merujuk pada gaya CSS yang didefinisikan langsung di dalam elemen HTML tertentu. Ini berarti gaya CSS diberikan menggunakan atribut style di dalam tag HTML. Contoh sederhananya adalah sebagai berikut:
htmlCopy code
<p style="color: red; font-size: 16px;">Ini adalah teks dengan gaya inline.</p>
Penjelasan:
- Dalam contoh di atas, gaya inline diterapkan langsung pada elemen
<p>. - Setiap properti CSS didefinisikan dalam atribut
style, dipisahkan dengan tanda titik-koma. - Gaya inline berlaku hanya untuk elemen HTML spesifik yang didefinisikan, dan tidak dapat digunakan kembali di elemen lain.
CSS Internal
CSS internal merujuk pada gaya CSS yang didefinisikan di dalam bagian head dokumen HTML yang sama dengan elemen yang ingin di-styling. Gaya CSS ini ditulis di dalam tag <style> di dalam elemen <head>. Berikut contohnya:
htmlCopy code
<!DOCTYPE html> <html> <head> <title>Contoh CSS Internal</title> <style> p { color: blue; font-size: 18px; } </style> </head> <body> <p>Ini adalah teks dengan gaya internal.</p> </body> </html>
Penjelasan:
- Gaya CSS didefinisikan di dalam tag
<style>di dalam elemen<head>. - Selektor CSS (dalam contoh di atas,
p) digunakan untuk menargetkan elemen HTML tertentu. - Properti CSS yang didefinisikan di dalam blok gaya akan diterapkan pada semua elemen yang sesuai dengan selektor tersebut di dalam dokumen.
CSS External
CSS eksternal merujuk pada gaya CSS yang didefinisikan di dalam file terpisah dengan ekstensi .css, dan kemudian direferensikan di dalam dokumen HTML. Contoh sederhananya adalah sebagai berikut:
style.css:
cssCopy code
/* style.css */ p { color: green; font-size: 20px; }
index.html:
htmlCopy code
<!DOCTYPE html> <html> <head> <title>Contoh CSS Eksternal</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p>Ini adalah teks dengan gaya eksternal.</p> </body> </html>
Penjelasan:
- Gaya CSS didefinisikan dalam file terpisah dengan ekstensi
.css. - Dalam dokumen HTML, file CSS eksternal direferensikan menggunakan tag
<link>di dalam elemen<head>. - CSS eksternal memungkinkan penggunaan kembali gaya di seluruh situs web, karena file CSS dapat direferensikan di banyak halaman HTML.
Kesimpulan
- CSS inline, internal, dan external adalah tiga cara berbeda untuk menerapkan gaya CSS ke halaman web.
- CSS inline didefinisikan langsung di dalam elemen HTML menggunakan atribut
style. - CSS internal didefinisikan di dalam tag
<style>di dalam elemen<head>dokumen HTML yang sama. - CSS eksternal didefinisikan di dalam file terpisah dengan ekstensi
.cssdan direferensikan di dalam dokumen HTML menggunakan tag<link>. - Pemilihan antara ketiga cara ini tergantung pada kebutuhan proyek dan preferensi pengembang web.