CSS
Definisi Keuntungan Format Syntax Standar Aturan Penulisan Cara menggabungkan dengan File HTML Selector
Definisi CSS
CSS meru akan singkatan dari Cascading Style S!eet CSS Adala! sala! satu ba!asa desain "eb #style s!eet language$ yang mengontrol format tam ilan sebua! !alaman "eb yang ditulis dengan menggunakan enanda #marku language$% CSS dibuat untuk memisa!kan konten utama dengan tam ilan dokumen yang meli uti layout& ukuran& "arna dan font%
Keuntungan CSS
Memisahkan presentasi document itu sendiri
sebuah
dokumen
dari
content
Kode HTML menjadi lebih sederhana dan lebih mudah diatur Ukuran file HTML menjadi lebih load/pembacaan menjadi lebih cepat kecil, sehingga
Mudah untuk merubah tampilan web, hanya dengan merubah file C saja atu file C dapat digunakan oleh lebih dari ! halaman web, sehingga meringankan pekerjaan mengatur tampilan "apat berkolaborasi dengan pasangan setia XHTML #a$a cript dan merupakan
"igunakan dalam hampir semua web browser
Format Syntax Standar
selector { declaration block } dimana % declaration block & property % $alue atau selector { property : value }
elector % bagian html yang akan diatur 'roperty % apa yang akan diatur (alue % bagaimana pengaturannya contoh % h! ) color % red *
Aturan Penulisan CSS
Untuk membuat komentar diawali dengan +, dan diakhir dengan ,+ +, ini komentar, tidak akan ditampilkan ,+
#ika menggunakan lebih dari ! selector gunakan koma -,. untuk memisahkannya h!, p, a ) color % red *
#ika menggunakan lebih dari ! property gunakan titik koma untuk memisahkannya -/. h! ) color % red/ font0si1e % !22p3/ font0weight % bold *
#ika menggunakan property lebih dari !, tuliskan dalam bentuk baris dan gunakan indent h!, h4, h5 ) color % red/ font0si1e % !22p3/ *
Cara Penggabungan dengan HTML
6nline menggunakan atribut style, tidak menggunakan selector 7h! style&8color%red897+h!9 6nternal + :mbedded menggunakan tag style, biasanya diletakan pada tag 7head9 7head9 7style type&8te3t+css89 h! ) color % red * 7+style9 7+head9
Cara Penggabungan dengan HTML (cont
:3ternal + Linked style disimpan pada file dengan akhiran ;css, dan dipanggil dengan tag 7link9 <file style;css= h!) color % red * <file html= 7link rel&>stylesheet> href&8style;css8 type&8te3t+css8+9 6mport ?import style;css atau ?import url-@style;css8.
Selector CSS
elector hanya digunakan untuk jenis pemanggilan C dengan cara % embedded/internal dan linked/external Tag+:lemen HTML langsung menggunakan tag+elemen html sebagai selector tagAselector ) property % $alue * body ) color % red * p ) color % yellow *
Selector CSS (cont!
6" 0 menggunakan prefi3 + diawali dengan B pada css dan atribut id pada html 0 biasanya digunakan untuk memformat bagian yang hanya muncul ! kali dalam satu halaman web 0 atribut id hanya dapat diisi oleh ! nilai+nama BidAselector ) property % $alue *
Selector CSS (cont!
CLC 0 menggunakan prefi3 + diawali dengan ; pada css dan atribut class pada html 0 biasanya digunakan untuk memformat bagian yang hanya muncul lebih dari ! kali dalam satu halaman web 0 atribut class dapat diisi lebih dari ! nilai + nama ;classAselector ) property % $alue *
D"# dan SPA$
Merupakan tag HTML yang khusus digunakan untuk membuat seleksi pada bagian halaman web yang nantinya akan ditambahkan style;
"6( -di$ision.
0 merupakan elemen HTML dengan jenis @block-tag8, sehingga secara default akan menambahkan pergantian baris baik sesudah maupun sebelumnya, seperti tag p, table, ul dan heading 0 biasanya digunakan bersama C untuk membuat layout halaman web, sebagai pengganti pembuatan layout menggunakan tag table penulisan % 7di$9 element or te3t 7+di$9
D"# dan SPA$ (cont!
'CD
0 merupakan elemen HTML dengan jenis @inline-tag8, sehingga secara default tidak akan menambahkan pergantian baris baik sesudah maupun sebelumnya, seperti tag b, i dan a 0 biasanya digunakan bersama C dari konten teks untuk mengatur tampilan
0 ecara default, properti ukuran tidak dapat diterapkan -width,height. penulisan % 7span9 te3t 7+span9
