HomeBelajar
CSS
Intro
Syntax
How To
Background
Text
Font
Border
Garis Tepi
Penjeda
List
Tabel
Link-Link
www.w3schools.com
Menggunakan CSS
Sebelumnya -- Berikutnya
--------------------------------------------------------------------------------
Bagaimana Memasukkan Style Sheet
Ketika browser membaca sebuah style sheet, dia akan memformat dokumen berdasat style tersebut. Ada tiga cara memasukkan style sheet:
External Style Sheet
Sebuah external style sheet sangat ideal jika style digunakan pada
banyak halaman web. Dengan external style sheet, kamu bisa mengubah
tampilan dari seluruh halaman web hanya dengan mengubah satu file. Tiap
halaman harus mengarah pada style sheet dengan tag <link>. tag <link>
berada di dalam tag <head>:
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>
Browser akan membaca definisi style dari file msstyle.css, dan mengatur
dokumen berdasar file tersebut.
Sebuah external style sheet dapat dituliskan di semua editor text. File
tersebut harus tidak memiliki tag HTML. Style sheet harus disimpan
dengan akhiran .css. Sebagai contoh:
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
JANGAN beri spasi antara nilai dengan satuannya! jika kamu menggunakan
"margin-left: 20 px" daripada "margin-left: 20px" HANYA akan bekerja
pada IE6 tetapi tidak pada Mozilla/Firefox atau bahkan Netscape.
Internal Style Sheet
Sebuah internal style sheet sebaiknya digunakan ketika sebuah dokumen
memiliki style unik. Kamu bisa menuliskan style pada bagian head
menggunakan tag <style>, seperti ini:
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>
Browser akan membaca style tersebut dan mengatur dokumen berdasarkan
style tersebut.
Catatan: Sebuah browser biasanya mengabaikan tag yang tidak diketahui.
Ini berarti browser kuno yang belum support styles akan mengabaikan tag
<style> dan menampilkan isinya di halaman. Ini bisa dicegah dengan
memberikan komentar HTML:
<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>
Inline Styles
Sebuah inline style kehilangan banyak kegunaan dari style sheet
dengan menggabungkan banyak konten. Gunakan metode ini dengan bijak,
seperti ketika sebuah style hanya muncul pada satu bagian elemen HTML.
Untuk menggunakan inline styles, kamu harus menggunakan atribut style
pada tag yang bersangkutan. Atribut style dapat berisi property CSS.
Perhatikan contoh berikut:
<p style="color: sienna; margin-left: 20px">
Ini paragraf
</p>
--------------------------------------------------------------------------------
Banyak Style Sheets
Jika beberapa property telah diatur pada selector yang sama tetapi di
style sheets berbeda, jika terdapat kesamaan property, nilai yang mana
akan dipakai berdasar aturan style sheet (sudah dijelaskan di awal).
Sebagai contoh, sebuah external style sheet berisi property berikut:
h3
{
color: red;
text-align: left;
font-size: 8pt
}
Dan sebuah internal style sheets berisi property berikut:
h3
{
text-align: right;
font-size: 20pt
}
Jika sebuah halaman memiliki internal style sheet dan terhubung pada
external style sheet, maka keduanya akan digunakan, dan jika terdapat
kesamaan propety, yang diutamakan adalah Internal style sheet:
color: red;
text-align: right;
font-size: 20pt
Warna diambil dari external style sheet dan pengaturan lainnya
diutamakan dari internal style sheet.
--------------------------------------------------------------------------------
Sebelumnya -- Berikutnya
--------------------------------------------------------------------------------
untuk halaman ini