Cascading Style Sheet

CSS

Pemrograman Web 1 Genap 2011 - 2012

Candra Utama
Digitally signed by Candra Utama DN: cn=Candra Utama, o, ou, email=kuliah@candrautama.com, c=ID Date: 2012.04.13 14:56:28 +07'00'

CSS Lanjut

CSS Dimension
Berfungsi untuk mengatur panjang dan lebar dari sebuah elemen HTML. contoh: height:100px; width:200px; Nilai/ value:
Nilai / Value auto ukuran % Penjelasan Browser yang menentukan ukuran (default) Bisa menggunakan px, cm, pc, dll Mendefinisikan ukuran dengen persentase-nya
Tim Dosen Pemrograman Web 1 2009-2010. Teknik Informatika UNPAS

CSS Box Model

Sebuah elemen HTML dapat kita anggap sebagai sebuah box/ kotak. Digunakan pada saat kita akan merancang tampilan sebuah website. Pada dasarnya berfungsi sebagai tempat yang membungkus isi dari elemenelemen HTML. Tag yang biasanya digunakan untuk merancang tampilan adalah <div>, walaupun tag lain juga bisa menerapkan box model. Terdiri atas 4 bagian: Margin, Border, Padding, Content.

Tim Dosen Pemrograman Web 1 2009-2010. Teknik Informatika UNPAS

CSS Box Model

Tim Dosen Pemrograman Web 1 2009-2010. Teknik Informatika UNPAS

CSS Box Model

Margin: area disekeliling border, tidak terpengaruh oleh warna dari box. Border: garis yang membatasi padding & content, terpengaruh oleh warna box. Padding: area disekeliling content, terpengaruh oleh warna box. Content: area tempat menyimpan text dan image.

Tim Dosen Pemrograman Web 1 2009-2010. Teknik Informatika UNPAS

CSS Margin
margin:25px 50px 75px 100px; margin atas = 25px margin kanan = 50px margin bawah = 75px margin kiri = 100px margin:25px 50px 75px; margin atas = 25px margin kiri dan kanan = 50px margin bawah = 75px margin:25px 50px; margin atas dan bawah = 25px margin kiri dan kanan = 50px margin:25px; keempat margin = 25px
Tim Dosen Pemrograman Web 1 2009-2010. Teknik Informatika UNPAS

CSS Margin
margin:auto;
ukuran margin otomatis diatur oleh browser.

margin juga bisa diisi negatif, berfungsi untuk menggeser elemen ke arah yang berlawanan.
margin:10px 0px 5px -10px;

Tim Dosen Pemrograman Web 1 2009-2010. Teknik Informatika UNPAS

CSS Margin : Contoh

Contoh Margin
HTML

CSS

Tim Dosen Pemrograman Web 1 2009-2010. Teknik Informatika UNPAS

CSS Margin : Contoh

Contoh Margin
HTML

CSS

Tim Dosen Pemrograman Web 1 2009-2010. Teknik Informatika UNPAS

CSS Margin : Contoh

Contoh Margin
HTML

CSS

Tim Dosen Pemrograman Web 1 2009-2010. Teknik Informatika UNPAS

CSS Padding
padding:25px 50px 75px 100px;
padding atas = 25px padding kanan = 50px padding bawah = 75px padding kiri = 100px

padding:25px 50px 75px;

padding atas = 25px padding kiri dan kanan = 50px padding bawah = 75px

padding:25px 50px;
padding atas dan bawah = 25px padding kiri dan kanan = 50px

padding:25px;
keempat padding = 25px
Tim Dosen Pemrograman Web 1 2009-2010. Teknik Informatika UNPAS

CSS Padding
padding:auto;
ukuran padding otomatis diatur oleh browser.

Padding tidak bisa diisi negatif.

Tim Dosen Pemrograman Web 1 2009-2010. Teknik Informatika UNPAS

CSS Padding : Contoh

Contoh Padding
HTML

CSS

Tim Dosen Pemrograman Web 1 2009-2010. Teknik Informatika UNPAS

CSS Padding : Contoh

Contoh Padding
HTML

CSS

Tim Dosen Pemrograman Web 1 2009-2010. Teknik Informatika UNPAS

CSS Border
Memiliki 3 buah property utama: - border-style : untuk menentukan jenis border. - border-width : untuk menentukan tebal border. - border-color : untuk menentukan warna border. Penulisannya dapat disingkat menjadi: border:<style> <width> <color>; contoh border:solid 2px green;
Tim Dosen Pemrograman Web 1 2009-2010. Teknik Informatika UNPAS

CSS Border Style

border:solid 2px green; border:dotted 2px green; border:dashed 2px green; border:double 7px green;

border:groove 7px green;

border:ridge 7px green;

Tim Dosen Pemrograman Web 1 2009-2010. Teknik Informatika UNPAS

CSS Float
Berfungsi untuk memaksa sebuah elemen menjadi berada di kiri atau dikanan halaman. Elemen yang berada setelah elemen yang diberi float akan terpengaruh fungsi float tersebut. Elemen yang berada sebelum elemen yang diberi float tidak akan terpengaruh. Property: float:left; float:right; Untuk me-nonaktifkan fungsi float gunakan: clear:both; Biasanya digunakan untuk membuat gallery.

Tim Dosen Pemrograman Web 1 2009-2010. Teknik Informatika UNPAS

CSS Pseudo-Class
Berfungsi untuk memberikan efek yang berbeda pada sebuah selector. Biasanya digunakan untuk link / anchor. Property: <selector>:link{color:red;} <selector>:visited{color:blue;} <selector>:hover{color:green;} <selector>:active{color:orange;} contoh: a:hover { color:red; text-decoration:underline; }
Tim Dosen Pemrograman Web 1 2009-2010. Teknik Informatika UNPAS

 Salhazan Nasution, SKom., Pemrograman Web. Teknik Informatika Universitas Islam Indonesia. www.w3school.com

Tim Dosen Pemrograman Web 1 2009-2010. Teknik Informatika UNPAS

Terima Kasih
Pertemuan berikutnya membahas CSS Lanjut.