FireStats error : Database error: Error establishing mySQL database connection:php_network_getaddresses: getaddrinfo failed: Name or service not known in /home/students/public_html/wp-content/plugins/firestats/lib/ezsql/mysql/ez_sql_mysql.php on line 98

MySQL Version:
SQL Query:
INSERT DELAYED INTO `plugin_firestats_pending_data` ( `timestamp`, `site_id` , `user_id`, `url` , `referrer` , `useragent` , `ip` ) VALUES ( NOW(), 151, NULL , '', '', '', '' )

Jenis Jenis CSS : Css Inline Style

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:

CSS Inline Style

Ini contoh kedua dari penggunaan CSS Inline Style, dengan kombinasi style dan image pada background

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.

3 Responses to “Jenis Jenis CSS : Css Inline Style”

  1. bingung deh soal beginian …

  2. […] Jenis Jenis CSS : Css Inline Style Tips Thunderbird : Membuat Template Email HTML […]

  3. nice post sob………..

Leave a Reply

*

Packaged by Edublogs - education blogs.
Twitter widget by Rimon Habib - BuddyPress Expert Developer