Seperti namanya, inline CSS adalah tentang menulis kode CSS langsung dalam tag HTML.

Pendekatan ini berbeda dengan pendekatan lain, di mana kode CSS biasanya ditulis di bagian < style > dari dokumen HTML (internal CSS) atau dalam file terpisah yang dihubungkan ke dokumen HTML (external CSS).

Kekuatan inline CSS terletak pada kemampuannya untuk mengesampingkan style internal dan external, memberikan kontrol presisi atas tampilan elemen. Dalam inline, style CSS diterapkan secara spesifik ke satu elemen di suatu waktu, bukan menetapkan satu set aturan style untuk seluruh dokumen atau sekelompok elemen. 

Yuk, pelajari lebih jauh tentang inline CSS, internal CSS, dan external CSS, mulai dari cara sampai waktu penggunaan yang tepat. 

Inline CSS

Inline CSS adalah metode di mana kamu menambahkan CSS langsung ke dalam elemen HTML.

Untuk memberi gambaran bagaimana inline CSS bekerja, berikut contoh penggunaannya.

Kamu memiliki elemen paragraf dalam HTML dan ingin mengubah warna teksnya menjadi biru. Dengan inline CSS, kamu bisa melakukannya langsung menggunakan kode berikut:

Dalam contoh di atas, kita menggunakan atribut style yang tersedia di elemen HTML untuk menambahkan CSS.

Lalu, kapan waktu yang tepat untuk menggunakan Inline CSS?

Meskipun mudah digunakan, inline CSS sebaiknya digunakan seperlunya saja. Terapkan metode ini saat kamu perlu menerapkan style dengan cepat untuk elemen tunggal.

Selain itu, inline CSS juga dapat dimanfaatkan pada skenario penggunaan JavaScript. Metode ini bisa diubah secara real-time oleh JavaScript. Dengan kata lain, jika kamu memiliki logic yang mengharuskan style berubah sesuai dengan aksi audiens (seperti perubahan tema atau animasi), inline CSS membuat prosesnya berlangsung lebih sederhana.

Internal CSS

Berbeda dengan inline CSS yang diterapkan di elemen individu, internal CSS ditempatkan di dalam tag < style > yang berada di bagian < head > dari dokumen HTML. 

Metode ini membantu mendefinisikan style untuk elemen di seluruh halaman web tanpa perlu file eksternal.

Namun, meskipun internal CSS bisa mendefinisikan style untuk elemen di seluruh halaman web tanpa membuat file eksternal, penggunaannya seringkali tidak disarankan. Alasannya, internal CSS dapat mengurangi readability kode dengan mencampurkan sintaksis CSS dan HTML dalam satu file. Kode cenderung lebih sulit dipahami, terutama pada proyek dengan banyak style atau ketika bekerja dalam tim. 

Untuk menggunakan internal CSS, kamu perlu membuka tag < style > di dalam bagian < head > dokumen HTML. Di sinilah kamu akan menulis semua CSS rule untuk halaman tersebut. Berikut contoh penggunaannya:

Kode HTML:

Dalam contoh di atas, kita mendefinisikan style untuk elemen body, H1, dan p yang akan diterapkan di seluruh halaman.

Ada situasi tertentu penggunaan internal CSS paling tepat, yaitu:

• Testing dan debugging: saat kamu sedang testing style tertentu atau melakukan debugging, menggunakan internal CSS memudahkan karena semua kode berada di satu tempat.
• Halaman tunggal dengan style khusus: jika website-mu terdiri dari satu halaman atau jika halaman tertentu memerlukan style berbeda, internal CSS menjadi solusi yang tepat tanpa harus membuat file CSS eksternal.
• E-mail HTML: menggunakan internal CSS dalam template e-mail HTML sering kali menjadi pilihan yang dapat diandalkan untuk memastikan layout dan desain e-mail tetap konsisten di berbagai platform.

External CSS

