Hai Sobat Teknologi! Dalam dunia pemrograman web, style sheet atau lebih dikenal dengan CSS adalah salah satu komponen yang tidak bisa dihindari. CSS berfungsi untuk mengatur tampilan pada halaman web. Ada tiga jenis CSS yang umum digunakan, yaitu internal, external dan inline. Di artikel ini, kita akan membahas perbedaan dari ketiga jenis CSS tersebut.

Internal CSS

Internal CSS adalah jenis CSS yang diletakkan di dalam tag pada halaman HTML. Internal CSS biasanya digunakan untuk mengatur tampilan pada satu halaman saja. Cara penulisannya adalah dengan menuliskan perintah CSS di dalam tag

Internal CSS umumnya digunakan untuk mengatur tampilan pada satu halaman saja

```Pada contoh di atas, internal CSS digunakan untuk mengatur background color pada body dan warna pada h1.

External CSS

External CSS adalah jenis CSS yang diletakkan di dalam file terpisah dengan ekstensi .css. External CSS digunakan untuk mengatur tampilan pada beberapa halaman sekaligus. Cara penggunaannya adalah dengan menuliskan perintah CSS di dalam file .css dan menambahkan link pada tag di halaman HTML. Contoh penggunaan external CSS adalah sebagai berikut:File style.css:```body {background-color: #f1f1f1;}h1 {color: red;}```File html:```

External CSS umumnya digunakan untuk mengatur tampilan pada beberapa halaman sekaligus

```Pada contoh di atas, external CSS digunakan untuk mengatur background color pada body dan warna pada h1. Karena file style.css dapat digunakan pada banyak halaman, maka pengaturan ini tidak perlu dituliskan di dalam tag pada setiap halaman.

Inline CSS

Inline CSS adalah jenis CSS yang diletakkan langsung pada elemen HTML. Inline CSS digunakan untuk mengatur tampilan pada satu elemen saja. Cara penggunaannya adalah dengan menambahkan atribut style pada tag HTML. Contoh penggunaan inline CSS adalah sebagai berikut:```

Ini adalah contoh penggunaan inline CSS

Inline CSS umumnya digunakan untuk mengatur tampilan pada satu elemen saja

```Pada contoh di atas, inline CSS digunakan untuk mengatur warna pada h1.

Perbedaan Internal, External dan Inline CSS

Ada beberapa perbedaan antara internal, external dan inline CSS. Pertama, internal CSS digunakan untuk mengatur tampilan pada satu halaman saja, external CSS digunakan untuk mengatur tampilan pada beberapa halaman sekaligus, sedangkan inline CSS digunakan untuk mengatur tampilan pada satu elemen saja. Kedua, internal CSS dituliskan di dalam tag , external CSS dituliskan di dalam file .css dan di-link pada tag , sedangkan inline CSS dituliskan langsung pada atribut style pada tag HTML. Ketiga, internal CSS mempunyai spesifitas yang lebih tinggi daripada external CSS, sedangkan inline CSS mempunyai spesifitas yang lebih tinggi daripada internal dan external CSS. Keempat, internal CSS dan external CSS memungkinkan penggunaan class dan id, sedangkan inline CSS tidak.

FAQs

1. Apa keuntungan menggunakan external CSS daripada internal CSS?

Jawaban: Keuntungan menggunakan external CSS adalah karena file .css dapat digunakan pada banyak halaman, sehingga kita tidak perlu menuliskan pengaturan CSS pada setiap halaman. Hal ini memudahkan pemeliharaan dan pengembangan website.

2. Apa keuntungan menggunakan internal CSS daripada external CSS?

Jawaban: Keuntungan menggunakan internal CSS adalah karena internal CSS lebih spesifik daripada external CSS. Jika kita ingin mengatur tampilan pada satu halaman saja, maka internal CSS adalah pilihan yang tepat.

3. Apa yang dimaksud dengan spesifitas pada CSS?

Jawaban: Spesifitas pada CSS adalah suatu aturan yang menentukan bagaimana CSS diterapkan pada elemen HTML. Spesifitas pada CSS dihitung berdasarkan jenis selector, class, dan ID yang digunakan.

Penutup

Dalam dunia pemrograman web, CSS adalah salah satu komponen yang penting untuk mengatur tampilan pada halaman website. Ada tiga jenis CSS yang umum digunakan, yaitu internal, external dan inline. Ketiga jenis CSS ini mempunyai perbedaan dalam cara penggunaannya dan spesifitasnya. Memahami perbedaan antara ketiga jenis CSS ini akan memudahkan kita dalam mengembangkan website. Sampai jumpa kembali di artikel menarik lainnya, Sobat Teknologi!