Cara Menggunakan Css Inline Internal Dan Eksternal

4 min read Jul 26, 2024

Cara Menggunakan CSS Inline, Internal, dan Eksternal

CSS (Cascading Style Sheets) adalah bahasa desain yang digunakan untuk mengatur tampilan situs web. Ada tiga cara utama untuk menggunakan CSS: inline, internal, dan eksternal.

CSS Inline

CSS inline digunakan untuk menerapkan gaya langsung pada elemen HTML. Ini dilakukan dengan menggunakan atribut style pada elemen HTML.

Contoh:

Ini adalah paragraf dengan gaya inline.

Keuntungan:

Mudah diterapkan dan spesifik untuk satu elemen.

Kerugian:

Kode CSS tidak terstruktur dan sulit dikelola, terutama untuk situs web yang kompleks.
Sulit untuk digunakan kembali gaya pada elemen lain.
Meningkatkan ukuran kode HTML.

CSS Internal

CSS internal diterapkan dalam dokumen HTML, di dalam tag <style> yang berada di dalam <head> dokumen HTML.

Contoh:




  Contoh CSS Internal
  


  Ini adalah paragraf dengan gaya internal.

Keuntungan:

Lebih terstruktur daripada CSS inline.
Dapat digunakan kembali untuk elemen lain dalam dokumen yang sama.

Kerugian:

Masih sulit untuk dikelola untuk situs web yang kompleks.
Sulit untuk menggunakan kembali gaya pada situs web lain.

CSS Eksternal

CSS eksternal disimpan dalam file terpisah dengan ekstensi .css. File CSS ini kemudian dihubungkan ke dokumen HTML dengan menggunakan tag <link> di dalam <head> dokumen HTML.

Contoh:

style.css:

p {
  color: green;
  font-size: 20px;
}

index.html:




  Contoh CSS Eksternal
  


  Ini adalah paragraf dengan gaya eksternal.

Keuntungan:

Sangat terstruktur dan mudah dikelola.
Dapat digunakan kembali pada situs web lain.
Memisahkan konten dan gaya, sehingga kode HTML menjadi lebih bersih dan mudah dibaca.
Memudahkan untuk mengubah gaya secara keseluruhan tanpa harus mengubah kode HTML.

Kerugian:

Membutuhkan lebih banyak file untuk situs web.

Kesimpulan

Pilihan metode CSS terbaik tergantung pada kebutuhan dan kompleksitas situs web Anda. Untuk situs web yang sederhana, CSS inline mungkin cukup. Untuk situs web yang lebih kompleks, CSS internal dan eksternal memberikan struktur dan kemampuan manajemen yang lebih baik.

Saran:

Gunakan CSS eksternal untuk situs web yang kompleks.
Gunakan CSS internal untuk gaya yang spesifik untuk satu halaman.
Gunakan CSS inline hanya jika diperlukan untuk gaya yang sangat spesifik pada satu elemen.

Cara Menggunakan Css Inline Internal Dan Eksternal