Presentation is loading. Please wait.

Presentation is loading. Please wait.

PPA – course 5 Materi: Cascading Style Sheet. What is CSS? sebuah standar yang digunakan untuk mendefinisikan tampilan secara seragam dan akurat. Contoh:

Similar presentations


Presentation on theme: "PPA – course 5 Materi: Cascading Style Sheet. What is CSS? sebuah standar yang digunakan untuk mendefinisikan tampilan secara seragam dan akurat. Contoh:"— Presentation transcript:

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


Download ppt "PPA – course 5 Materi: Cascading Style Sheet. What is CSS? sebuah standar yang digunakan untuk mendefinisikan tampilan secara seragam dan akurat. Contoh:"

Similar presentations


Ads by Google