Selasa, 25 Juni 2013
Salam Web11...
Apa kabar teman-teman Web11? semoga kalian dalam keadaan sehat, sehingga kita bisa sama-sama melanjutkan pembelajaran tentang script-script yang digunakan dalam pembangunan sebuah website. Pada kesempatan kali ini, kami akan berbagi tentang bagaimana cara menggunakan script CSS pada dokumen HTML. sebelum kita lanjut dalam pembahasan kali ini, seperti biasa kami akan merekomendasikan artikel-artikel terkait kami tentang Belajar CSS.
Bila teman-teman sudah membaca artikel-artikel terkait kami, maka kita akan menlanjutkan pembahasan berikutnya. Disimak ya teman-teman.
3 Cara memasukkan Style CSS pada Dokumen HTML.
Ada 3 cara memasukkan style CSS yang kita buat pada sebuah dokumen HTML.
1. External Style Sheet.
2. Internal Style Sheet.
3. Inline Style.
Disini kita akan membahas satu persatu, agar teman-teman bisa mengerti dengan 3 cara yang dimaksud.
1. External Style Sheet.
Sebuah External Style Sheet sangat cocok digunakan untuk banyak dokumen / Halaman HTMl yang kita buat. Dengan External Style Sheet anda dapat merubah seluruh halaman web dengan hanya hanya mengubah satu file saja. Setiap halaman yang diubah harus link dengan Style Sheet menggunakan tag <link>. Tag <link> diantara <head>...</head>.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Sebuah external style sheet dapat ditulis dalam teks editor apapun. File tidak boleh mengandung tag html. Style Sheet harus disimpan dengan ekstensi ".css". Contoh dari sebuah file style sheet adalah sebagai berikut.
hr {color:sienna;}
p{margin-left:20px;}
body {background-image:url("images/web11.gif");}
p{margin-left:20px;}
body {background-image:url("images/web11.gif");}
2. Internal Style Sheet.
Sebuah Internal Style Sheet digunakan hanya pada dokumen tunggal HTML. Anda mendefinisikan Internal Style Sheet diantara <head>...</head> dengan menggunakan tag <style>, seperti contoh dibawah ini.
<head>
<style>
hr {color:sienna;}
p{margin-left:20px;}
body {background-image:url("images/web11.gif");}
</style>
</head>
<style>
hr {color:sienna;}
p{margin-left:20px;}
body {background-image:url("images/web11.gif");}
</style>
</head>
3. Inline Style
Inline Style memiliki banyak kekurangan dibandingakan Style Sheet yang lainnya. Untuk menggunakan Inline style anda harus menggunakan atribut style pada tag yang relevan. Style atribut dapat berisi properti CSS. Contoh dibawah ini menunjukkan bagaimana intuk mengubah wana dan margin kiri paragraph.
<p style="color:sienna; margin-left:20px;"> Ini adalah sebuah paragraph </p>
Demikian lah materi singkat dari kami tentang Cara memasukkan Style Sheet CSS pada dokumen HTML. Semoga artikel diatas bermanfaat bagi teman-teman yang ingin belajar Script-script dalam pembuatan Website khususnya CSS. ( Kritik dan saran dari pembaca sangat kami harapkan untuk meningkatkan kualitas artikel yang kami buat ).
