Bab

iiCascading Style Sheet (CSS), Solusi mempercantik halaman web

vii

Cascading Style Sheets(CSS),

Solusi Hebat Mempercantik Halaman Web

Cascading Style Sheets(CSS) adalah sebuah document yang digunakan untuk menangani pengaturan halaman web. Doucument ini tidak dapat disebut sebagai bahasa pemrograman, melainkan sebuah desain berbasiskan Scripting yang embeded pada tag HTML. Jadi, CSS merupakan sebuah pengembangan document yang dapat melalukan dukungan terhadap HTML dalam desain web.

CSS memiliki kemampuan yang sangat hebat. Bayangkan dengan menggunakan satu halaman document CSS Kita dapat melakukan pengontrolan desain pada semua halaman web yang ada pada portal yang Kita miliki. Fungsi inilah yang mengakibatkan document CSS juga sering digunakan sebagai pendukung Document Template.

Kemampuan lain yang dimiliki CSS adalah dapat menciptakan fungsi-fungsi yang dikolaburasikan dengan JavaScript, sehingga semua bentuk animasi ataupun Event yang dilakalukan oleh JavaScript dapat dipadukan dengan desain CSS.

Selain itu CSS juga dapat menggantikan fungsi tabel, hal tersebut sangat bermanfaat bagi Kita yang hendak mengembangkan sehuah sistem informasi maupun sistem komputerisasi yang menuntut kecepatan dan keindahan desain yang dapat selalu berubah tanpa harus merombak semua sistem yang telah berjalan.

Jadi, dengan menggunakan satu halaman Document CSS Kita dapat melakukan pengaturan terhadap semua halaman web yang ada. Sehingga apabila Kita ingin melakukan perubahan desain maka Kita tidak perlu untuk membuka semua halaman web yang ada, melainkan hanya perlu merubah satu halaman Document CSS saja.

DAFTAR ISI

Kata Pengantar

Daftar Isi

Mengenal CSS dan CSS2 ...... 1

Mengenal CSS2 ......... 1Keuntungan menggunakan CSS2 ....... 1Style Sheet yang Pertama ....... 2Cara menggunakan CSS2 ........... 4External Style Sheet ......... 4Internal Style Sheet .......... 6Inline Style Sheet ......... 8

Aturan Penulisan dan Type data pada CSS ..... 11

Aturan Penulisan ....... 11Tokenisasi ...... 11Kata Kunci sebagai Nilai atau .............. 13Penggunaan Karakter dan Huruf ..... 14Aturan Penggunaan Ad (@ ) / ... 15Penglompokan ........ 15Aturan mendeklarasikan Penglompokan .... 16Aturan dalam membuat deklarasi ........ 18Komentar ....... 19Kesalahan dalam penulisan CSS ..... 20Nillai (Value) yang digunakan dalam Statetment ....... 22Bilangan bulat dan pecahan .... 22Nilai yang berkaitan dengan Panjang Object/ .... 22Nilai bersifat Persentase / ......... 23 Penggunaan URL / ........ 24Nilai Pewarnaan / ......... 25Ukuran yang berhubungan dengan Sudut / ....... 26Ukuran yang berhubungan dengan Waktu / ......... 28Frequencies ............ 28Karakter / String ......... 28

Selector Sebagai Pengontrol Desain .... 29

Mengenal Selector ........... 29Grouping ....... 33Jenis-Jenis Selector ........ 34Selector Bebas ........ 34Selector Class (Selector dengan Kelas) ....... 35Id Selector .......... 39Universal Selector ...... 43Descendant Selectors .......... 43

Memformat halaman Web ............................ 47

Pendahuluan ......................... 47Penentuan Margin Halaman ....... 47Margin pada komponen Lain .......... 50Pemetaan menggunakan Padding .......... 52Dimensi pada Halaman Web ........ 54Dimensi Gambar ....... 55Dimensi Pada Paragraph ............ 57

Halaman Web lebih menarik dengan Background 61

Pendahuluan ........ 61Pengaturan Warna ........ 62 Pengaturan Background Halaman .... 64Background dengan Warna ... 65Background dengan Gambar ........... 68Pengulangan Gambar Background ......... 71Mengatur Posisi Background .......... 75Kondisi Pemaasngan Background ........... 78

Memformat Text pada Content Web . .. 83

Pendahuluan ....... 83Pengaturan Text dan Paragraph ...... 83Pengaturan Warna pada Text .. 84Pengaturan Spasi .... 86Perataan Text .... 88Pengaturan Bentuk Text .... 90Pengaturan Text Identasi ... 93Pengubahan Bentuk Karakter ... 95Peregangan/Spasi per Kata .... 98Pengatuaran Text Yang lain .. 100

Pengaturan Bentuk Font ............. 103

