Dokumen ini adalah terjemahan dari Adding a touch of style dan mungkin terdapat kesalahan penerjemahan.

Dokumen aslinya dapat di temukan di: http://www.w3.org/MarkUp/Guide/Style

Penerjemah: Edwin Rene

Dave Raggett   Menambahkan sedikit style

Dave Raggett, 8 April 2002.

Ini adalah sebuah panduan singkat mengenai cara untuk memberi style pada halaman Web anda. Panduan ini akan menunjukkan bagaimana menggunakaan Cascading Style Sheets language (CSS) dari W3C dan juga alternatif-alternatif lain menggunakan HTML itu sendiri. Rute ini akan membimbing anda menjauhi segala macam masalah yang disebabkan oleh perbedaan merek dan versi browser. 

Agar style sheet dapat digunakan, hal yang penting adalah bahwa markup yang anda miliki bersih dari kesalahan. Sebuah cara mudah dimana anda dapat secara otomatis membersihkan kesalahan markup adalah dengan menggunakan program HTML Tidy. Program ini juga membersihkan markup serta membuatnya lebih mudah dibaca dan diedit. Saya menyarankan anda untuk secara teratur menjalankan Tidy pada markup yang anda edit. Tidy adalah sebuah cara yang sangat efektif untuk membersihkan markup yang dibuat dengan program pembuat website yang ceroboh.

Hal berikut akan mengajarkan anda bagaimana cara:

Langkah Awal

Mari kita awali dengan menentukan warna dan latar belakang. Anda dapat mebuat hal ini menggunakan elemen STYLE untuk menentukan properti style dari tag-tag yang ada di dokumen:

<style type="text/css">
body { color: black; background: white; }
</style>

Elemen style ditempatkan diantara bagian head di dokumen. Berikut adalah sebuah template HTML menunjukkan dimana elemen diatas seharusnya berada. Anda dapat men-copy dan paste berikut ini kedalam editor sebagai sebuah cara yang mudah untuk mempelajari stylesheet:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> replace with your document's title </title>
<style type="text/css">
body { color: black; background: white; }
</style>

</head>
<body>
replace with your document's content
</body>
</html>

Segala sesuatu yang ada diantara <style> dan </style> ditulis dalam notasi khusus untuk aturan style. Setiap aturan di awali dengan nama tag diikuti dengan serangkaian properti style yang berada diantara kurung { dan }. Dalam contoh ini, ataran berlaku untuk tag body. Dan seperti yang anda dapat lihat, tag body merupakan dasar untuk menetapkan keseluruhan tata dan rupa dari halaman Web anda.

Tiap properti style diawali dengan nama properti, kemudian titik dua dan diikuti nilai dari properti. Bila ada lebih dari satu properti dalam daftar, anda memerlukan titik koma diantaranya untuk membatasi satu properti dengan yang berikutnya. Dalam contoh, ada dua properti - "color" yang menentukan warna dari teks, dan "background" yang menentukan warna dari latar belakang halaman. Saya menyarankan agar selalu menambahkan titik koma bahkan setelah properti terakhir.

Warna bisa dibuerikan berupa nama atau nilai numerik, sebagai contoh rgb(255, 204, 204) yang merupakan "fleshy pink". Ketiga angka tersebut secara berturut turut mewakilkan merah, hijau dan biru dengan kisaran  0 hingga 255. Anda juga dapat menggunakan notasi hexadecimal, warna yang sama juga dapat ditulis sebagai #FFCCCC. Detil lebih lanjut mengenai warna akan diberikan di bagian nanti.

Patut dicatat bahwa elemen style harus ditempatkan pada bagian head documen bersama dengan elemen title. Hal tersebut tidak boleh diletakkan pada bagian dalam body.

Menghubungkan ke sebuah style sheet terpisah

Bila anda ingin menggunakan style yang sama untuk beberapa halaman Web pages menggunakan sebuah style sheet yang terpisah patut anda pertimbangkan. Anda dapat melakukannya sebagai berikut:

