Panduan HTML dan CSS bagian 2 A. 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, <h1> dan lain-lain. Pembuatan CSS ini mendukung semua browser. B. Struktur Kode CSS Kode CSS dituliskan dengan struktur sebagai berikut: menggunakan variable isi kode css konten { isi kode css nilai properti tidak menggunakan tanda petik font-family:arial Arial Arial; color:#fff; margin:0 auto; nama properti bersifat cas atau sensitif Penjelasan kode CSS di atas: variable/selector properti value : body : background, font-family, margin, color : #eee, Arial, #fff, 0 auto C. 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:
<link rel= stylesheets type= text/css href= nama_file.css > Penempatann kode pemanggila CSS diantara kode dan. Ada cara lain untuk memanggil kode CSS pada HTML yakni: <syle type= text/css > 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. <syle type= text/css > dont-size:12px; color:#fff; gbawah{ text-decoration:underline; <gbawah> Isi Konten yang bergaris bawah</gbawah>
2. Penggunaan CLASS pada CSS <syle type= text/css > dont-size:12px; color:#fff;.paragraf{ text-align:center; color:#ffae00; <h1 clas='paragraf'> Isi Konten rata tengah dan berwarna</h1> 3. Penggunaan ID pada CSS <syle type= text/css > font-size:12px; color:#fff; #content{ widht:970px; background:#fff; border:4px solid #2b2b2b; margin:0 auto; color:#ffa000;
<div id='content'> <h1> Isi Konten rata tengah dan berwarna</h1> </div> Apabila file CSS terpisah dengan kode HTML maka perlu kode untuk memanggil script CSS tersebut. Sebagai contoh perhatiakan script di bawah ini. <link rel= stylesheets href= style.css type= text/css > <div id='content'> <h1> Isi Konten rata tengah dan berwarna</h1> </div> Simpan script di atas dengan nama file index.html dan buat dokumen baru seperti berikut. 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.
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. <title>belajar Membuat Web</title> <link href="style.css" rel="stylesheet" type="text/css" /> <div class="menu_nav"> <ul> <li><a href='#'>home</a></li> <li><a href='#'>blog</a></li>
<li><a href='#'>tentang</a></li> <li><a href='#'>kontak</a></i> </ul> </div> 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;
.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:
Tentang Penulis Nama : WAHYU SETIYONO Kelahiran tahun : 1993 Bidang pekerjaan : Desain Grafis Facebook : www.facebook.com/wahyuninggusti Twitter : www.twitter.com/why_usetiyono Website : http://www.webwahyu.web.id http://webwahyu.wordpress.com Deskripsi lain : Kesukaan dan hobi pada pemrograman website membuat saya bisa mengutak-atik. Bukannya saya bisa namun karena suka.