CSS How To...
Three Ways to Insert CSS
Ada tiga cara untuk memasukkan style sheet:
1. Gaya sheet njaba
2. Gaya sheet Internal
3. gaya Inline
External Style Sheet
Style sheet eksternal sangat ideal bila gaya diterapkan pada banyak halaman. Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs dengan mengubah hanya satu file.
Setiap halaman harus menyertakan link ke style sheet dengan tag <link>. <Link> tag masuk ke dalam bagian kepala:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Style sheet eksternal dapat ditulis dalam editor teks apapun. File ini tidak boleh mengandung tag HTML. File style sheet harus disimpan dengan ekstensi .css. File sheet contoh gaya yang disebut "styleku.css", menunjukkan sebagai berikut:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Internal Style Sheet
Style sheet internal harus digunakan bila dokumen tunggal memiliki gaya yang unik. Anda mendefinisikan gaya internal di bagian kepala halaman HTML, di dalam tag <style>, seperti ini:
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
Inline Styles
Sebuah gaya inline kehilangan banyak keuntungan dari style sheet (dengan mencampurkan konten dengan presentasi). Gunakan metode ini hemat!
Untuk menggunakan gaya inline, tambahkan atribut style tag yang relevan. Atribut style dapat berisi properti CSS. Contoh ini menunjukkan bagaimana untuk mengubah warna dan margin kiri elemen h1:
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
Multiple Style Sheets
Jika beberapa sifat yang telah ditetapkan untuk pemilih yang sama dalam style sheet yang berbeda, nilai-nilai akan diwariskan dari style sheet lebih spesifik.
Sebagai contoh, asumsikan bahwa style sheet eksternal memiliki properti berikut untuk <h1> elemen:
h1 {
color: navy;
margin-left: 20px;
}
color: navy;
margin-left: 20px;
}
Kemudian, menganggap bahwa style sheet internal yang juga memiliki properti untuk <h1> elemen berikut:
h1 {
color: orange;
}
color: orange;
}
Kemudian, menganggap bahwa style sheet internal yang juga memiliki properti untuk <h1> elemen berikut:...
color: orange;
margin-left: 20px;
margin-left: 20px;
No comments:
Post a Comment