1 / 13

PPA – course 5

PPA – course 5. Materi: Cascading Style Sheet. 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.

lidia
Download Presentation

PPA – course 5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. PPA – course 5 Materi: Cascading Style Sheet

  2. 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

  3. Tipe CSS (1) • Inline • Merupakan style yang terlemah karena editing harus dilakukan disemua bagian dimana inline berada • Mirip dengan atribut biasa. • Bagian dari <BODY> <BODY> <H1 style=“color:orange; font-family:verdana”> This is sample inline text </H1> </BODY>

  4. Tipe CSS (2) • Embedded • Bagian dari <head> dan mempunyai efek pada 1 halaman saja <STYLE type="text/css"> <!-- p {  font-family: Arial, Helvetica, sans-serif; font-size: 12pt; color: #FF0000} --> </STYLE>

  5. Tipe CSS (2) • Classes <STYLE type="text/css"> <!-- .directorname {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12pt; color: #FF0000} --> </STYLE> Pada tag dimana classes dipanggil: <P CLASS="directorname">Georges Melies</P>

  6. Tipe CSS (3) • 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 <HEAD> <LINK REL=stylesheet HREF=“mystyles.css” TYPE=“text/css”>

  7. 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}

  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. Creating Style Sheet in Dreamweaver • Pilihan define in: • New Style Sheet file = • Linking Style • This Document only = • Embedded style

  11. Creating Style Sheet in Dreamweaver Untuk merubah bagaimana sebuah link ditampilkan :

  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

More Related