Inline CSS, Internal CSS dan External CSS

Assalamu alaikum Wr. Wb

Salam Pinter Bareng Komputer, ...zero bit...

Melanjutkan artikel sebelumnya tentang Pengenalan CSS, maka dalam artikel ini saya ingin membahas mengenai Jenis - jenis CSS dilihat dari posisi CSS tersebut dipanggil. Ada 3 jenis CSS berdasarkan posisinya dipanggil, yaitu INLINE CSS, INTERNAL CSS dan EXTERNAL CSS.

A. INLINE CSS

Inline CSS digunakan di dalam sebuah tag HTML tertentu, yaitu dengan memanggil atribute style di dalam tag HTML tersebut. 

Cara ini kurang direkomendasikan, jika ada style yang sama untuk beberapa tag HTML, karena setiap tag HTML harus diberikan style sendiri - sendiri. Sehingga jika ada perubahan style untuk semua tag tadi maka Anda akan lebih sulit dalam mengeditnya. Namun, di beberapa situasi justru inline CSS menjadi berguna. Contohnya, saat kalian harus mensetting style untuk 1 elemen/tag HTML saja.

Contoh penggunaan Inline CSS :

Manfaat Inline CSS :

1. Bisa digunakan untuk menguji perintah CSS di dalam sebuah tag HTML tertentu hasilnya seperti apa?
2. Untuk memperbaiki tampilan halaman web secara cepat.
3. Proses menjalankan hasil perubahan tampilannya lebih cepat.

Kekurangan Inline CSS :

Inline CSS harus dipanggil disetiap elemen HTML.

B. INTERNAL CSS

Ada kalanya sebuah style (setting tampilan) CSS harus diterapkan pada beberapa tag HTML yang berbeda. Jika menggunakan inline css ini menjadi kurang efektif dan efisien karena harus mengetikkan perintah style yang sama di beberapa tag HTML yang berbeda. Untuk mengatasi ini maka kalian sebaiknya membuat script style di dalam sebuah tag <style>... </style> yang ditempatkan di dalam tag HEAD. Style CSS yang dibuat di dalam tag STYLE yang ada di dalam tag HEAD ini disebut dengan INTERNAL CSS.

Style CSS yang dipasang dengan metode ini akan diload/dipanggil ulang semua scriptnya setiap kali halaman dipanggil. Hal ini akan menyebabkan waktu loading halaman akan bertambah. Namun, di beberapa kasus penggunaan internal CSS membawa manfaat yang besar. Contohnya, jika kita butuh menduplikate setting tampilan (style) sebuah halaman dapat dilakukan dengan mudah – karena semuanya bisa terlihat dalam style yang ada di tag HEAD.

Contoh penggunaan Internal CSS :

Manfaat Internal CSS :

1. Perubahan hanya terjadi pada 1 halaman.
2. Class dan ID bisa digunakan oleh internal stylesheet.
3. Tidak perlu meng-upload beberapa file karena HTML dan CSS bisa digunakan di file yang sama.

 Kekurangan Internal CSS :

1. Meningkatkan waktu akses website. Karena setiap halaman direfresh maka script internal CSS akan diload ulang.
2. Perubahan hanya terjadi pada 1 halaman menjadikan proses tidak efisien bila kalian ingin menggunakan CSS yang sama pada beberapa file.

C. EXTERNAL CSS

Disebut external CSS karena seluruh script CSS disimpan di dalam sebuah file CSS (file berekstensi .css). File ini disimpan di dalam folder khusus di dalam folder web (boleh dinamai CSS). Kemudian untuk menghubungkan dengan halaman HTML, file CSS ini dipanggil di dalam tag HEAD dengan menggunakan tag LINK.

Contohnya, buat sebuah file CSS dengan nama style.css dan simpan di folder CSS projek kalian.

Kemudian di dalam tag HEAD halaman HTML buat tag LINK seperti di bawah ini untuk menghubungkan halaman tersebut dengan file style.css.

 <link rel="stylesheet" type="text/css" href="style.css" />

 

Manfaat CSS eksternal:

1. Ukuran file HTML menjadi lebih kecil dan strukturnya lebih rapi.
2. Kecepatan loading menjadi lebih cepat.
3. File CSS yang sama bisa digunakan di banyak halaman.

Kekurangan CSS eksternal:

Halaman belum tampil secara sempurna hingga file CSS selesai dipanggil.

Semoga artikel ini bermanfaat.

Kembali ke menu CSS - Selector CSS