Make your own free website on Tripod.com
 
w3schools versi Indonesia supported by Irawan
 
Home

Belajar CSS
Intro
Syntax
How To
Background
Text
Font
Border
Garis Tepi
Penjeda
List
Tabel

Belajar HTML

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
--------------------------------------------------------------------------------
 

Pilih Style
untuk halaman ini
Style Awal (Hijau)
Style Kuning
Style Abu-Abu