HTML dan CSS memiliki keterikatan yang erat. Karena HTML adalah bahasa markup (fondasi situs) dan CSS memperbaiki style (untuk semua aspek yang terkait dengan tampilan website), maka kedua bahasa pemrograman ini harus berjalan beriringan.
Tak hanya penting di sisi teknis, CSS juga sangat berpengaruh pada tampilan sebuah website. Tentunya Anda tidak ingin website terlihat seperti situs yang ‘telanjang’ tanpa modifikasi apa pun, bukan?
Untuk menggunakan CSS, kita harus memanggil CSS terlebih dulu. Dalam artikel ini, akan kita bahas 3 metode pemanggilan CSS di HTML yaitu internal, eksternal, dan inline, beserta kelebihan dan kekurangan dari masing-masing metode tersebut. Simak artikel ini sampai selesai, ya?
Metode Internal
Metode internal cocok dipakai untuk memanggil CSS saat kita ingin memiliki satu halaman CSS yang unik. Memanggil dengan metode internal berarti mencampurkan tag HTML dengan script CSS. Cara tersebut didefinisikan pada tag <style></style>, kemudian dibungkus pada tag <head></head>.Penulisan CSS dengan metode Internal :
<!DOCTYPE html>
<html>
<head>
<title>Contoh metode internal</title>
<style>
h1 {
background-color: orange;
}
p {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h1>Belajar CSS</h1>
<p>Memanggil css dengan metode internal</p>
</body>
</html>
Kelebihan metode internal
Kelebihan menggunakan metode internal saat memanggil CSS di HTML yaitu:
- Style yang diberikan bisa lebih leluasa. Anda bisa mengatur style yang unik di setiap halaman sehingga menghasilkan gaya yang dinamis. Hal itu dikarenakan file CSS bisa berbeda dengan halaman lainnya.
- Waktu pembuatan lebih efisien dan efektif. Hal itu dikarenakan file CSS disimpan pada halaman dengan tag <head></head>.
Kekurangan metode internal
Kekurangan menggunakan metode internal saat memanggil CSS di HTML yaitu :
- Perlu memberi style di setiap halaman. Jadi, sebaiknya Anda meminimalisir CSS jika akan menggunakan metode internal.
- Mengulang unduhan CSS di setiap peralihan halaman. Hal itu dikarenakan metode internal tidak dapat di cache oleh browser.
Metode Eksternal
Cara memanggil CSS di HTML selanjutnya bisa dilakukan dengan metode eksternal. Metode ini sangat disarankan untuk digunakan terutama saat script sudah banyak. Memanggil dengan metode eksternal dapat diartikan bahwa Anda akan memisahkan file CSS itu sendiri.Pemisahan antara file HTML dan file CSS membuat metode eksternal paling sering direkomendasikan dan digunakan dalam memanggil CSS.
Penulisan CSS dengan metode eksternal :
<!DOCTYPE html> <html> <head> <title>Belajar CSS</title> <link rel="stylesheet" href="https://bloganakbangsa.com/editor/css/memanggil-css/mystyle.css"> </head> <body> <h1>Belajar CSS</h1> <p>Memanggil css dengan metode external</p> </body> </html>
Bentuk atau tampilan file mystyle.css pada contoh diatas yang disimpan eksternal :
h1 {
background-color: grey;
color : black;
}
p {
background-color: red;
color: white;
}
Kelebihan metode eksternal
Kelebihan menggunakan metode eksternal saat memanggil CSS di HTML yaitu:
- Situs menjadi lebih cepat. Browser akan otomatis mengunduh halaman HTML dan file CSS tertaut saat ada pengunjung di websitemu.
- Efisien karena bisa melakukan perubahan sekali saja pada satu file. Anda bisa memperbarui semua halaman dengan memberi style pada satu file saja. Artinya, satu file CSS yang sama bisa digunakan di banyak halaman.
- Browser akan otomatis melakukan cache di file CSS sehingga permintaan browser lebih ringan. Hal ini akan banyak membantu terutama jika file CSS yang Anda gunakan ukurannya besar.
Kekurangan metode eksternal
Anda harus menunggu hingga proses pemanggilan sempurna untuk melihat hasilnya. Halaman tidak akan tampil secara sempurna sampai file CSS selesai dipanggil.
Metode Inline
Metode ketiga adalah memanggil CSS di HTML dengan inline. Dengan metode ini maka Anda akan melakukan gaya sebaris. Metode ini bekerja dengan cara memasukkan CSS pada tag HTML secara langsung memakai atribut style.Metode inline sebaiknya dipakai jika Anda ingin menerapkan style unik untuk elemen tunggal. Anda tinggal menambah atribut style ke elemen yang akan diberi CSS jika ingin menggunakan inline.
Penulisan CSS dengan metode Inline :
<!DOCTYPE html> <html> <head> <title>Contoh metode inline</title> </head> <body> <h1 style=”color: blue;”>Belajar CSS</h1> <p style=”color: yellow; background-color: green;”>Memanggil css dengan metode inline</p> </body> </html>
Kelebihan metode inline
Kelebihan menggunakan metode inline saat memanggil CSS di HTML yaitu:
- Halaman lebih cepat karena tidak ada permintaan HTTP tambahan yang diperlukan.
- Cocok untuk gaya dinamis. Metode inline bisa memberikan gaya dinamis di setiap halaman HTML, misalnya saat Anda ingin memberikan URL gambar di properti background image.
- Prioritas tertinggi dibandingkan dua metode sebelumnya. Apabila Anda memakai ketiga metode bersamaan, maka cara memanggil CSS secara internal dan eksternal akan tertimpa oleh inline.
Kekurangan metode inline
Kekurangan menggunakan metode inline saat memanggil CSS di HTML yaitu Perubahan yang rumit sebab harus dilakukan pada setiap halaman. Metode ini mencampurkan HTML dan CSS secara langsung sehingga mengubah gaya pada CSS akan menjadi rumit.
Itulah cara memanggil CSS di HTML dengan 3 jenis metode yang berbeda. Anda bisa memilih menggunakan metode yang sesuai dengan kebutuhan Anda. Dan ingat, masing-masing metode memiliki kelebihan dan kekurangannya.
Semoga bermanfaat
0 Komentar
Stop Komentar SPAM
Berkomentarlah dengan Sopan
Salam Anak Bangsa