Cascading Style Sheet
Pengertian:
Cascading Style Sheet (CSS) Adalah standart pembuatan dan pemakaian style untuk dokumen terstruktur, CSS digunakan untuk mempersingkat penulisan tag HTML seperti font, color, text, dan table menjadi ringkas sehingga tidak terjadi pengulangan tulisan. CSS memungkinkan untuk mendesain (style) tampilan dokumen (Php dan HTML) dengan memisahkan isi dari dokumen HTML dengan kode untuk menampilkannya (CSS).
Didalam dunia desain web, layout atau mengatur letak web, format huruf, dan lainnya yang ada dalam sebuah web menjadi bagian yang amat penting bahkan bisa jadi yang paling lama dibanding dengan bagain desain web lainnya. Karena jika kita membua layout yang salah, maka web kita juga akan salah diterjemahkan oleh browser. Hal itu juga bisa disebabkan karena setiap browser memilliki dukungan bahasa (CSS) yang berbeda dan tentunya default dari browsernya sendiri yang berbeda-beda.
Jika kita memiliki banyak file HTML, kita hanya perlu satu file CSS, sehingga ketika kita mengganti jenis huruf pada file CSS maka semua file HTML yang berhubungan pada file CSS tersebut akan berubah. CSS distandarisasi oleh W3C (World Wide Web Consortium). CSS dapat dipasang pada dokumen HTML yang telah jadi.
Dalam melayout sebuah web ada dua metode yang sering dipakai untuk membuat sebuah layout halaman web yaitu:
1. Metode Table
2. Metode Div
Keuntungan menggunakan CSS :
a.Memisahkan presentation sebuah dokumen dari content document itu sendiri
b.Kode HTML menjadi lebih sederhan dan lebih mudah diatur
c.Mempersingkat pembuatan dan pemeliharaan
d.Ukuran file lebih kecil, sehingga load file bisa lebih cepat
e.Mudah unutk merubah tampilan, hanya dengan merubah file CSS saja
f.Dapat berkolaborasi dengan Java Script
g.Mempercepat proses rendering / pembacaan HTML
h.CSS memiliki support ke semua WEB BROWSER
Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu:
1.External Style Sheet (file CSS berbeda dari file HTML),
2.Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML)
3.Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan).
Namun lebih baik menggunakan cara External Style Sheet karena lebih mudah dalam mengelolanya
Aturan penulisan :
Nilai untuk property tidak boleh dalam tanda petik.
contoh : color : green;
Nama property bersifat case sensitive.
color : green;
property : color
value : green
Syntaxis CSS dibagi dalam 3 bagian :
selector {property : value}
dimana :
selector : tag HTML yang akan didefinisikan (body, H1, Link , dll).
property : atribut yang akan diubah
Cara penulisan :
FONT-FAMILY : sans-serif;
FONT-SIZE : small;
Cara penulisan yang salah :
FONT-FAMILY : “sans-serif”;
FONT-SIZE : ‘small’;
Cara mendeklarasikan kelompok : (tanda koma serta &)
H1, H2 {color : green};
H3, H4 & H5 {color : red};
Cara menuliskan komentar :
• Menggunakan tanda : /* ….. */
• Menggunakan tanda :
