CSS merupakan bahasa pemrograman untuk control komponen website sehingga lebih terstruktur dan seragam. Dengan Cascading Style Sheets memungkinkan ditampilkan page yang sama dengan format berbeda. Penempatan rule (code) style CSS diletakkan terpisah dari isi halaman code HTML. Isi halaman code HTML diletakkan dalam file HTML, sedangkan code style CSS dapat berupa file .css atau sebagai salah satu bagian dari file HTML yang ditaruh dalam tag <head>.
CSS ialah kumpulan batasan (Rule) untuk memformat dan mengendalikan tampilan isi halaman website (web page).
Ada 3 bentuk (type) CSS styles :
- INLINE STYLES
Adalah styles CSS ditulis langsung ke suatu tag pada dokumen HTML. Inline styles HANYA berpengaruh ke tag tertentu (hanya untuk tag dimana inline stlyles dituliskan).
Contoh syntax yang bisa digunakan :
:<a href="" style="text-decoration: none;">
- 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
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 praktisi CSS terbaik menyarankan agar memprioritaskan penggunaan external style sheets untuk styling halaman-halaman Web (web pages) sehingga akan mendapatkan manfaat terbaik dari penggunaan cascade dan inheritance.
How to Write an Inline Style CSS - website files
Inline styles merupakan CSS styles yang diterapkan HANYA untuk SATU ELEMEN SAJA. Penulisannya pakaistyle attribute. Cara penulisannya sebagai berikut :- Tulis style property dengan cara sama seperti Anda akan menuliskannya di sebuah Style Sheet. Semuanya dalam satu baris. Beberapa properti dipisahkan dengan semi-kolon (;) sebagaimana dalam style sheet. Lihat Syntax berikut :
background:#ccc; color:#fff; border: solid black 1px;
- Tempatkan baris styles tersebut dalam atribut style dari elemen yang Anda inginkan untuk ditata. (e.g. elemen paragraf (p) pada content teks seperti berikut)
<p style="background:#ccc; color:#fff; border: solid black 1px;">
Kelebihan dan Kekurangan Inline Style - arsip website
-
Kelebihan Inline Style CSS - website files
Cascade, inline-styles (CSS Inline-Styles) punya hak 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.
Jika tidak mendapati perubahan ketika menerapkan CSS, solusinya dengan menggunakan Inline Style pada elemen yang diinginkan (misalnya penerapan CSS untuk elemen PARAGRAF (p) pada content teks). Jika tetap tidak ada perubahan, berarti ada sebab lain dan harus dicari tahu.
Inline Style mudah untuk ditambahkan. Anda tidak perlu membuat dokumen baru (seperti dengan style sheet eksternal) atau mengedit elemen baru di bagian header dokumen web (seperti dengan style sheet internal). Anda hanya perlu menambahkan atribut style yang berlaku pada hampir setiap elemen XHTML.
-
Kekurangan Inline Style - website files
Masing-masing inline style bersifat spesifik dalam Cascade, konsekuensinya sangat melelahkan karena setiap inline style harus Anda setting. Inline styles harus diaplikasikan pada setiap elemen yang Anda inginkan. Misalnya ingin seluruh paragraf harus pakai font family Arial, maka harus menambahkan sebuah inline style ke setiap <p> tag dokumen web.
Inline Style menambah beban pemeliharaan (pengeditan) untuk web designer dan juga menambah lama waktu download oleh pengunjung.
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
JANGAN gunakan inline styles untuk web pages karena mereka akan mendatangkan masalah dan membuat halaman-halaman webpage terlalu banyak hal yang harus dilakukan untuk pemeliharaan blog.
Terkait teks judul post artikel ini, sangat disarankan JANGAN gunakan inline style CSS dalam dokumen HTML, karena itu cara buruk menjaga SEO blog. Jawaban lengkap terhadap isu ini silahkan kunjungi :
Satu-satunya cara terbaik menggunakan Inline-style adalah ketika ingin memeriksa style CSS dengan cepat selama proses pengembangan situs. Namun setelah terlihat beres (tidak ada masalah) untuk elemen bersangkutan, segera memindahkannya ke external style sheet.
That's all we know - Happy Blogger
Catatan untuk tanda bintang *
* Beberapa kasus Inline Style dapat ditimpa, seperti dengan atribut penting atau style sheet user.
Prinsipnya dengan penggunaan CSS yang khas, Inline Style memiliki prioritas tertinggi.
Source : What is a CSS Inline Style?
.
.
.
.
.
.
.
.
![[Valid Atom 1.0]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgqz1Fz0W3QZkeG4LsKvQplfCdmyhCrU3j95NWl1i-XarshrBBaYCr4hKUMKj5XbhHwJRvEFMd3j2pDLZepCzvjQU0kMiNhvbs51qAWczA_Mrw7y_wj0czorZsxBhfr9Y5Q8IN_vsORSA/w88-h31-no/valid-atom.jpg "Validate my Atom 1.0 feed")
