Ketika browser membaca style sheet, maka akan memformat dokumen menurut informasi dalam style sheet.
Tiga Cara Sisipkan CSS
Ada tiga cara untuk memasukkan style sheet:- Style sheet eksternal
- Internal style sheet
- Gaya inline
Style Sheet eksternal
Style sheet eksternal sangat ideal bila gaya diterapkan pada banyak halaman. Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs Web 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>Style sheet eksternal dapat ditulis dalam editor teks apapun. File tidak boleh berisi tag html. File style sheet harus disimpan dengan ekstensi css. Contoh dari file style sheet yang disebut "styleku.css", adalah sebagai berikut:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Keterangan : Jangan menambahkan spasi antara nilai properti dan satuan (seperti margin-left: 20 px;). Cara yang benar adalah: margin-left: 20px;
Style Sheet internal
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:Contoh
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
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:
Contoh
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
0 Komentar untuk " CSS Cara "