Kali ini saya akan share bagaimana caranya menggunakan css. Ada 3 cara menggunakan css berikut ini penjelasannya :
- External style sheet
- Internal style sheet
- Inline style
1. External style sheet
Sebuah style sheet eksternal sangat ideal bila css diterapkan pada banyak halaman. Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs Web dengan mengubah satu file. Setiap halaman harus link ke style sheet menggunakan tag <link>. Tag <link> masuk ke dalam bagian head :
Contoh memasukkan file css :
_______________________________________
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
_______________________________________
Sebuah style sheet eksternal dapat ditulis dalam editor teks apapun. File tersebut seharusnya tidak berisi tag html. Style sheet Anda harus disimpan dengan ekstensi css. Sebuah contoh dari sebuah file style sheet adalah sebagai berikut :
Contoh isi file css :
_______________________________________
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
_______________________________________
Catatan :
Jangan menambahkan spasi antara nilai properti dan unit (seperti margin-left: 20 px). Cara yang benar adalah: margin-left: 20px
2. Internal style sheet
Sebuah style sheet internal harus digunakan bila dokumen tunggal memiliki gaya/css yang unik. Anda mendefinisikan css internal di bagian kepala halaman HTML, dengan menggunakan tag <style>, seperti ini :
_______________________________________
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
_______________________________________
3. Inline style
Gaya/css inline akan kehilangan banyak keuntungan dari style sheet dengan mencampurkan konten dengan presentasi. Gunakan metode hemat ini !
Untuk menggunakan gaya inline Anda menggunakan atribut style dalam tag yang relevan. Atribut style dapat berisi properti CSS. Contoh ini menunjukkan bagaimana untuk mengubah warna dan margin kiri paragraf:
_______________________________________
<p style="color:sienna;margin-left:20px;">This is a paragraph.</p>
_______________________________________
Semoga bermanfaat.
3 CARA MENGGUNAKAN CSS
Reviewed by Syawaluddin Amin, S.Kom
on
Desember 31, 2013
Rating:
thank artikelnya sangat bermanfaat dan dapat ilmu baru untuk saya mengenai css.
BalasHapusjangan lupa kunjungi website saya : http://elsasutina.mahasiswa.atmaluhur.ac.id
dan website kampus saya : http://www.atmaluhur.ac.id