<link type="text/css" rel="stylesheet" href="style.css">

Tag link harus diletakkan diantara elemen <head> ... </head>. Berikut file HTML dengan sebuah link ke style sheet eksternal:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> replace with your document's title </title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
replace with your document's content
</body>
</html>

Atribut rel dari elemen link harus diberi nilai "stylesheet" untuk memungkinkan browser mengenali bahwa atribut href memberikan (URL) bagi style sheet anda. Sebuah stylesheet dapat terlihat sebagai berikut:

/* style.css - a simple style sheet */
body {
margin-left: 10%; margin-right: 10%;
color: black; background: white;
}

Perlu dicatat bahwa file HTML yang sama dapat dihubungkan ke sebuah style sheet external  dan juga dimasukkan sebuah elemen style untuk menentukan style tambahan yang khusus untuk halaman ini. BIla anda menaruh elemen link sebelum elemen style, anda dapat menggunakan cara kedua untuk menimpa aturan style dalam style sheet yang terhubung.

Menentukan margin halaman

Halaman Web terlihat jauh lebih baik dengan margin yang besar. Anda dapat menentukan margin kiri dan kanan dengan properti "margin-left" dan "margin-right", misalnya,

<style type="text/css">
body { margin-left: 10%; margin-right: 10%; }
</style>

Hal tersebut menentukan kedua margin menjadi 10% dari lebar jendela, dan margin tersebut akan bertambah besar sesuai dengan skala bila anda merubah ukuran jendela..

Menentukan indentasi kiri dan kanan

Untuk membuat heading menjadi lebih terlihat beda, anda dapat membuatnya dimulai dengan menentukan margin untuk body, misalnya.

<style type="text/css">
body { margin-left: 10%; margin-right: 10%; }
h1 { margin-left: -8%;}
h2,h3,h4,h5,h6 { margin-left: -4%; }
</style>

Contoh ini memiliki tiga aturan. Satu untuk bagian badan, satu untuk h1 (diguanakan untuk heading yang paling penting) dan satu lagi untuk sisa dari heading (h2, h3, h4, h5 and h6). Margin untuk heading dapat ditambah pada margin dari body. Nilai negatif digunakan untuk memindahkan awal dari heading ke sebelah kiri dari margin yang ditentukan untuk body.

Dalam bagian berikut, contoh dari aturan style tertentu perlu diletakkan bersama dengan elemen style dalam bagian head dari dokumen (bila ada) atau dihubungkan dengan sebuah style sheet.

Mengatur white space di atas dan bawah

Browsers melakukan pekerjaan yang baik dengan white space yang berada di atas dan di bawah heading paragraf dsb sebelum sebuah heading atau paragraf dsb. Dua alasan untuk mengaturnya sendiri adalah anda ingin white space yang lebih banyak sebelum sebuah heading atau paragraf khusus, atau ketika anda ingin mendapatkan kontrol yang sempurna untuk pengaturan jarak.

Properti "margin-top" menentukan jarak diatas dan "margin-bottom" menentukan jarak dibawah. Untuk menentukan semua h2 heading anda dapat menulis:

h2 { margin-top: 8em; margin-bottom: 3em; }

Unit em sangatlah berguna karena besarnya dapat menyesuaikan diri dengan besaran fonta. Satu em sama dengan tinggi dari sebuah fonta. Dengan menggunakan em anda dapat mempertahankan bentuk umum dari halaman Web secara terpisah dan tidak tergantung pada besar fonta. Hal ini jauh lebih aman dari alternatif alternatif seperti pixel atau poin, dimana dapat menyebabkan problem untuk pengguna yang membutuhkan fonta besar untuk membaca teks.

