CSS Inline Style‘ adalah CSS yang digunakan langsung pada elemen HTML, atau ’style’ yang berada di dalam ‘tag’ dari sebuah dokumen. Idealnya memang CSS itu berada terpisah (internal / ekternal) dengan HTML. Tapi terkadang pada kondisi tertentu kita membutuhkan style khusus, misal pada postingan. Nah ‘Inline Style‘ lah yang digunakan.

Pada pembahasan sebelumnya mengenai Belajar HTML dan CSS Tingkat Dasar, telah membahas ‘ekternal dan internal style’. Ada 3 jenis penulisan style CSS ini, yaitu external styles, internal styles dan inline styles.

Penulisan CSS Inline Style

Sebelum kita beranjak kepersoalan “CSS Inline Style” ini lebih jauh, berikut ini contoh penulisan “CSS Inline Style”:

<p style=" ..">ini text nya</p>

‘titik-titik’ tersebut adalah bagian style css-nya.

Misal style yang ingin digunakan adalah:

color:#fff; background:#c50;

maka penulisannya:

<p style="color:#fff; background:#c50;">ini text yang diberikan style</p>

Jadi ‘CSS Inline Style’ ini hanya berlaku untuk tag yang langsung diberikan style, seperti contoh diatas, style tersebut hanya diperuntukkan untuk paragraf yang bertuliskan “ini text yang diberikan style”.

Contoh pengembangan ‘Inline Style’, yang bisa kita gunakan di postingan

1. Membuat text berwarna berbeda dan menambahkan warna background

kode:

<p>Ini  contoh <span style="color:#fff; background:#c50; padding:0 5px;">CSS Inline Style</span> pada <span style="color:#c50; background:#fff;">postingan</span></p>

hasil / demo:

Ini contoh CSS Inline Style pada postingan

2. Gabungan style dan menambahkan gambar pada background

kode:

<div style="height:130px; width:350px; padding:10px; border:1px solid #666; background:#c50 url(http://localhost/idtutorial/wordpress/wp-content/uploads/2009/12/bfly015.gif) left bottom no-repeat;" >
<p style="font-size:18px;color:#111;">CSS Inline Style</p>
<p style="color:#fff;padding-left:80px;">Ini contoh kedua dari penggunaan CSS Inline Style, dengan kombinasi style dan image pada background</p>
</div>

hasil / demo:

Hal yang Perlu diperhatikan Dalam Penggunaan CSS Inline Style

Memang sebaiknya menggunakan ekternal CSS dibanding menggunakan ‘CSS Inline Style’. Tapi seperti pendahuluan tulisan ini, penggunaan ‘CSS Inline Style’ sebaiknya digunakan untuk kasus tertentu. Seperti pada postingan misalnya. Karena penggunaan style ini tidak digunakan secara berulang kali, misalnya hanya untuk demo di postingan.

Contoh pada postingan ini, di demo seperti diatas tersebut menggunakan ‘CSS inline style’. Memang sebaiknya kita buat halaman khusus untuk demo tersebut dalam format HTML, tapi apabila kita tidak mempunyai tempat hostingan untuk menyimpan berkas tersebut, kita dapat langsung membuat demo tersebut didalam postingan dengan ‘CSS inline style’, sebagai alternatif.

Kenapa tidak baik menggunakan ‘CSS inline style’ di dalam halaman template. Selain dapat merepotkan dari sisi pemeliharaan dan juga dapat memperlambat membuka sebuah halaman. Lebih lengkap mengapa kita perlu menghindari penggunaan CSS Inline Style dapat dipelajari di ‘Avoid Inline Styles for CSS’

Penutup

Penggunaan ‘CSS Inline Style’ sebaiknya digunakan sewajarnya, jangan terlalu berlebihan. Jadi digunakan memang untuk kondisi tertentu jika diperlukan. Selain itu sebaiknya jangan mengggunakan ‘CSS Inline Style’ pada template atau pada halaman weblog, kalau untuk dipostingan masih dimungkinkan.

Sip demikian. Selamat mencoba dan bermain ‘CSS Inline Style’ pada postingan.