ppa – course 5
DESCRIPTION
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. - PowerPoint PPT PresentationTRANSCRIPT
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.
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 <BODY><BODY><H1 style=“color:orange; font-family:verdana”> This
is sample inline text </H1></BODY>
Tipe CSS (1)
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>
• 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>
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 <HEAD>
<LINK REL=stylesheet HREF=“mystyles.css” TYPE=“text/css”>
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 StyleThis Document only =
Embedded style
Creating Style Sheet in Dreamweaver
Untuk merubah bagaimana sebuah link ditampilkan :
Creating Style Sheet in Dreamweaver
LatihanFile 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