Web and Multimedia based Programming K2133 Pemrograman berbasis Web dan Multimedia 1

CASCADING STYLE SHEET 2

Pendahuluan Spesifikasi CSS1 dibuat tahun 1996 CSS2 di- release tahun 1998 CSS3 dalam pengembangan CSS menyediakan sarana untuk mengatur ( control ) dan mengubah ( change ) tampilan ( presentation ) dari dokumen HTML CSS secara teknis bukan HTML, tapi bisa dimasukkan ( embedded ) ke dalam dokumen HTML Style sheet memungkinkan untuk ‘memaksakan’ ( impose ) gaya standar ( standard style ) untuk dokumen secara menyeluruh, atau bahkan beberapa sekaligus Style ditetapkan pada suatu tag dengan nilai property -nya 3

Contoh penggunaan - before 4 <font face="arial" size="2" color="red"> Ini baris pertama <font face="arial" size="2" color="red"> Ini baris kedua <font face="arial" size="2" color="red"> Ini baris ketiga Murni HTML

Contoh penggunaan - after 5 Ini baris pertama Ini baris kedua Ini baris ketiga HTML + CSS

Kemampuan CSS Dapat mendefinisikan tampilan di satu tempat saja daripada secara berulang- ulang Kemudahan mengubah tampilan setelah halaman selesai dibuat Dapat mendefinisikan tampilan seperti ukuran huruf, layout, dan atribut serupa, dengan akurasi setingkat word processor Dapat mendefinisikan layer yang diletakkan di atas elemen lain 6

Tingkatan style sheets Ada tiga tingkatan style sheets  Inline – ditetapkan pada tag secara khusus dan hanya berlaku untuk tag itu – ini adalah gaya yang lebih rinci ( fine grain style ), yang bertentangan dengan tujuan dari style sheets, yaitu gaya yang seragam  Document-level – berlaku untuk dokumen secara menyeluruh  External – bisa diberlakukan pada beberapa dokumen Kalau ada lebih dari satu tingkatan – tingkatan yang lebih rendah yang didahulukan 7

Tingkatan style sheets (lanjutan) Tempat deklarasi  Inline style sheets muncul di dalam tag  Document-level style sheets muncul di bagian head dari dokumen  External style sheets ada di dalam file terpisah, bisa ada di mana saja di internet Dalam bentuk file teks dengan tipe MIME text/css 8

Me link external stylesheet Desain filosopinya mudah – kita ingin memisahkan antara isi ( content ) dan gaya ( style ) Aturan file  Harus memiliki ekstensi.css  File teks berisi aturan style dan comment Cara me link  Tuliskan sebuah link di bagian head <link rel="stylesheet" type="text/css" href="./style.css" media="all" /> Bisa divalidasi 9

Format spesifikasi style Inline  Ditulis pada tag dalam nilai dari attribut style  Contoh style="property1: value1; property2: value2; …" Document-level  Ditulis di dalam tag dengan attribut style diisi nilai "text/css" dan menggunakan HTML comment  Contoh 10

Format spesifikasi style (lanjutan) External stylesheet  Berisi daftar aturan yang ditulis di dalam tag seperti halnya document-level hanya tanpa atribut type  url("./style.css"); h1 {color: gray;} Di dalam bisa diperintahkan untuk mengimpor external stylesheet (contoh lihat atas) Bentuk aturan: selector {list of property/values} 11

Mengapa disebut cascading ? “ One can include (import) several style sheets within an xhtml document. The rules are combined. Conflicting rules are resolved. Combining and resolving conflicting rules is the process that is called cascading. The conditions by each conflicting rules are resolved are not in themselves very complicated but are beyond the scope of our discussion. ” 12

Aturan-aturan dalam CSS Struktur dokumen  Dokumen HTML memiliki struktur dokumen berbentuk tree/hierarchical  CSS memungkinkan untuk menentukan style terhadap struktur tersebut secara bersamaan Nilai dan satuan  Warna bisa ditulis dengan nama atau nilai rgb  Panjang bisa menggunakan satuan in, cm, mm, pt, pc ( absolute ) atau em, ex, px ( relative ) 13

Aturan-aturan dalam CSS Font  Ada lima generic font families : serif, sans-serif, monospace, cursive, fantasy – akhiri dengan generic  Contoh: h1 { font-family: Times, 'Times New Roman', Georgia, serif; } Basic visual formatting  Element box  Colors  Background images  Positioning 14

Jenis-jenis selector Simple – nama tag dalam dokumen HTML Class selector – untuk menetapkan style yang berbeda pada tag yang sama  Contoh style : p.narrow { … }  Contoh penggunaan: … Generic selector – untuk menetapkan style yang sama pada tag yang berbeda  Contoh style :.really-big { … }  Contoh penggunaan: … … 15

Jenis-jenis selector (lanjutan) Id selector – untuk menetapkan style pada suatu elemen dalam dokumen  Contoh style: #section14 { … }  Contoh penggunaan: … Pseudo classes – style untuk behavior  Contoh: hover, focus, dll. 16

dan Contoh Now is the best time ever! Penggunaan  Untuk membuat suatu sesi atau divisi dalam dokumen HTML di mana style akan ditetapkan  berbentuk kotak, di mana posisinya bisa relatif atau absolut 17

Konflik dalam resolusi style Menurut tingkatan style  Inline-style didahulukan daripada document-level  Document-level didahulukan daripada external-level Dalam satu tingkatan style Style sheets bisa mempunyai sumber berbeda  Pembuat dokumen bisa menentukan style  Pengguna, via setting browser, bisa menentukan style 18