Inline CSS

Sebelum ini kita sudah membahas bagaimana membuat code CSS yang berdampak terhadap keseluruhan document HTML. Sekarang kita akan membahas bagaimana caranya menuliskan code CSS yang hanya berpengaruh ke masing-masing element HTML. Cara yang akan kita bahas ini adalah inline CSS.

Dengan inline CSS maka kamu bisa menimpa style CSS yang sudah ada di internal maupun external. Kekurangannya inline CSS adalah metode ini membuat tujuan utama dari CSS menjadi berkurang yaitu memisahkan antara design dan content. Oleh sebab itu jangan terlalu banyak memakai inline CSS.

Inline CSS adalah attribute HTML

Kalau kamu ingin menambahkan sebuah style kedalam sebuah element HTML maka kamu bisa melakukannya dengan menuliskan CSS property yang kamu inginkan dengan style attribute HTML. Lihat contoh dibawah.

Code CSS inline:

<p style="background: blue; color: white;">Text ini kita beri background baru dan font color yang baru dengan menggunakan inline CSS</p>

Hasil CSS inline:

Text ini kita beri background baru dan font color yang baru dengan menggunakan inline CSS

Jika mengikuti tutorial CSS ini dari awal maka kamu pasti bisa meraba apa yang sebenarnya terjadi dari code diatas. Di bawah ini adalah format inline CSS di setiap element HTML.

Pseudo code:

<htmltag style="cssproperty1: value; cssproperty2: value;"> </htmltag>

Setiap code CSS harus dipisahkan dengan titik koma [;] serta antara CSS property dan value dipisahkan dengan titik dua [:].

Kesalahan newbie

Perlu diperhatikan saat menggunakan inline CSS jangan menggunakan double quote ["] di dalam inline CSS. Double quote akan ditranslasikan sebagai akhir dari style value. Lihat contoh dibawah mana yang benar dan mana yang salah.

Code CSS:

<p style="background: url("http://jujucode.files.wordpress.com/2014/05/sm72_06-horz.jpg");">
Code ini salah</p>

<p style="background: url(http://jujucode.files.wordpress.com/2014/05/sm72_06-horz.jpg);">
Code ini benar</p>

Hasil code CSS:

Code ini salah

Code ini benar

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>