1 Panduan HTML dan CSS bagian 2 A. Apa itu CSS CSS (Cascading Style Sheets) merupakan kode pemrograman untuk membuat tampilan pada HTML. Selain menggu...
Apa itu CSS CSS (Cascading Style Sheets) merupakan kode pemrograman untuk membuat tampilan pada HTML. Selain menggunakan HTML para programer website sering menggunakan kode CSS untuk mengedit sebuah halaman website. Faktor kemudahanlah yang di gunakan para programer. Hanya mengedit CSS pada satu file maka seluruh konten yang ditampilkan akan berubah. CSS digunakan untuk mendefinisikan tampilan HTML di layar monitor. Dari konten gambar, teks, bilah sisi, warna, backgorund, spasi penulisan,
dan lain-lain. Pembuatan CSS ini mendukung semua browser.
B.
Struktur Kode CSS Kode CSS dituliskan dengan struktur sebagai berikut: •
menggunakan variable body{ isi kode css} konten { isi kode css}
•
nilai properti tidak menggunakan tanda petik body{ background:#eee; font-family:Arial Arial Arial; color:#fff; margin:0 auto; }
•
nama properti bersifat cas atau sensitif Penjelasan kode CSS di atas:
C.
variable/selector
: body
properti
: background, font-family, margin, color
value
: #eee, Arial, #fff, 0 auto
Cara Memanggil CSS Untuk membuat halaman HTML agar tersusun rapih dan tidak terlalu panjang, simpan kode/script yang telah dibuat dalam satu folder yang sama dengan file HTML tersebut. Hal ini memudahkan untuk pemanggilan kode CSS pada halaman HTML. Kode yang digunakan adalah sebagai berikut:
Panduan Lengkapp HTML dan CSS bagian 2 | Wahyu Setiyono
Penempatann kode pemanggila CSS diantara kode dan . Ada cara lain untuk memanggil kode CSS pada HTML yakni: Belajar CSS <syle type=”text/css”> body{ background:#eee; font-family:Geneva, Arial; dont-size:12px; color:#fff; } Isi Konten D.
Beberepa Penulisan CSS Ada beberapa cara penulisan CSS pada dokumen HTML, antara lin sebagai berikut: 1. Penulisan CSS bebas Maksud dari penulisan bebas adalah penempatan CSS berada di antara berbagai kode tag yang diinginkan. Sebagai contoh, perhatikan penulisan CSS di bawah ini. Belajar CSS <syle type=”text/css”> body{ background:#eee; font-family:Geneva, Arial; dont-size:12px; color:#fff;} gbawah{ text-decoration:underline;} Isi Konten yang bergaris bawah
Panduan Lengkapp HTML dan CSS bagian 2 | Wahyu Setiyono
2. Penggunaan CLASS pada CSS Belajar CSS <syle type=”text/css”> body{ background:#eee; font-family:Geneva, Arial; dont-size:12px; color:#fff;} .paragraf{ text-align:center; color:#ffae00; }
Isi Konten berwarna
3. Penggunaan ID pada CSS Belajar CSS <syle type=”text/css”> body{ background:#eee; font-family:Geneva, Arial; font-size:12px; color:#fff;} #content{ widht:970px; background:#fff; border:4px solid #2b2b2b; margin:0 auto; color:#ffa000; Panduan Lengkapp HTML dan CSS bagian 2 | Wahyu Setiyono
rata
tengah
dan
}
Isi Konten rata tengah dan berwarna
Apabila file CSS terpisah dengan kode HTML maka perlu kode untuk memanggil script CSS tersebut. Sebagai contoh perhatiakan script di bawah ini. Belajar CSS
Isi Konten rata tengah dan berwarna
Simpan script di atas dengan nama file index.html dan buat dokumen baru seperti berikut. body{ background:#eee; font-family:Geneva, Arial; font-size:12px; color:#fff;} #content{ widht:970px; background:#fff; border:4px solid #2b2b2b; margin:0 auto; color:#ffa000; } Simpan kode CSS di atas dengan nama file style.css. File ini di simpan/berlokasi pada satu folder dengan dokumen HTML yang telah dibuat. Panduan Lengkapp HTML dan CSS bagian 2 | Wahyu Setiyono
4. Format margin untuk mengatur tata letak halaman web Untuk mengatur tata letak web dapat menggunakan margin dalam pixel maupun em. Penggunaan masing-masing ukuran margin maupun yang lainnya tergantung pada si pembuat halaman website. Penggunaan pixel sering digunakan untuk pembuatan halaman web. Pixel merupakan ukuran dari panjang dan lebar 1 pixe layar. Keakuratan ini membuat bentuk dan ukuran yang tetap saat merubah ukuran halaman web. Namun untuk pengaturan teks, penggunaan pixel tidak akurat. Ketika spasi yang dibuat untuk memisahkan paragraf pertama dan kedua tetapi akan ada perubahan ukuran huruf seperti dari 8px ke 14px. Secara otomatis huruf berganti ukuran namun pemisah paragraf tetap pada ukurannya. Penggunaan em ini adalah ukuran yang dipengaruhi oleh ukuran sekitar. Ukuran em pada umumnya 1 em adalah 16 pixel. Peruntukan ukuran ini bisa dirubah ketika default ukuran juga diganti. Sebagai contoh ukuran default pemisah antar baris teks adalah 30px, secara otomatis 1 em juga bernilai 30 pixel. Keuntungan penggunaan em pada aturan teks sangat baik. Perubahan ukuran huruf yang dirubah dan spasi antar paragraf yang diatur pada ukuran em akan mengikuti secara default. Sehingga spasi antar paragraf berubah tidak tetap seperti penggunaan ukuran pixel. E.
Latihan Untuk memperlancar dan paham tentang kode CSS, seringlah membuat dan eksperimen untuk menghasilkan tampilan pada halaman web. Jangan menghafalkan kode CSS karena akan menjadi beban, biarkanlah mngalir dengan sendirinya. Buatlah menu sebuat halaman web. Belajar Membuat Web
Dari gambar di atas akan dibuat kode CSS untuk merubah tampilan agar lebih menarik pada halaman web. Simpan dengan file nama style.css .menu_nav { background: #1b1b1b; margin:0 auto; float: left; padding:0 0 0 20px; height: 200px; width:200px; overflow: hidden; } .menu_nav ul { list-style:none; width:50px; float:left; padding:0 10px 10px 10px;
Panduan Lengkapp HTML dan CSS bagian 2 | Wahyu Setiyono
} .menu_nav ul li { margin:0; padding:0 0 0 0; float:none; } .menu_nav ul li a { display:block; margin:0; padding:10px 15px; color:#ffffff; text-decoration:none; font:normal 13px Arial, Helvetica, sans-serif; } .menu_nav ul li.active a, .menu_nav ul li a:hover { display: block; height: 10px; width: 200px; color:#1b1b1b; text-decoration:none; } .menu_nav ul li a:hover { background: #23aef3; height: 15px; } Hasil dari tampilan yang telah di buah dengan kode CSS di atas adalah:
Panduan Lengkapp HTML dan CSS bagian 2 | Wahyu Setiyono