Poin umum digunakan dalam program pengolah kata, misalnya, 10pt teks. Sayangnya ukuran poin yang sama di render secara berbeda pada browser yang berbeda. Apa yang kelihatannya baik baik saja di satu browser bisa tidak terbaca sama sekali di browser lain. Dengan menggunakan em anda menghilangkan problem ini.

Untuk menyatakan jarak di atas heading tertentu, anda perlu membuat sebuah style yang sudah diberikan nama untuk heading tersebut. Anda melakukan ini dengan menggunakan atribut class dalam markup.

<h2 class="subsection">Getting started</h2>

Aturan style tersebut kemudian ditulis sebagai berikut.:

h2.subsection { margin-top: 8em; margin-bottom: 3em; }

Rule tersebut dimulai dengan nama tag, sebuah titik dan nilai nama dari atribut class. Anda harus berhati-hati dalam menaruh spasi sebelum dan sesudah titik. Bila menaruh titik tersebut maka aturan tersebut tidak akan jalan.Ada beberapa cara lain untuk menentukan style untuk elemen tertentu tersebut tetapi penggunaan atribut class paling fleksibel.

Ketika sebuah heading diikuti sebuah paragraf, nilai untuk margin-bottom untuk heading tidak ditambahkan pada pada nilai dari margin-top pada paragraf. Malah, nilai maximum dari kedua nilai tersebut digunakan untuk jarak antara heading dan paragraf. Nilai ini digunakan pada margin-top dan margin-bottom tanpa memperdulikan tag apa yang digunakan.

Indentasi Baris Pertama

Terkadang anda mungkin ingin indentasi dari baris pertama dari tiap paragraf. Aturan berikut meniru bagaimana paragraf di buat pada novel-novel.

p { text-indent: 2em; margin-top: 0; margin-bottom: 0; }

Aturan tersebut memasukkan baris pertama dari tiap paragraf sebanyak 2 em dan menghilangkan jarak antar paragraf.

Mengontrol Fonta

Bagian ini menjelaskan bagaimana menentukan fonta dan ukuran, bagaimana menambahkan huruf miring/(italic), huruf tebal(bold) dan style lain.

Style Fonta

Jenis aturan paling umum adalah membuat teks jadi huruf miring atau huruf tebal. Kebanyakan browser merender tag em dalam huruf miring dan tag yang strong dalam huruf tebal. Mari berasumsi bahwa anda ingin em untuk muncul dalam bold italic dan strong dalam bold uppercase:

em { font-style: italic; font-weight: bold; }
strong { text-transform: uppercase; font-weight: bold; }

Bila anda ingin, anda dapat membuat heading menjadi huruf kecil seperti berikut:

h2 { text-transform: lowercase; }

Menentukan ukuran fonta

Kebanyakan browser menggunakan huruf besar untuk hal-hal yang lebih penting dari headings. Bila anda ingin mengesampingkan ukuran bawaan tersebut, maka anda beresiko untuk membuat teks menjadi terlalu kecil untuk dibaca, khususnya bila anda menggunakan poin. Oleh sebab itu anda disarankan untuk menbuat unkuran fonta dalam bentuk yang relatif.

Contoh ini menbuat ukuran heading dalam persentase relatif terhadap ukuran yang digunakan untuk teks normal:

h1 { font-size: 200%; }
h2 { font-size: 150%; }
h3 { font-size: 100%; }

Menentukan keluarga fonta

Adalah sebuah kemungkinan besar dimana fonta favorit anda tidak terdapat di semua browser. Untuk mengatasi hal ini, anda diperbolehkan menulis beberapa fonta, sesuai dengan urutan preferensi anda. Ada sebuah daftar pendek dari nama-nama fonta yang generik yang dipastikan ada, jadi anda direkomendasikan untuk mengakhiri daftar tersebut dengan salah satu yang berikut ini: serif, sans-serif, cursive, fantasy, atau monospace, misalnya:

body { font-family: Verdana, sans-serif; }
h1,h2 { font-family: Garamond, "Times New Roman", serif; }

