Jenis Style Sheet
CSS atau kepanjangan dari Cascading Style Sheets memiliki beberapa jenis yang berbeda, dan kalian harus mengetahui jenis-jenis dari CSS tersebut, agar mengeal kekurangan dan kelebihan jenis-jenis Cascading Style Sheets.
Bacalah agar kalian paham dengan penjelasan jenis-jenis CSS serta perbedaan dari keunggulan dan kekurangan jenis-jenis CSS tersebut .
Style sheet yang terdapat dalam sebuah halaman website, dapat dikelompokkan menjadi tiga jenis, Tiga jenis tersebut memilikin beragam perbedaan, sebagai berikut :
- Inline Style Sheet
- Internal Style Sheet
- External Style Sheet
Inline Style Sheet
Cara penulisan inline style memiliki banyak kerugian atau kekurangan dibandingkan dengan cara penulisan yang lainnya, ini menyebabkan banyak keuntungan-keuntungan dari style sheet berkurang karena cara penulisan ini mencampurkan sisi tampilan dengan isi yang harus ditampilkan. Gunakanlah cara penulisan ini bilamana kita ingin menerapkan suatu definisi style sekali saja pada sebuah element tag HTML.
Untuk menggunakan cara penulisan inline style, kita menggunakan atrbut style di dalam tag yang relevan. Atribut style dapat berisi beberapa properti CSS.
Contoh dibawah ini menunjukkan bagaimana merubah warna dan margin kiri sebuah paragraf :
<p style="color: sienna; margin-left: 20px;">This is a Paragraph</p>
Internal Style Sheet
Cara penulisan internal style sheet sebaiknya digunakan jika suatu dokumen tunggal memiliki sebuah unique style. Kita dapat mendefinisikan style di dalam head dengan menggunakan tag <style.
Seperti contoh :
/* Website Complete Coding Blogspot */<head><style type="text/css">hr { color: sienna }p { margin-left: 20px }body { background-image: url("images/Android.jpg") }</style></head>
Browser akan membaca style yang telah didefinisikan, dan memformat dokumen sesuai definisi style.
Catatan :
Umumnya browser mengabaikan setiap tag yang tidak dikenal. Hal ini menyebabkan sebuah browser tua yang tidak mensupport type sheet, akan mengabaikan tag <style>, tetapi isi atau text yang ada pada tag <style> akan ditampilkan oleh browser. Untuk mencegah hal ini bisa dilakukan dengan menyembunyikannya di dalam element komentar HTML.
Contoh :
<head>
<style type="text/css"><!--hr { color: sienna }p { margin-left: 20px }body { background-image: url ("images/Android.jpg") }--></style></head>
External Style Sheet
Cara penulisan CSS dengan cara ini sangat ideal jika style sheet diterapkan pada banyak dokumen (pages). Dengan cara external style sheet, kita dapat merubah keseluruhan tampilan website dengan hanya merubah satu file CSS. Setiap halaman atau dokumen harus memiliki link ke style sheet dengan menggunakan tag <link>. Tag <link> ditulis di dalam bagian head, yaitu diantara tag <head> dan </head>.
Contoh :
<head><link rel="stylesheet" type="text/css">href="mystyle.css" /></head>
Browser akan membaca semua definisi style dari file mystyle.css, dan memformat dokumen sesuai dengan definisi style.
Sebuah file external style sheet dapat ditulis menggunakan text editor, tetapi file tersebut tidak boleh mengandung tag-tag HTML didalamnya. Dan file style sheet harus disimpan dengan extension ".css".
Contoh file style sheet sebagai berikut :
hr { color: sienna }p { margin-left: 20px }body {background-image: url("images/Android.jpg") }
dari sini kalian sudah banyak tagu tentang mengenal jenis-jenis CSS serta keunggulan dan kekurangan dari masing-masing jenisnya. Rajin membaca banyak tahu, maka membacalah dan pahamilah isi makna dan fungsi-funsinya dari artikel di atas.
wagalasehh...mantul min
BalasHapusAlat cuci ultrasonic