CSS merupakan bahasa pemrograman untuk mengkontrol komponen website sehingga lebih terstruktur dan seragam. Dengan Cascading Style Sheets memungkinkan ditampilkan page yang sama dengan format berbeda. Penempatan rule (kode) style CSS diletakkan terpisah dari isi halaman kode HTML. Isi halaman kode HTML diletakkan dalam file HTML, sedangkan kode style CSS dapat berupa file lain, yaitu file .css atau bisa juga sebagai salah satu bagian dari file HTML yang ditaruh dalam tag <head>.
CSS adalah kumpulan batasan (Rule) untuk memformat dan mengendalikan tampilan isi suatu halaman website (webpage).
- INLINE STYLES
Inline styles adalah styles CSS yang ditulis langsung ke suatu tag pada dokumen HTML. Inline styles HANYA berpengaruh ke tag tertentu saja (hanya untuk tag dimana inline stlyles dituliskan).
Contoh syntax yang bisa digunakan :
:<a href="" style="text-decoration: none;">
- EMBEDDED STYLES
Embedded styles adalah styles CSS yang embedded (tertaman) di bagian head documen HTML. Embedded styles HANYA berpengaruh ke tag-tag pada halaman-halaman web tertentu yangmana Embedded styles ditanamkan di dalamnya.
Contoh syntax yang bisa digunakan :
<style type="text/css"> p { color: #00f; } </style>
- EXTERNAL STYLES
External styles adalah styles CSS yang ditulis dalam suatu file CSS yang terpisah dan kemudian terpasang pada Web document. External style sheets berpengaruh pada dokumen apapun yang ada dalam web document.
Contoh syntax yang bisa digunakan :
<link rel="stylesheet" type="text/css" href="styles.css" />Para prakttisi CSS terbaik menyarankan agar kita memprioritaskan (terutama) menggunakan external style sheets untuk styling halaman-halaman Web (webpages) sehingga Anda akan mendapatkan manfaat terbaik dari penggunaan cascade dan inheritance.
How to Write an Inline Style
Inline styles merupakan CSS styles yang diterapkan HANYA untuk SATU elemen SAJA. Penulisannya menggunakan style attribute. Adapun cara penulisannya sebagai berikut :
- Tulislah style property Anda dengan cara yang sama seperti Anda akan menuliskannya di sebuah Style Sheet. Tapi perlu menjadi semuanya dalam satu baris. Beberapa properti terpisah dengan semi-kolon (;) seperti yang Anda lakukan dalam style sheet. Lihat Syntax dibawah ini.
background:#ccc; color:#fff; border: solid black 1px; - Tempatkan baris styles tersebut dalam atribut style dari elemen yang Anda inginkan untuk ditata. (misalnya elemen paragraf (p) pada content teks seperti dibawah ini).
<p style="background:#ccc; color:#fff; border: solid black 1px;">
Kelebihan dan Kekurangan Inline Style
-
Kelebihan Inline Style
Cascade, inline styles (CSS Inline Styles) ini memiliki hak untuk didahulukan dibanding dengan kedua tipe CSS lain. Itu berarti Inline Styles akan diterapkan tidak peduli apapun * Satu-satunya styles yang memiliki prioritas lebih tinggi daripada Inline Style adalah user styles.
Jadi jika Anda mengalami kesulitan mendapatkan perubahan untuk menerapkan mererapkan CSS, maka SOLUSI Anda dapat mengatur dengan menggunakan Inline Style pada elemen yang Anda inginkan (Misalnya penerapan CSS untuk elemen PARAGRAF (p) pada content teks). Jika masih tidak ada perubahan, berarti ada sebab lain dan harus Anda cari tahu..
Inline Style mudah dan cepat untuk ditambahkan. Anda tidak perlu untuk membuat dokumen baru (seperti dengan style sheet eksternal) atau mengedit elemen baru di bagian header dokumen web Anda (seperti dengan style sheet internal). Anda hanya perlu menambahkan atribut style yang berlaku pada hampir setiap elemen XHTML.
-
Kekurangan Inline Style
Masing-masing inline style bersifat spesifik dalam Cascade, konsekuensinya akan melelahkan karena setiap inline style harus Anda setting. Inline styles harus diaplikasikan pada setiap elemen yang Anda inginkan. Misalnya Anda ingin seluruh paragraf harus menggunakan font family “Arial.” maka Anda harus menambahkan sebuah inline style ke setiap <p> tag pada dokumen web.
Inline Style menambahkan beban pemeliharaan (pengeditan) untuk web designer dan juga waktu download untuk pengunjung (reader) blog.
Tidak mungkin melakukan style terhadap pseudo-elements dan -classes dengan inline styles.
Sebagai contoh, dengan external dan internal style sheets, Anda dapat mengatur style warna anchor tag untuk visited, hover, active, dan link. Tetapi dengan inline style semua yang dapat Anda atur style-nya adalah HANYA untuk masing-masing link itu sendiri. karena memang seperti itulah ATRIBUT STYLE ditambahkan.
Rekomendasi
Disarankan JANGAN GUNAKAN inline styles untuk web pages Anda karena mereka akan mendatangkan masalah dan membuat halaman-halaman webpage terlalu banyak hal yang harus dilakukan untuk pemeliharaan blog.
Satu-satunya cara terbaik menggunakan Inline style adalah ketika saya menginginkan pemeriksaan style (check) style dengan cepat selama proses pengembangan situs. Namun setelah terlihat beres – tidak ada masalah untuk elemen bersangkutan, maka segera saya memindahkannya ke external style sheet saya.
SELESAI – Happy Blogging!
Catatan untuk tanda bintang *
* Pada beberapa kasus Inline Style dapat ditimpa, seperti dengan atribut penting atau dengan style sheet user. Tetapi prinsipnya dengan penggunaan CSS yang khas, Inline Style akan memiliki prioritas tertinggi.
Source : What is a CSS Inline Style?
0 comments:
Post a Comment