Dalam contoh ini, dalam contoh ini, heading yang penting lebih baik ditampilkan dalam Garamond, bila tidak berhasil maka akan ditampilkan di Times New Roman, dan bila itu tak ada maka menggunakan fonta bawaan browser. Paragraf berikut akan muncul dengan Verdana atau bila tidak ada dalam fonta  sans-serif bawaan browser.

Kemampuan untuk membaca fonta-fonta yang berbeda umumnya tergantung pada tinggi dari huruf kecil dari ukuran fonta itu sendiri. Fonta seperti Verdana lebih mudah dibaca dibandingkan "Times New Roman" dan oleh sebab itu disarankan untuk teks paragraf.

Menghindari masalah dengan fonta dan margin

Aturan pertama adalah unyuk menghindari teks yang tidak dibungkus dengan elemen level blok seperti  p.pada level body. Contohnya:

<h2>Spring in Wiltshire</h2>

Blossom on the trees, bird song and the sound of lambs
bleating in the fields.

Heading berikut beresiko untuk dirender dengan fonta dan margin yang salah. Oleh sebab itu anda disarankan untuk menutup semua text dalam sebuah paragraf, contoh,

<h2>Spring in Wiltshire</h2>

<p>Blossom on the trees, bird song and the sound of lambs
bleating in the fields.</p>

Aturan saya yang kedua adalah untuk menentukan keluarga fonta untuk elemen-elemen pre, karena beberapa browser lupa menggunakan fonta dengan  pitch yang tetap ketika anda menentukan ukuran fonta atau properti lain untuk pre.

pre { font-family: monospace; }

Aturan saya yang ketiga adalah untuk membuat font family pada elemen-elemen heading, p dan ul jika anda ingin untuk menentukan batas serta latar belakang dari elemen seperti div. Ini adalah sebuah cara untuk menyiasati sebuah bug dimana browser lupa untuk menggunakan keluarga fonta yang diturunkan, dan malah menggunakan font bawaan yang ditetapkan pada browser.

h1,h2,h3,h4,h5,p,ul { font-family: sans-serif; }

Menambahkan batasan dan latar belakang

Anda dapat dengan mudah menambah pinggiran di sekeliling sebuah heading, list, paragraph atau kumpulan dari tadi dan ditutup dengan sebuah elemen div. Sebagai contoh:

div.box { border: solid; border-width: thin; width: 100% }

Ingat bahwa tanpa properti "width" beberapa browsers akan menempatkan margin kanan jauh ke kanan. Ini dapat kemudian digunakan dengan markup sebagai berikut:

<div class="box">
The content within this DIV element will be enclosed
in a box with a thin line around it.
</div>

Ada sedikit pilihan untuk batasan tepi: dotted, dashed, solid, double, groove, ridge, inset dan outset. Properti border-width menetapkan lebarnya. Nilainya antara lain termasuk thin, medium dan thick dan juga dapat ditulis lebarnya, contoh,. 0.1em. Properti border-color memungkinkan anda untuk menentukan warna.

Sebuah efek yang bagus adalah dengan menggambar latar belakang dengan kotak berwarna atau gambar yang dapat disusun seperti ubin (tiled image). Untuk melakukan hal ini anda menggunakan properti background. Anda dapat mengisi div yang menutup kotak seperti berikut:

 div.color {
background: rgb(204,204,255);
padding: 0.5em;
border: none;
}

Tanpa definisi yang jelas untuk properti border beberapa browser hanya akan menggambarkan latar belakang di setiap huruf. Properti padding memperkenalkan jarak ditiap ujung daerah berwarna dan teks di dalamnya.

Anda dapat menentukan nilai yang berbeda untuk sisi kiri, atas, kanan dan bawah dengan properti padding-left, padding-top, padding-right dan padding-bottom, misalnya. padding-left: 1em.

