Download presentation
Presentation is loading. Please wait.
1
PPA – course 5 Materi: Cascading Style Sheet
2
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
3
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)
4
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} -->
5
Classes <!--.directorname { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12pt; color: #FF0000} --> Pada tag dimana classes dipanggil: Georges Melies Tipe CSS (2)
6
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)
7
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)
8
Style Sheet Hierarchy Inline Style overrides both Embedded and Linked Styles Embedded Style overrides a Linked Style.
9
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
10
Pilihan define in: New Style Sheet file = Linking Style This Document only = Embedded style Creating Style Sheet in Dreamweaver
11
Untuk merubah bagaimana sebuah link ditampilkan : Creating Style Sheet in Dreamweaver
12
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
13
Menambahkan Linking Style Cara menambah Linking style (file css) ke web site
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.