Pemrograman berbasis Web dan Multimedia

Web and Multimedia based Programming

K2133

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

Murni HTML
<table>
<tr><td bgcolor="#FFCC00" align="left"><font face="arial"
size="2" color="red"><b>Ini baris pertama</b></font>
</td></tr>

<tr><td bgcolor="#FFCC00" align="left"><font face="arial"

size="2" color="red"><b>Ini baris kedua</b></font>
</td></tr>

<tr><td bgcolor="#FFCC00" align="left"><font face="arial"

size="2" color="red"><b>Ini baris ketiga</b></font>
</td></tr>
</table>

4
 Contoh penggunaan - after

HTML + CSS
<table>
<tr><td class="subtext">Ini baris pertama</td></tr>

<tr><td class="subtext">Ini baris kedua</td></tr>

<tr><td class="subtext">Ini baris ketiga</td></tr>

</table>

5
 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
 Melink 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 melink
 Tuliskan sebuah link di bagian head
<link rel="stylesheet" type="text/css"
href="./[Link]" media="all" />
Bisa divalidasi
[Link]

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 <style> dengan attribut style diisi nilai "text/css" dan
menggunakan HTML comment
 Contoh
<style type="text/css">
<!—-
rule list
-->
</style>

10
 Format spesifikasi style (lanjutan)

External stylesheet
 Berisi daftar aturan yang ditulis di dalam tag <style> seperti halnya document-level hanya
tanpa atribut type
 Contoh
<style type = "text/css" >
@import url("./[Link]");
h1 {color: gray;}
</style>
Di dalam <style> 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: [Link] { … }
 Contoh penggunaan: <p class="narrow">…</p>
Generic selector – untuk menetapkan style yang sama pada tag yang berbeda
 Contoh style: .really-big { … }
 Contoh penggunaan:
<h1 class="really-big">…</h1>
<p class="really-big">…</p>

15
 Jenis-jenis selector (lanjutan)

Id selector – untuk menetapkan style pada suatu elemen dalam dokumen

 Contoh style: #section14 { … }
 Contoh penggunaan: <h2 id="section14">…</h2>
Pseudo classes – style untuk behavior
 Contoh: hover, focus, dll.

16
 <span> dan <div>

Contoh <span>
<p>
Now is the <span class="bigred"> best time </span>
ever!</p>
Penggunaan <div>
 Untuk membuat suatu sesi atau divisi dalam dokumen HTML di mana style akan
ditetapkan
 <div> 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