Misalnya anda hanya ingin batasan di beberapa sisi. Anda dapat mengatur properti batasan untuk tiap sisi secara terpisah menggunakan kelompok properti border-left, border-top, border-right dan border-bottom bersama dengan akhiran yang tepat: style, width atau color, contoh.

 p.changed {
padding-left: 0.2em;
border-left: solid;
border-right: none;
border-top: none;
border-bottom: none;
border-left-width: thin;
border-color: red;
}

yang membuat sebuah batasan berwarna merah hanya di sisi sebelah kiri dari paragraf dengan class "changed".

Menentukan Warna

Beberapa contoh untuk menentukan warna yang muncul di beberapa bagian sebelumnya. Berikut sebuah contoh untuk membantu anda mengingat:

 body {
color: black;
background: white;
}
strong { color: red }

Hal ini akan membuat text berwarna hitam dan latar belakang menjadi putih, tetapi membuat elemen strong menjadi merah. Ada 16 nama warna standar, yang dijelaskan dibawah. Anda juga dapat menggunakan nilai desimal untuk merah, hijau dan biru, dimana nilainya berkisar antara 0 hingga 255, contoh rgb(255, 0, 0) sama dengan red. Anda juga dapat menggunakan nilai warna hex color yang dimulai dengan karakter '#' diikuti dengan 6 digit  hexadesimal. Sebuah konverter tersedia dibawah memungkinkan anda untuk mengubah dari RGB ke nilai warna dalam hexa.

Menentukan Warna Link

Anda dapat menggunakan CSS untuk menentukan warna untuk untuk link hypertext, dan sebuah warna yang berbeda untuk link yang belum anda ikuti, yang sudah, dan warna aktif untuk ketika link tersebut sedang di click. Anda bahkan dapat menentukan warna pada saat mouse diposisikan di atas link.

 :link { color: rgb(0, 0, 153) } /* for unvisited links */
:visited { color: rgb(153, 0, 153) } /* for visited links */
a:active { color: rgb(255, 0, 102) } /* when link is clicked */
a:hover { color: rgb(0, 96, 255) } /* when mouse is over link */

Terkadang anda ingin menunjukkan link hyperteks tanpa membuat mereka diberi garis bawah. Anda dapat melakukan hal berikut dengan membuat properti text-decoration menjadi none, misalnya:

 a.plain { text-decoration: none }

Yang akan menghilangkan garis bawah untuk sebuah link seperti:

This is <a class="plain" href="what.html">not underlined</a>

Kebanyakan orang ketika mereka melihat teks dengan garis bawah di sebuah halaman Web, akan mengira bahwa bahwa hal tersebut merupakan bagian dari link hypertext. Akibatnya, anda disarankan untuk membiarkan garis bawah untuk link hypertext. Argumen juga berlaku untuk warna link, kebanyakan orang akan mengartikan text biru bergaris bawah sebagai link hypertext. Anda disarankan untuk membiarkan warna link, kecuali bila warna latar belakang membuatnya sulit dibaca.

Perihal Buta Warna

Bila menggunakan warna, patut diingat bahwa 5 hingga 10% pria menderita beberapa bentuk buta warna. Hal ini dapat berupa kesulitan membedakan merah dan hijau, atau biru dan ungu. Dalam kasus langka, ada ketidak mampuan untuk melihat warna sama sekali. Anda disarankan untuk menghidari kombinasi warna latar depan/latar belakang yang dapat membuat text susah dibaca bagi orang buta warna.

Nama Warna

Kumpulan standar dari nama warna adalah: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, dan yellow. Ke enambelas warna ini di definisikan di HTML 3.2 dan 4.01 serta berhubungan dengan monitor VGA biasa pada PCs. Kebanyakan browser menerima nama warna yang lebih beragam tapi hal ini tidak dianjurkan.