Pengenalan ....... 103Pengaturan Bentuk ....... 103Pengaturan Jenis Font ........ 104Menentukan Ukuran Huruf ....... 107Pengaturan Gaya pada Font ....... 110Ketabalan Huruf ........ 112Pengaturan Bentuk lainya ...... 115Contoh Kolaborasi dengan beberapa bentuk Font ...... 117Contoh Contoh Format Font dan Nilainya ....... 119

Format Halaman menggunakan Border ......,. 121

Pendahuluan ........ 121Menggunakan Border .......... 122Style Pada Border ........ 124Mengganti Border Style Atas ......... 127Mengganti Style kanan,bawah dan kiri ...... 129Warna Pada Border .......... 131Mengganti warna setiap sisi border ........ 135Mengubah Ukuran Border........ 137Pengubahan Lebar pada sisi Border .... 139

Membuat List/Daftar Lebih Menarik .......... 143

Pendahuluan .... 143Pengaturan pada Ordered List ...... 144Pengaturan pada Unordered List ...... 151Peletakan Posisi Dafatar ... 154Memformat Daftar degan Warna dan Background .. 159Simbol Daftar dengan Gambar ..... 160

Pengaturan Tabel dan Pewarnaanya ... 165

Pendahuluan .... 165Pengaturan Pading Tabel ...... 165Pengaturan Padding atas pada Tabel .. 165Pengaturan padding kanan tabel ..... 169Pengaturan Padding bawah tabel .... 171Pengaturan padding kiri pada tabel .... 173Latihan Pengaturan pada Tabel Spesifikasi Komputer .. 175Menciptakan Tabel ........ 176Memberi Border pada Bagian Header ....... 178Memberi Border pada bagian Body ....... 180Memberi Efect pada Cell Windows ....... 182Latihan Pengaturan pada Tabel Jadwal belajar ..... 185Membuat tabel Jadwal ....... 185Memberi Border pada Cell Isi .... 189Menyeleksi Isi tabel denan Bentuk yang berbeda ... 191Menampikan Semua Cell yang kosong .. 194Membedakan Setiap Bagian Tabel dengan Border . 196Memberi warna yang berbeda pada setiap Kolom .. 199

Membuat Formulir Cantik .................................. 205

Pendahuluan .... 205Mengenal Form dalam web ...... 206Pengaturan dengan CSS ... 207Pengaturan Komponen Komponen Form.... 207Pengaturan pada Text Field ...... 207Memberi warna Background ...... 207Pengaturan Textfield menjadi Flat ...... 110Membuat Textfield seperti pada Formulir kertas .... 112Pengaturan pada Komponen Button /Tombol ... 214Menciptakan Tombol berwarna ..... 216Membuat Tombol Flat berwarna ... 218Pengaturan pada Radio Button ..... 221Pewarnaan pada Radio Button ... 222Memberi Border pada Pilihan Radio Button .. 224Pengaturan pada Check Box .... 227Pengaturan pada List Box .... 230 Pewarnaan Pada List Box .. 230Pewarnaan pada Setiap Option.... 232Pengaturan pada Komponen Text Area .... 237Pewarnaan pada Text Area...... 238Pewarnaan Scroll pada Text Area............ 240Menghilangkan Scroll Bar pada Text Area ..... 242Memberi Background Gambar pada Komponen Form ... 244

Membuat Hyperling dan Tombol yang menarik . 247

Pendahuluan ........ 247Pengaturan Hyperlink ........... 247Hyperlink berganti bacground saat di lewati Mouse ....... 252Pergantian Jenis Font saat dilewati Mouse . 254Pengaturan Tombol ...... 260Hyperlink Menggunakan List / Daftar .. 266Membuat Tombol Visual .......... 270Tombol 3 Dimensi 1 .......... 270Membuat Tombol Visual 2 ........ 274Isi tombol di tampilkan dalam satu halaman ...... 277

Penggunaan CSS dengan JavaScript .......... 283

Pendahuluan ............ 283Fungsi JavaScript ............ 283Kejadian pada Mouse dengan In Line Style ...... 285Menggunakan Kejadian OnMouseOver . 286Menggunakan Kejadian OnMouseOut ... 287Menggunakan Kejadian OnMouseDown ... 289Menggunakan Kejadian OnMouseUP ..... 290Kejadian pada Mouse dengan Internal Style ..... 291

Desain Web Tanpa Tabel ........... 295

Pendahuluan .................................................... 295 Pengaturan dan Penempatan Content ........... 297Membuat Kolom Koran ................................ 301

Tips dan Trik ......... 308

Menghilangkan Garis bawah pada Link ....... 308Efect Stabilo ......... 309Membuat Scrollbar Berwarna ....... 310Membuat Gambar Statis pada Background ....... 313Format Tabel dengan Frame ......... 315Pointer Mouse .......... 319

Lampiran 1, Propertie yang digunakan pada CSS dan CSS2 .

Lampiran 2, Symbol dan Karakter Khusus ..

Lampiran 3, Warna Dasar dan Warna Campuran ........