Artikel Pendek · Kode Program
Original PostInline, Internal, dan External dalam CSS
Hello guys, Berjumpa lagi dengan Miniblog dari Inzaghi's Blog! Selain HTML, kita juga memerlukan yang namanya CSS. Salah satu Elemen terpenting untuk mendefinisikan CSS di HTML adalah Inline, Internal, dan External.
Sumber : Hostinger.co.id
Terdapat 3 (Tiga) metode untuk mengimplementasikan gaya CSS ke situs web Anda, yaitu pertama, Anda dapat menggunakan CSS internal dan menyisipkannya ke dalam aturan CSS di bagian <head> dari dokumen HTML; kedua, mengaitkan file CSS eksternal yang memuat semua aturan CSS; atau yang terakhir, menggunakan CSS inline. Panduan ini akan menjelaskan ketiga metode ini, bersama dengan keuntungan dan kerugiannya masing-masing. Mari kita eksplorasi perbedaan antara metode CSS ini.
1. Internal CSS
Kode CSS internal ditempatkan di dalam bagian <head> dari halaman. Penggunaan class dan ID memungkinkan merujuk pada kode CSS, namun pengaruhnya terbatas pada halaman yang bersangkutan. Sebagai contoh, ini dapat berguna saat mengirimkan template halaman kepada seseorang, karena semua informasi dapat dilihat dalam satu halaman, memudahkan untuk melihat pratinjau. Kode CSS internal ditempatkan di antara tag <style></style>. Sebagai contoh :
<!DOCTYPE html><html><head><style type="text/css">p {color:black; font-size: 14px;}.center {display: block; margin: 0 auto;}#button-go, #button-back {border: solid 1px black;}</style></head><body><h1>This is a heading</h1><p>This is a paragraph.</p></body></html>
Output :
Manfaat Internal CSS :
- Perubahan hanya terjadi pada 1 halaman
- Class dan ID bisa digunakan oleh internal stylesheet
- Tidak perlu meng-upload beberapa file karena HTML dan CSS bisa digunakan di file yang sama.
Kekurangan menggunakan Internal CSS :
- Meningkatkan waktu akses website
- Perubahan hanya terjadi pada 1 halaman – tidak efisien bila Anda ingin menggunakan CSS yang sama pada beberapa file.
Cara menambahkan Internal CSS ke halaman HTML :
1. Buka file HTML Anda dengan menggunakan text editor. Jika halaman sudah di-upload ke hosting, Anda bisa menggunakan text editor yang telah disediakan oleh hosting Anda. Jika Anda memiliki file HTML di komputer Anda, Anda bisa menggunakan text editor apapun untuk meng-edit dan kemudian meng-upload file ke akun hosting Anda menggunakan aplikasi FTP.
2. Temukan bagian awal kode <head> dan tambahkan kode berikut ini di bawahnya :
<style type="text/css">
3. Pada baris baru, tambahkan Rule CSS :
body {
background-color: aqua;
}
h1 {
color: red;
padding: 60px;
}4. Setelah Anda menambahkan rule CSS, tambahkan tag penutup :
</style>
Nantinya file HTML yang sudah ditambahkan style CSS akan terlihat seperti ini :
<!DOCTYPE html><html><head><style>body {background-color: aqua;}h1 {color: red;padding: 60px;}</style></head><body><h1>Welcome to Inzaghi's Blog!</h1><p>This is our Paragraph.</p></body></html>
Output :
2. External CSS
Salah satu cara yang paling nyaman untuk menambahkan CSS ke website Anda adalah dengan menghubungkannya ke file .CSS eksternal. Dengan cara tersebut, perubahan apapun yang Anda buat pada file CSS akan tampil pada website Anda secara keseluruhan. File CSS eksternal biasanya diletakkan setelah bagian <head> pada halaman :
<head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
Sehingga menjadi seperti ini :
<!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body><h1>This is a heading</h1><p>This is a paragraph.</p></body></html>
Dalam contoh diatas, file style.css berisikan semua aturan. Contohnya :
body {background-color: lightblue;}h1 {color: navy;margin-left: 20px;}
Output :
 |
| Sumber : W3schools.com |
Manfaat CSS Eksternal :
- Ukuran file HTML menjadi lebih kecil dan strukturnya lebih rapi
- Kecepatan loading menjadi lebih cepat
- File CSS yang sama bisa digunakan di banyak halaman.
Kekurangan CSS Eksternal :
- Halaman belum tampil secara sempurna hingga file CSS selesai dipanggil.
3. Inline CSS
Inline CSS digunakan untuk tag HTML spesifik. Atribut <style> digunakan untuk menerapkan style ke tag HTML tertentu. Meskipun cara ini kurang disarankan karena setiap tag HTML perlu mendapatkan style secara individu, yang membuat pengaturan website menjadi lebih rumit, dalam beberapa situasi, inline CSS dapat menjadi pilihan yang berguna. Misalnya, ketika tidak ada akses ke file CSS atau ketika perubahan style hanya diperlukan untuk satu elemen saja.
Berikut adalah contoh halaman HTML dengan penggunaan Inline CSS :
<!DOCTYPE html><html><body style="background-color:black;"><h1 style="color:white;padding:30px;">Welcome to Inzaghi's Blog!</h1><p style="color:white;">This is our Paragraph.</p></body></html>
Output :
Manfaat Inline CSS :
- Berguna jika Anda ingin menguji dan melihat perubahan
- Berguna untuk perbaikan cepat
- Permintaan HTTP yang lebih kecil
Kekurangan Inline CSS :
- Inline CSS harus diterapkan pada setiap elemen
Mohon maaf apabila ada kesalahan sedikitpun pada Kode Program ini.
Terima Kasih 😀😊😘👌👍 :)
.png)
.png)
.png)