Nama Warna dan nilai sRGB
black = "#000000" green = "#008000"
silver = "#C0C0C0" lime = "#00FF00"
gray = "#808080" olive = "#808000"
white = "#FFFFFF" yellow = "#FFFF00"
maroon = "#800000" navy = "#000080"
red = "#FF0000" blue = "#0000FF"
purple = "#800080" teal = "#008080"
fuchsia = "#FF00FF" aqua = "#00FFFF"

Jadi, nilai warna "#800080" adalah sama dengan "purple".

Nilai warna hexadesimal

Niali seperti "#FF9999" mewakili warna sebagai nilai hexadesimal untuk merah, hijau dan biru. Dua karakter setelah  # memberikan nilai untuk red, dua yang berikut untuk hijau dan dua yang terakhir untuk biru. Nilai-nilai ini akan selalu berkisar dari 0 hingga 255 desimal. Bila anda tahu nilai desimalnya anda dapat merubahnya ke hexadesimal menggunakan sebuah kalkulator, seperti yang ada pada Microsoft Windows.

Masukkan nilai RGB atau Hexa dan tekan tombol yang sesuai untuk mengkonversikan
red: Hex color value
green:
blue:

Warna yang "Browser safe"

Komputer baru dapat menampiilkan ribuan atau jutaan warna, tapi banyak sistim tua yang hanya dapat menampilkan hingga 256 warna pada saat yang bersamaan. Untuk menanggulangi hal ini, browser-browser akan tampil dengan warna dari dari sebuah palet tetap. Efek dari hal ini adalah sering timbulnya bercak warna karena browser berusaha untuk menebak warna gambar yang sesungguhnya. Masalah ini akan perlahan hilang seiring dengan digantikannya komputer tua dengan model yang lebih baru.

Kebanyakan browser mendukung sesuatu yang dinamakan palet "browser safe". Hal tersebut menggunakan enam gradasi warna merah, hijau dan bira serta kombinasinya. Bila anda memilih warna gambar dari palet ini, anda dapat mencegah efek bercak tersebut. Hal ini khususnya berguna untuk gambar dari area latar belakang.

Bila browser menggunakan palet warna yang "browser safe", latar belakang halaman menggunakan warna terdekat dalam palet. Jika anda menetapkan latar belakang halaman dengan warna yang tidak berasal dari palet yang "browser safe", anda beresiko bahwa latar belakang akan memiliki warna yang berbeda tergantung dari warna indeks atau "true-color" yang digunakan oleh komputer anda.

Berikut dibuat dari warna dimana merah, hijau dan biru dibatasi dalam nilainya:

RGB 00 51 102 153 204 255
Hex 00 33 66 99 CC FF

Berikut adalah tabel dari warna yang bersifat "browser safe" dan nilai hexanya. Terima kasih pada Bob Stein untuk persiapannyai.

FFF
 FFF
CCC
 CCC
999
 999
666
 666
333
 333
000
 000
FFC
 C00
FF9
 900
FF6
 600
FF3
 300
99C
 C00
CC9
 900
FFC
 C33
FFC
 C66
FF9
 966
FF6
 633
CC3
 300
CC0
 033
CCF
 F00
CCF
 F33
333
 300
666
 600
999
 900
CCC
 C00
FFF
 F00
CC9
 933
CC6
 633
330
 000
660
 000
990
 000
CC0
 000
FF0
 000
FF3
 366
FF0
 033
99F
 F00
CCF
 F66
99C
 C33
666
 633
999
 933
CCC
 C33
FFF
 F33
996
 600
993
 300
663
 333
993
 333
CC3
 333
FF3
 333
CC3
 366
FF6
 699
FF0
 066
66F
 F00
99F
 F66
66C
 C33
669
 900
999
 966
CCC
 C66
FFF
 F66
996
 633
663
 300
996
 666
CC6
 666
FF6
 666
990
 033
CC3
 399
FF6
 6CC
FF0
 099
33F
 F00
66F
 F33
339
 900
66C
 C00
99F
 F33
