» » » Metode Penyisipan CSS
, Edit

Metode Penyisipan CSS

Setelah pada sebelumnya saya telah memberikan tutorial Tentang Penyeleksian CSS (CSS selector) namun pada kali ini saya akan Membahas tutorial cara menyisipkan CSS. Dalam tutorial kali ini Sobat akan mempelajari mengenai cara menysispkan CSS pada dokumen HTML maupun diluar dokumen HTML, ada tiga cara untuk melakukan penyisipan CSS.

 Tiga Cara Menyisipkan CSS:
  • Style sheet eksternal
  • Internal style sheet
  • Style inline
Point-point diatas merupakan pokok bahasan kita kali ini.

 Styele Sheet Eksternal
Dari namanya saja pasti sobat tahu yang dimaksud eksternal, Ya betul... cara ini merupakan penyisipan CSS tidak menyatu dalam dokumen HTML. Cara Style sheet eksternal ini sangat cocok bila diterapkan untuk banyak halaman dokumen HTML dengan cari ini sobat dapat mengubah seluruh situs web hanya dengan mengubah satu file saja. Tapi dengan syarat pada setiap halaman HTML harus disertakan link menuju Style sheet(file CSS) dengan menggunakan tag <link/> yang dimasukkan kedalam bagian Heading, sebagai contoh:
<head>
<link rel="stylesheet" type="text/CSS" href="pustut.css" />
</head>
Sobat bisa menggunakan teks editor apapun untuk membuat Style sheet(file bertype CSS), file tersebut tidak boleh berisi tag-tag HTML dan disimpan dengan ekstensi CSS. Sebagai contoh file CSS yang disebut (stylepustut.css):
body {
background-color: lightsteelblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Style Sheet Internal
Penyisipan CSS dalam dokumen HTML, cara ini harus digunakan apa bila pada dokumen tunnggal dan mempunyai sebuah gaya yang unik. Untuk cara ini didefinisikan pada bagian Heading halaman HTML dan berada diantara tag <style>...</style>, sebagai contoh:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

<h1>Headingnya Sobat</h1>
<p>paragraphnya sobat.</p>

</body>
</html>
Hasil diatas:

silahkan sobat dapat mencobanya sendiri.

Inline Style
Cara Inline Style ini menurut saya kurang efisien jika digunakan karena memakan banyak waktu dalam proses pengerjaannya, bayangkan saja jika sobat membuat banyak dokumen HTML dengan menggunakan cara seperti ini. Sobat harus mengetikan kode pada setiap bagian elemen yang di beri Style sheet kalo sebaris atau dua baris tidak akan jadi persoalan tapi jika ratusan baris yang perlu kita kerjakan tentu akan menjadi persoalan besar. Maka dari itu Gunakanlah Cara ini Secukupnya Saja.. Untuk menggunakan cara Inline Style sobat bisa menambahkan atribut style pada tag yang bersangkutan yang ingin dirubah style nya.
Sebagai contoh saya akan menunjukan bagaimana cara untuk merubah warna dan margin kanan pada elemen "h1":
<!DOCTYPE html>
<html>
<body>

<h1 style="color:red;margin-right: 25px;">Headingnya sobat</h1>
<p>paragraphnya sobat.</p>

</body>
</html>
Hasil diatas:

silahkan sobat dapat mencobanya sendiri.

Multiple Style Sheet
Dalam kasus ini ada sebuah sifat yang namanya pewarisan nilai-nilai dari style sheet yang lebih spesifik, ini terjadi apa bila beberapa sifat yang telah ditetapkan dalam pemilihan yang sama namun style sheet yang ber beda. Sebagai contoh asumsikan bahwa style sheet eksternal mempunyai properti sebagai berikut dalam
memilih elemen " h1":
body {
background-color: lightsteelblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Dan kemudian anggaplah bahwa style sheet internal juga mempunyai properti untuk memilih elemen h1:
h1{
color:green;
}
Sebuah margin kiri diwariskan oleh style sheet eksternal sedangkan warna diganti dengan style sheet internal.
color: green;
margin-left: 20px;
maka akan menghasilkan seperti:

Sebagai latihan silahkan dibuat sendiri oleh sobat mengikuti contoh diatas.

Multiple Style Akan "Cascade" Menjadi Satu
Style dapat ditentukan dengan cara:
  • Menyisipkan dalam sebuah elemen HTML
  • Menyisipkan di bagian heading pada halaman HTML
  • Bisa secara eksternal dengan sebuah file CSS
Style seperti apakah yang akan dipergunakan bila ada lebih dari satu style yang ditentukan pada halaman HTML?

Pada umumnya dapat kita katakan bahwa seluruh style akan "cascade" dan "virtual" style sheet dengan aturan berikut, dimana point ke empat adalah pemilik
prioritas trtinggi:
  • Default browser
  • Style sheet eksternal
  • Internal style sheet(dibagian heading)
  • Inline style(dalam elemen HTML0
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="pustut.css">
<style>
body {background-color: linen;}
</style>
</head>
<body style="background-color: lightsteelblue">

<h1>Sejumlah Style akan cascade menjadi Satu</h1>
<p> Dalam contoh ini, pada warna latar belakang atur secara inline style, dalam stylesheet internal juga eksternal stylesheet.</p>
<p>Cobalah untuk bereksperimen dengan menghapus style atau menambah style untuk melihat bagaimana style sheet Cascading bekerja. (coba hapus inline pertama, kemudian internal, kemudian eksternal</p>

</body>
</html>

Silahkan sobat dapat mencobanya sendiri.
Artinya pada inline style(dalam elemen HTML) mempunyai prioritas tertinggi karena akan menimpa style yang didefinisikan dibagian tag <head> maupun dalam style sheet eksternal dan pada browser(nilai standar).
Catatan: Jika penempatan link pada style sheet eksternal berposisi setelah internal style sheet di halaman HTML <head> maka internal style sheet akan ditimpa oleh style sheet eksternal.

Gimana nih sobat sudah mengerti bukan tentang penggunaan Metode Penyisipan CSS? mudah-mudahan tutorial ini dapat dimengerti oleh sobat dan bermanfaat tentunya. Kalo gitu sekian untuk tutorial mengenai Metode Penyisipan CSS, kita akan lanjutkan kembali tutorial CSS di tutorial berikutnya :)


0 Response to "Metode Penyisipan CSS"

Post a Comment

Subscribe to: Post Comments (Atom)