PPA – course 5 Materi: Cascading Style Sheet
What is CSS? sebuah standar yang digunakan untuk mendefinisikan tampilan secara seragam dan akurat. Contoh: Perubahan warna pada judul menjadi hijau dan text menjadi biru. Dengan metode biasa: ubah atribut warna masing- masing element / tag html satu persatu Dengan CSS : dilakukan dengan satu langkah
Inline –Merupakan style yang terlemah karena editing harus dilakukan disemua bagian dimana inline berada –Mirip dengan atribut biasa. –Bagian dari This is sample inline text Tipe CSS (1)
Tipe CSS (2) Embedded –Bagian dari dan mempunyai efek pada 1 halaman saja <!-- p { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; color: #FF0000} -->
Classes <!--.directorname { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12pt; color: #FF0000} --> Pada tag dimana classes dipanggil: Georges Melies Tipe CSS (2)
External / Linked Style –Style yang banyak dipakai –Disimpan di file lain sehingga dengan 1 file CSS dapat dipakai di banyak file HTML lainnya –File hanya berisi style bukan tag html –Cara link css dari file html di bagian Tipe CSS (3)
Sedangkan file mystyles.css berisi sekumpulan selector Contoh:.bodytext { font-family: Verdana, Arial, Helvetica, sans- serif; font-size: 18pt; font-style: italic; color: #0000CC; text-indent: 20px} Tipe CSS (3)
Style Sheet Hierarchy Inline Style overrides both Embedded and Linked Styles Embedded Style overrides a Linked Style.
Creating Style Sheet in Dreamweaver Cara Pertama: Menu Window > CSS Styles Click tombol New Style di bagian bawah Cara Kedua: Menu Text > CSS Styles > New Style
Pilihan define in: New Style Sheet file = Linking Style This Document only = Embedded style Creating Style Sheet in Dreamweaver
Untuk merubah bagaimana sebuah link ditampilkan : Creating Style Sheet in Dreamweaver
Latihan File latihan minggu lalu (tentang ojai) diberi tambahan CSS Langkah - langkah: Open file html tersebut Buatlah sebuah class yang bernama.test Yang disimpan di local root folder dengan nama styles.css Set Category : Type sebagai berikut: font :"Arial, Helvetica, san-serif“ size : "14 points“ color: "red" atau "#FF0000“ Untuk melihat CSS panel Window > CSS Styles
Menambahkan Linking Style Cara menambah Linking style (file css) ke web site