CSS

Definisi

Keuntungan

Format Syntax Standar

Aturan Penulisan

Cara menggabungkan dengan File HTML

Selector

Definisi CSS

CSS merupakan singkatan dari Cascading Style Sheet

CSS Adalah salah satu bahasa desain web (style sheet language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan penanda (markup language).

CSS dibuat untuk memisahkan konten utama dengan tampilan dokumen yang meliputi layout, ukuran, warna dan font.

Keuntungan CSS

Memisahkan presentasi sebuah dokumen dari content document itu sendiri

Kode HTML menjadi lebih sederhana dan lebih mudah diatur

Ukuran file HTML menjadi lebih kecil, sehingga load/pembacaan menjadi lebih cepat

Mudah untuk merubah tampilan web, hanya dengan merubah file CSS saja

Satu file CSS dapat digunakan oleh lebih dari 1 halaman web, sehingga meringankan pekerjaan mengatur tampilan

Dapat berkolaborasi dengan JavaScript dan merupakan pasangan setia XHTML

Digunakan dalam hampir semua web browser

Format Syntax Standar

selector { declaration block }dimana :declaration block = property : value

atauselector { property : value }

Selector : bagian html yang akan diatur

Property : apa yang akan diatur

Value : bagaimana pengaturannyacontoh :h1 { color : red }

Aturan Penulisan CSS

Untuk membuat komentar diawali dengan /* dan diakhir dengan *//* ini komentar, tidak akan ditampilkan */

Jika menggunakan lebih dari 1 selector gunakan koma (,) untuk memisahkannyah1, p, a { color : red }

Jika menggunakan lebih dari 1 property gunakan titik koma untuk memisahkannya (;)h1 { color : red; font-size : 100px; font-weight : bold }

Jika menggunakan property lebih dari 1, tuliskan dalam bentuk baris dan gunakan indenth1, h2, h3 {color : red;font-size : 100px;

}

Cara Penggabungan dengan HTML

Inlinemenggunakan atribut style, tidak menggunakan selector

Internal / Embeddedmenggunakan tag style, biasanya diletakan pada tag

h1 { color : red }

Cara Penggabungan dengan HTML (cont)

External / Linkedstyle disimpan pada file dengan akhiran .css, dan dipanggil dengan tag [file style.css]h1{ color : red }[file html]

Import@import style.cssatau@import url(style.css)

Selector CSS

Selector hanya digunakan untuk jenis pemanggilan CSS dengan cara : embedded/internal dan linked/external

Tag/Elemen HTMLlangsung menggunakan tag/elemen html sebagai selectortag_selector { property : value }

body { color : red }p { color : yellow }

Selector CSS (cont.)

ID- menggunakan prefix / diawali dengan # pada css dan atribut id pada html- biasanya digunakan untuk memformat bagian yang hanya muncul 1 kali dalam satu halaman web- atribut id hanya dapat diisi oleh 1 nilai/nama#id_selector { property : value }

Selector CSS (cont.)

CLASS- menggunakan prefix / diawali dengan . pada css dan atribut class pada html- biasanya digunakan untuk memformat bagian yang hanya muncul lebih dari 1 kali dalam satu halaman web- atribut class dapat diisi lebih dari 1 nilai / nama.class_selector { property : value }

DIV dan SPAN

Merupakan tag HTML yang khusus digunakan untuk membuat seleksi pada bagian halaman web yang nantinya akan ditambahkan style.DIV (division)- merupakan elemen HTML dengan jenis block-tag, sehingga secara default akan menambahkan pergantian baris baik sesudah maupun sebelumnya, seperti tag p, table, ul dan heading- biasanya digunakan bersama CSS untuk membuat layout halaman web, sebagai pengganti pembuatan layout menggunakan tag tablepenulisan : element or text

DIV dan SPAN (cont.)

SPAN- merupakan elemen HTML dengan jenis inline-tag, sehingga secara default tidak akan menambahkan pergantian baris baik sesudah maupun sebelumnya, seperti tag b, i dan a- biasanya digunakan bersama CSS untuk mengatur tampilan dari konten teks- Secara default, properti ukuran tidak dapat diterapkan (width,height)penulisan : text