CCC
 C99
FFF
 F99
CC9
 966
CC6
 600
CC9
 999
FF9
 999
FF3
 399
CC0
 066
990
 066
FF3
 3CC
FF0
 0CC
00C
 C00
33C
 C00
336
 600
669
 933
99C
 C66
CCF
 F99
FFF
 FCC
FFC
 C99
FF9
 933
FFC
 CCC
FF9
 9CC
CC6
 699
993
 366
660
 033
CC0
 099
330
 033
33C
 C33
66C
 C66
00F
 F00
33F
 F33
66F
 F66
99F
 F99
CCF
 FCC
CC9
 9CC
996
 699
993
 399
990
 099
663
 366
660
 066
006
 600
336
 633
009
 900
339
 933
669
 966
99C
 C99
FFC
 CFF
FF9
 9FF
FF6
 6FF
FF3
 3FF
FF0
 0FF
CC6
 6CC
CC3
 3CC
003
 300
00C
 C33
006
 633
339
 966
66C
 C99
99F
 FCC
CCF
 FFF
339
 9FF
99C
 CFF
CCC
 CFF
CC9
 9FF
996
 6CC
663
 399
330
 066
990
 0CC
CC0
 0CC
00F
 F33
33F
 F66
009
 933
00C
 C66
33F
 F99
99F
 FFF
99C
 CCC
006
 6CC
669
 9CC
999
 9FF
999
 9CC
993
 3FF
660
 0CC
660
 099
CC3
 3FF
CC0
 0FF
00F
 F66
66F
 F99
33C
 C66
009
 966
66F
 FFF
66C
 CCC
669
 999
003
 366
336
 699
666
 6FF
666
 6CC
666
 699
330
 099
993
 3CC
CC6
 6FF
990
 0FF
00F
 F99
66F
 FCC
33C
 C99
33F
 FFF
33C
 CCC
339
 999
336
 666
006
 699
003
 399
333
 3FF
333
 3CC
333
 399
333
 366
663
 3CC
996
 6FF
660
 0FF
00F
 FCC
33F
 FCC
00F
 FFF
00C
 CCC
009
 999
006
 666
003
 333
339
 9CC
336
 6CC
000
 0FF
000
 0CC
000
 099
000
 066
000
 033
663
 3FF
330
 0FF
00C
 C99
009
 9CC
33C
 CFF
66C
 CFF
669
 9FF
336
 6FF
003
 3CC
330
 0CC
00C
 CFF
009
 9FF
006
 6FF
003
 3FF

Contoh warna untuk palet yang "browser safe" tersedia di banyak paket software grafis, dari www.visibone.com.

Bagaimana tentang browser yang tidak mendukung CSS?

Browser - browser tua, boleh dikatakan sebelum Netscape 4.0 dan Internet Explorer 4.0, tidak mendukung CSS sama sekali atau mendukungnya tapi tidak konsisten. Untuk browser-browser ini anda masih bisa mengontrol style menggunakan HTML.

Menentukan warna dan latar belakang

Anda dapat menentukan warna dengan menggunakan tag BODY. Contoh berikut menentukan warna latar belakang menjadi putih dan warna teks hitam:

<body bgcolor="white" text="black">

Elemen BODY harus ditempatkan sebelum ada isi yang ditampilkan pada halaman Web, contoh, sebelum heading pertama. Anda juga bisa menentukan warna dari link hypertext. Ada tiga atribut untuk ini:

Berikut sebuah contoh dimana ketiganya ditentukan:

<body bgcolor="white" text="black"
link="navy" vlink="maroon" alink="red">

Anda juga dapat membuat browser untuk menyusun latar belakang dari gambar menggunakan atribut latar belakang untuk menentukan alamat Web untuk gambar, misalnya.

<body bgcolor="white" background="texture.jpeg" text="black"
link="navy" vlink="maroon" alink="red">

