Menambahkan Sedikit Style

By: Dave Raggett

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.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:
· menggunakan elemen style
· menghubungkan ke style sheet terpisah
· menentukan margin halaman
· menentukan identasi kiri dan kanan dan baris pertama
· menentukan jumlah dari whitespace di atas dan bawah
· menentukan tipe fonta, style serta ukuran
· menambahkan batas serta latar belakang
· menentukan warna dengan nilai nama atau numerik
· menambahkan style untuk browser yang tidak mengerti CSS
Langkah Awal
Kita akan 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:

body { color: black; background: white; }

Elemen style biasanya ditempatkan diantara bagian head di dokumen.Segala sesuatu yang ada diantara dan 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.
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.
Menentukan margin halaman

Halaman Web terlihat jauh lebih baik dengan margin yang besar. Yaitu dengan menentukan margin kiri dan kanan dengan properti “margin-left” dan “margin-right”.
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. Properti “margin-top” menentukan jarak diatas dan “margin-bottom” menentukan jarak dibawah.
Mengontrol Fonta
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.
Menentukan ukuran fonta
Kebanyakan browser menggunakan huruf besar untuk hal-hal yang lebih penting dari headings. Menentukan k
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.
Menghindari masalah dengan fonta dan margin
Aturan pertama adalah untuk menghindari teks yang tidak dibungkus dengan elemen level blok seperti p. Aturan 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. Aturan 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.

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% }
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.
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
CSS dapat digunakan untuk menentukan warna 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.
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.

Asvitri Dwi Utami, B1J008003

Add a comment 22 Oktober 2008

Selamat Hari Raya Idul Fitri 1429H

Taqobalallohu minna wa minkum shiyaamana wa shiyaamakum…

Mohon Maaf Lahir dan Batin….

Maafin atas semua kesalahan Mimi ya…

Add a comment 14 Oktober 2008