External CSS adalah metode di mana kamu menyimpan semua CSS rule dalam sebuah file terpisah dengan ekstensi .css dan menghubungkannya dengan halaman HTML menggunakan elemen < link >.

Dengan cara ini, CSS tidak ditulis di dalam file HTML, tetapi di tempat terpisah yang membuatnya lebih rapi dan terstruktur.

Tidak hanya membuat dokumen HTML lebih rapi dengan menghindari pencampuran sintaksis CSS dan HTML, external CSS juga dianggap sebagai best practice dalam pengembangan web. Alasan utamanya adalah pemisahan file akan meningkatkan readability dan maintenance kode. Kamu juga memfasilitasi reusability kode dan konsistensi style di seluruh proyek karena file CSS yang sama dapat dihubungkan ke beberapa halaman HTML.

Untuk memulai, kamu perlu membuat file baru dengan ekstensi .css. Di sini, kamu akan menulis semua CSS rule yang ingin diterapkan pada website.

Misalnya, kamu membuat file bernama styles.css dengan isi sebagai berikut:

Setelah membuat file CSS, kamu perlu menghubungkannya dengan halaman HTML. Proses ini dilakukan dengan menambahkan elemen < link > di dalam bagian < head > dari dokumen HTML:

Dalam contoh di atas, atribut href menunjukkan lokasi file CSS yang harus dihubungkan dengan file HTML.

Ada beberapa alasan mengapa external CSS menjadi pilihan ideal, terutama untuk proyek berskala besar:

• Memudahkan pemeliharaan: lebih mudah mengelola dan membuat style jika semua CSS rule diletakkan di satu tempat. Kamu bisa mengubah satu file dan perubahan itu akan berlaku untuk semua halaman web yang terhubung dengan file CSS tersebut.
• Kecepatan loading page: meskipun file CSS harus di-download ke browser, file ini disimpan dalam cache. Artinya, saat audiens mengunjungi halaman lain di situs yang menggunakan file CSS sama, halaman akan loading lebih cepat.
• Konsistensi di seluruh situs: dengan menggunakan satu file CSS untuk banyak halaman, kamu memastikan style tetap konsisten di seluruh website. Hal ini membantu dalam branding dan pengalaman pengguna yang seragam.

Tabel Perbedaan Inline, Internal, dan External CSS

Berikut tabel perbedaan inline CSS, internal CSS, dan external CSS:

FAQ ( Frequently Ask Question)

Apakah Inline CSS mengesampingkan style lain?

Dikarenakan inline CSS memiliki tingkat spesifisitas tinggi, style yang ditetapkan menggunakan metode ini akan mengesampingkan style yang didefinisikan di tempat lain, seperti dalam stylesheet external atau internal.

Apakah ada batasan dalam penggunaan inline CSS?

Meskipun inline CSS sangat berguna untuk kasus tertentu, penggunaannya secara berlebihan dapat membuat kode HTML menjadi berantakan dan sulit di-maintenance.

Selain itu, karena style diterapkan secara individual, kamu tidak dapat memanfaatkan keuntungan dari penggunaan class CSS atau ID yang memungkinkan penggunaan ulang style.

Apakah Inline CSS buruk untuk SEO?

Menggunakan terlalu banyak inline CSS dapat menyebabkan waktu loading page lebih lambat, di mana berdampak pada penurunan ranking SEO. Selain itu, kode yang berantakan dan berulang juga bisa membuat website lebih sulit di-crawl oleh mesin pencari.

Penutup

Inline CSS memberikan kebebasan dan fleksibilitas untuk mengendalikan estetika elemen web secara langsung. Namun, meskipun metode ini memiliki banyak manfaat, penting untuk menggunakannya dengan bijak, mengingat penggunaan berlebihan dapat menyebabkan kesulitan dalam pemeliharaan kode.

Jika menyeimbangkan penggunaan inline CSS dengan pendekatan internal dan external CSS, kamu dapat memastikan website tidak hanya menarik secara visual, tetapi juga terstruktur, mudah dikelola, dan responsif.