Merupakan sebuah ide yang baik untuk menentukan warna latar belakang menggunakan attribute bgcolor jika browser tidak dapat merender sebuah image. Anda harus memeriksa warna yang anda pilih tidak membuat sesuatu menjadi sesuatu menjadi susah dibaca: Sebagai sebuah kasus ekstrim pertimbangkan hal berikut ini:

<body bgcolor="black">

Kebanyakan browser akan merender teks dengan warna hitam. Hasilnya adalah bahwa halaman akan menunjukkan teks hitam pada warna hitam! Kebanyakan orang menderita dari kebutaan terhadap satu warna atau lainnya, misalnya olive green dapat terlihat sebagai coklat untuk beberapa orang.

Sebuah masalah lain muncul ketika anda berusaha mencetak halaman Web. Banyak browser akan meniadakan warna latar belakang tetap mereka akan tetap mengikuti warna teks. Menjadikan warna teks putih sering membuat halaman kosong, jadi hal berikut ini tidak disarankan:

<body bgcolor="black" text="white">

Anda juga dapat menggunakan atribut bgcolor dengan sel dari sebuah tabel contoh.

<table border="0" cellpadding="5">
<tr>
<td bgcolor="yellow">colored table cell</td>
</tr>
</table>

Tabel dapat digunakan untuk berbagai macam variasi efek tata letak dan sudah banyak dieksploitasi untuk hal ini. Di masa depan fungsi ini kemungkinan akan digantikan oleh style sheets, dimana masalah tata letak menjadi lebih praktis dalam pencapaiannya dengan usaha yang lebih sedikit.

Menentukan fonta, ukurannya dan warna

Tag FONT dapat digunakan untuk memilih fonta, menentukan ukurannya dan warnanya. Contoh ini hanya menentukan warna:

This sentence has a <font color="yellow">word</font> in yellow.

Atribut face digunakan untuk menentukan fonta. Hal terebut mengambil sebuah daftar dengan urutan preferensi, contoh.

<font face="Garamond, Times New Roman">some text ...</font>

Atribut size dapat digunakan untuk memilih ukuran fonta sebagai sebuah nomor dari 1 hingga 6. Bila anda menempatkan tanda  - atau + sebelum angka maka akan diartikan sebagai nilai yang relatif. Gunakan ukuran"+1" bila anda ingin melihat ukuran fonta yang lebih besar dan ukuran ="-1" bila anda ingin menggunakan ukuran fonta yang lebih kecil, misalnya,

<font size="+1" color="maroon"
face="Garamond, Times New Roman">some text ...</font>

Ada beberapa hal yang anda harus hindari: Jangan memilih kombinasi warna yang menyebabkan warna menjadi sulit dibaca oleh orang-orang yang menderita buta warna. Jangan menggunakan fonta biasa untuk heading, dimana yang harus selalu digunakan adalah tag h1 hingga h6 sesuai dengan tingkat kepentingan heading..

Mendapatkan Informasi Lebih Lanjut

Untuk informasi lebih lanjut mengenai CSS dan alat yang digunakan untuk mendukungnya, anda sebaiknya melihat halaman W3C untuk CSS. Ini termasuk petuntuk higga buku mengenai HTML dan CSS, misalnya, "Raggett on HTML 4", dipublikasikan tahun 1998 oleh Addison Wesley. Untuk sebuah penjelasan yang lebih detil mengenai CSS, "Cascading Style Sheets" oleh Håkon Wium Lie dan Bert Bos, pub. 1999 oleh Addison Wesley, yang melihat CSS secara lebih detil, oleh orang orang yang merupakan arsitek CSS itu sendiri.

Saya berencana untuk mengembangkan panduan ini dengan tambahan halaman menjelaskan peletakan, pencetakan CSS serta style sheet aural.

Semoga sukses dan mulailah menulis!

Copyright © 1994-2003 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply. Your interactions with this site are in accordance with our public and Member privacy statements.