CSS dan Tata Letak Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed Iwan Setiawan <stwn at unsoed.ac.id> Tahun Ajaran 2011/2012
a, a:visited { text-decoration:none; } a:hover { text-decoration:underline; }
p:first-letter { font-weight: bold; font-size:150%; }
ol { } counter-reset: item X; display: block; ol li { display: block; } ol li:before { content: counter(item, decimal) ". "; counter-increment: item -1; }
Berapa cara pendefinisian CSS?
selector.
elemen/tag, id (#), class (.)
Membagi Halaman Web (untuk tata letak yang lebih baik)
Memberikan gaya pada setiap elemen, atau kelompok elemen, bagian teks atau halaman tertentu.
Tata letak yang lebih kompleks.
Contoh CSS.special1 { background color: yellow; font weight: bold; }.special2 { color: red; font family: cursive; }
Bagian-Bagian Halaman: <div> Sebuah bagian dari sebuah halaman web (blok). <div class= special1 > <p class= special2 >Ini kalimat istimewa!</p> </div> Tag atau elemen div digunakan untuk membuat bagian bagian dalam sebuah halaman. Tidak terlihat atau tertampil secara default, tetapi kita dapat membuat gaya padanya.
Bagian Inline: <span> Sebuah elemen inline untuk menerapkan gaya pada rentang teks tertentu. <h2>selamat Datang!</h2> <p>selamat melihat <span class="special1">produk</span> kami.</p> <p>sila membandingkannya dengan yang <span class="special2">lain</span>!</p> Seperti div, span tidak terlihat atau tertampil secara default, tetapi kita dapat membuat gaya padanya yang akan diterapkan pada teks di dalam tag span.
Context Selector CSS selector1 selector2 { properti } Menerapkan properti pada selector2 jika selector2 berada di dalam selector1. selector1 > selector2 { properti } Menerapkan properti pada selector2, jika selector2 langsung berada di dalam selector1 tanpa ada tag lain yang mendahuluinya.
Contoh Context Selector (1) HTML <p>berbelanjalah di <strong>toko kami</strong>...</p> <ul> <li>tersedia <strong>barang elektronik</strong>!</li> <li>atau barang barang lainnya!</li> </ul> CSS li strong { text decoration: underline; }
Contoh Context Selector (2) HTML <div id="ad"> <p>berbelanjalah di <strong>toko kami</strong>...</p> <ul> <li class="important">tersedia <strong>barang elektronik</strong>!</li> <li>atau <strong>barang yang lainnya!</strong></li> </ul> </div> CSS #ad li.important strong { text decoration: underline; }
Model Boks CSS Untuk tujuan tata letak, setiap elemen disusun: isi elemen (content) batas elemen (border) jarak isi dan batas elemen (padding) jarak batas elemen dan isi lain (margin) Lebar = lebar content + padding kanan/kiri + border kanan/kiri + margin kanan/kiri Tinggi = tinggi content + padding atas/bawah + border atas/bawah + margin atas/bawah
IE6?
Alur Dokumen
Elemen Blok
Elemen Blok dan Inline
Properti CSS untuk border (1) h2 { border: 5px solid red; } Properti border Penjelasan ketebalan, gaya, ukuran, pada 4 sisi Ketebalan: px, pt, em atau thin, medium, thick style: none, hidden, dotted, dashed, double, groove, inset, outset, ridge, solid color: seperti teks dan latar belakang
Properti CSS untuk border (2) Properti border-color, border-width, border-style border-bottom, border-left, border-right, border-top border-bottom-color, border-bottom-style, border-bottom-width, border-left-color,... Penjelasan Properti spesifik semua sisinya Semua properti sesuai dengan sisinya Properti border sesuai sisinya Lihat http://w3schools.com/css/css_reference.asp#border
Contoh border h2 { border left: thick dotted #CC0088; border bottom color: rgb(0, 128, 128); border bottom style: double; } Properti border setiap sisi dapat diset. Jika kita menghapus sebuah properti maka properti tersebut akan diset ke default.
Properti CSS untuk padding Properti padding padding-top padding-right padding-bottom padding-left Penjelasan Padding 4 buah sisi Padding sisi atas Padding sisi kanan Padding sisi bawah Padding sisi kiri Lihat http://w3schools.com/css/css_reference.asp#padding
Contoh padding p { padding: 20px; border: 3px solid black; } h2 { padding: 0px; background color: yellow; } p { padding left: 200px; padding top: 30px; background color: fuchsia; } Padding setiap sisi dapat diset masing masingnya. Warna latar belakang padding mengikuti elemen.
Properti CSS untuk margin Properti margin margin-top margin-right margin-bottom margin-left Penjelasan margin 4 buah sisi margin sisi atas margin sisi kanan margin sisi bawah margin sisi kiri Lihat http://w3schools.com/css/css_reference.asp#margin
Contoh margin p { margin: 50px; background color: fuchsia; } p { margin left: 8em; background color: fuchsia; } Margin selalu transparan, tidak berisi latar belakang elemen, dst. Setiap sisi margin dapat diset masing masing.
Properti CSS untuk Dimensi p { width: 350px; background color: yellow; } h2 { width: 50%; background color: aqua; } Properti width, height max-width, max-height, min-width, min-height Penjelasan Seberapa lebar dan tinggi sebuah elemen (blok) Ukuran maksimal dan minimal elemen
auto margin p { margin left: auto; margin right: auto; width: 750px; } Jika width tidak diset maka akan mengambil semua lebar halaman Untuk elemen inline dalam elemen blok gunakan text align: center;
Elemen Floating
Properti CSS untuk float Properti float Penjelasan Memposisikan elemen di sisi tertentu. Nilainya: left, right, none (default.) Elemen yang diset float akan dihilangkan dari alur dokumen normal Teks di sekitar elemen float akan menyesuaikan diri posisinya.
Contoh float HTML <img src="images/baturraden.png" alt="baturraden" class="imageheader" /> Baturraden adalah sebuah lokawisata yang terletak di lereng Gunung Slamet. CSS img.imageheader { float: left; }
float vs. alignment
Elemen yang diset float seharusnya mempunyai nilai properti width.
Contoh clear p { background color: fuchsia; } h2 { clear: right; background color: yellow; } Properti clear digunakan agar elemen float tidak menutupi elemen yang diset clear. Nilai: left, right, none.
div#sidebar { float: right; } p { clear: right; }
Terkadang elemen isi terlalu sedikit sehingga ketika digabungkan dengan elemen float, hasilnya tidak sesuai dengan keinginan.
HTML <p><img src="images/baturraden.png" alt="baturraden" />Baturraden adalah sebuah lokawisata yang terletak di lereng Gunung Slamet</p> CSS p { border: 2px dashed black; } img { float: right; }
Dibutuhkan properti overflow.
HTML <p><img src="images/baturraden.png" alt="baturraden" />Baturraden adalah sebuah lokawisata yang terletak di lereng Gunung Slamet</p> CSS p { border: 2px dashed black; overflow: hidden} img { float: right; } Properti overflow menentukan apa yang akan dilakukan jika isi elemen terlalu besar. Nilai: auto, visible, hidden, atau scroll.
Tata Letak dengan Kolom Banyak
HTML <div> <p>paragraf pertama</p> <p>paragraf kedua</p> <p>paragraf ketiga</p> Teks lain yang bermanfaat. </div> CSS p { float: right; width: 20%; margin: 0.5em; border: 2px solid black; } div { border: 3px dotted green; overflow: hidden; }
Ukuran dan Posisi
Properti position div#ad { position: fixed; right: 10%; top: 45%; } Properti Nilai Penjelasan position static Posisi default relative absolute fixed Posisi relatif terhadap posisi normal Posisi tetap terhadap elemen isi Posisi tetap terhadap jendela peramban top, right, bottom, left Posisi pojok kotak
Posisi absolute #menubar { position: absolute; left: 400px; top: 50px; } Dihilangkan dari alur dokumen, seperti float. Posisi relatif terhadap elemen blok yang melingkupinya, dengan asumsi elemen blok tersebut menggunakan posisi absolute atau relative pula. Posisi sebenarnya ditentukan dengan top, bottom, left, right. Sertakan pula nilai properti width.
Posisi relative #area2 { position: relative; } Elemen absolute diposisikan normal terhadap offset pojok pada semua halaman web. Untuk menghindari elemen absolute memposisikan dirinya sendiri relatif terhadap pojok elemen, masukkan elemen absolute di dalam elemen yang mempunyai properti relative.
Posisi fixed Dihilangkan dari alur dokumen normal. Posisi relatif terhadap jendela peramban, bahkan ketika pengguna menggulung jendela, elemen akan berada pada posisi semula.
alignment vs. float vs. position
alignment Jika memungkinkan, letakkan elemen dengan mensejajarkan isinya. Horisontal: text align, pada elemen blok, mensejajarkan isi saja. Vertikal: vertical align, pada elemen inline, mensejajarkan secara vertikal dalam isi elemen.
Jika pensejajaran tak berhasil, float elemen.
Jika float tak berhasil, gunakan position. (tidak perlu banyak menggunakan position absolute/fixed)
Properti vertical-align Properti vertical-align Penjelasan Menentukan di mana elemen inline disejajarkan secara vertikal dengan melihat isi lain pada baris yang sama di dalam kotak elemen boksnya. Nilai: top, middle, bottom, baseline (default), sub, super, text top, text bottom, atau nilai panjang atau % Baseline berarti sejajar dengan bagian bawah huruf yang tidak menggantung.
<p style="background color: red; padding: 0px; margin: 0px"> <img src="images/smiley.png" alt="smile" /> </p>
Kotak Inline Lebih Rinci Properti ukuran (width, height, min width, dst.) diabaikan untuk kotak inline. Properti margin top dan margin bottom diabaikan, tetapi tidak untuk margin left dan margin right. Properti text align mengendalikan posisi horisontal kotak inline di dalamnya, tetapi tidak untuk kotak (elemen) blok di dalam halaman web. Setiap properti vertical align mensejajarkan secara vertikal dalam kotak bloknya.
Properti display h2 { display: inline; background color: yellow; } Nilai: none, inline, block, run in, compact,... Gunakan secara bijak karena dapat mengubah tata letak halaman. Properti display Penjelasan Set tipe model boks CSS yang ingin ditampilkan untuk sebuah elemen
HTML <ul id="topmenu"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> CSS #topmenu li { display: inline; border: 2px solid gray; margin right: 1em; }
Properti visibility p.secret { visibility: hidden; } Elemen yang disembunyikan akan tetap mengambil ruang pada layar. Dapat digunakan untuk menampilkan atau tidak isi HTML secara dinamis yang berhubungan dengan respon sebuah permintaan. Properti visibility Penjelasan Set apakah sebuah elemen akan ditampilkan ke layar. Nilai: visible, hidden, none
Daftar Bacaan Stepp, M., Miller, J. 2010. Page Sections and the CSS Box Model, presentasi Web Programming Step by Step Stepp, M., Miller, J. 2010, Floating Layouts, presentasi Web Programming Step by Step Stepp, M., Miller, J. 2010, Positioning, presentasi Web Programming Step by Step