Penulisan Inline CSS
Kali ini kita akan belajar menulis css secara inline. Inline css sangat cocok bagi orang yang mulai belajar css karena tidak terlalu banyak setingan, istilahnya tudepoin. Namun banyak menuliskan inline css dapat mengakibatkan pemborosan kode, karena tidak dapat digunakan ulang seperti external css. Menuliskan banyak inline css juga dapat membuat kode menjadi "kotor", maksudnya sulit dibaca karena campur aduk. Secara umum ada tiga cara penulisan css yaitu:
- Inline css
- Internal css
- Eksternal css
Penulisan css secara external sudah saya bahas pada tutorial sebelumnya. Sebenarnya inline css ini materi yang pertama. Eksternal css memang lebih baik dari inline css dan internal css. Namun tidak ada salahnya kita belajar inline css. Perhatikan contoh penulisan properti css berikut.
background-color:red;
property:value;
Tips: penulisan css akan lebih mudah dengan bantuan editor (seperti sublime), karena dibantu auto complete.
Property dan value pada css dipisahkan oleh titik dua ":". Jika anda sudah belajar html maka anda sudah mengenal istilah atribut. Atribut-atribut di html (bgcolor, width, dll) ini hampir semua sudah diadopsi dan diganti dengan css. Kesalahan yang sering terjadi saat baru belajar css adalah tanda titik dua ":". Ingat di html atribut menggunakan tanda "=" sedangkan pada css ":". Berikut ini contoh penulisan atribut html.
style=""
width=""
bgcolor=""
atribut="value"
Nah setelah anda bisa membedakan penulisan antara atribut html dengan property css maka kita dapat langsung memperaktekannya.
Sebelum kita menggunakan inline css kita harus menggunakan atribut html dahulu yaitu style="", kemudian css diletakkan di dalamnya. Kita bebas menggunakan berapa banyak properti css, asalkan caranya dengan memberi titik koma ";" sebagai pemisah antara properti css.
Tag <Div> adalah tag html yang tidak punya arti apa-apa jika tidak dilanjutkan dengan penggunaan css atau yang lain. Akan tetapi tag <div> ini mempunyai sifat jatuh kebawah, artinya apasaja yang dituliskan setelah tag tutup </div> maka akan berada dibawahnya.
Anda dapat meletakkan css pada tag manapun di html seperti tag <body>, tag <h1> dan lain-lain yang penting pada tag bukanya. Terima Kasih.
