Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

Dasar CSS A’ud Solehuddin::Februari2012. Materi Mengenal CSS Mengenal CSS Mencoba CSS Mencoba CSS Penggunaan atribut ID dalam tag Penggunaan atribut ID.

Presentasi serupa


Presentasi berjudul: "Dasar CSS A’ud Solehuddin::Februari2012. Materi Mengenal CSS Mengenal CSS Mencoba CSS Mencoba CSS Penggunaan atribut ID dalam tag Penggunaan atribut ID."— Transcript presentasi:

1 Dasar CSS A’ud Solehuddin::Februari2012

2 Materi Mengenal CSS Mengenal CSS Mencoba CSS Mencoba CSS Penggunaan atribut ID dalam tag Penggunaan atribut ID dalam tag Penggunaan kelas Penggunaan kelas Pendefinisian tag dengan kelas Pendefinisian tag dengan kelas Komentar dalam style sheet Komentar dalam style sheet Pendefinisian kelas atau ID terhadap tag Pendefinisian kelas atau ID terhadap tag Atribut STYLE Atribut STYLE Tag Tag Style sheet eksternal Style sheet eksternal

3 Mengenal CSS CSS: Cascading Style Sheet CSS: Cascading Style Sheet Digunakan untuk menciptakan suatu kumpulan style Digunakan untuk menciptakan suatu kumpulan style

4 Mencoba CSS CSS Pertama CSS Pertama CSS Pertamaku CSS Pertamaku Selamat mencoba CSS!

5 Contoh: Mengatur Font dan Warna Font pada Tabel

6 Penggunaan Atribut ID dalam Tag #Tebal { font-weight : bold; color : blue; } color : blue; } #Miring { font-style : italic; color: pink; } color: pink; }Penggunaan: Kalau ada jarum yang patah Kalau ada jarum yang patah Jangan disimpan dalam peti Kalau ada kata yang salah Kalau ada kata yang salah Jangan disimpan dalam hati

7 Penggunaan Kelas.kapital { text-transform: uppercase; }.kecil { text-transform: lowercase; }.garis_bawah { text-decoration: underline; } Penggunaan: Tes, Tes, 123 Tes, Tes, 123 Tes, Tes, 123


8 Pendefinisian Tag dengan Kelas H3.merah { color: red; } H3.biru { color: blue; } Penggunaan: Biru? Pasti! Biru? Pasti! Merah? Pasti! Merah? Pasti! Merah? Nggak mungkin! Merah? Nggak mungkin!

9 Komentar dalam Style Sheet /* H3.merah { color: red; } H3.merah { color: red; }*/ H3.biru { color: blue; } Penggunaan: Biru? Pasti! Biru? Pasti! Merah? Pasti! Merah? Pasti! Merah? Nggak mungkin! Merah? Nggak mungkin!

10 Pendefinisian Kelas Terhadap Tag BODY { background-color: white; } CITE { color: red; font-size: 20; font-weight: bold; font-weight: bold; background-color: silver; } background-color: silver; }.biru { color: blue; }.biru CITE { color: blue; text-transform: uppercase; } text-transform: uppercase; }

11 Penggunaan Teks dalam CITE Teks dalam CITE Teks pada P dengan kelas biru Teks dalam CITE yang berada dalam P dengan CLASS = "biru". Warnanya menjadi biru.


12 Pendefinisian ID Terhadap Tag #ungu { color: purple; } #ungu H5 { color: blue; } Penggunaan: Teks H5 berdiri sendiri – Warna bawaan Teks H5 berdiri sendiri – Warna bawaan Warna teks ini ungu Teks dalam H4 - Ungu juga Teks dalam H4 - Ungu juga Teks dalam H5 - Biru Teks dalam H5 - Biru Warna ini tentu saja ungu


13 Atribut STYLE color: blue;" > Warna ini biru dan berukuran agak besar Warna ini biru dan berukuran agak besar
Contoh STYLE pada TABLE

BORDER = "1">
KataArti
BlueBiru
RedMerah

14 Tag Tag Digunakan untuk memperluas kemampuan suatu style Digunakan untuk memperluas kemampuan suatu style Penerapannya dapat digunakan bersama-sama atribut STYLE, CLASS, dan ID Penerapannya dapat digunakan bersama-sama atribut STYLE, CLASS, dan ID

15 dengan Atribut STYLE dengan Atribut STYLE Teks dalam paragraf ini berwarna biru background-color:silver;"> Tulisan ini dalam keadaan tebal dan diberi latar belakang dan diberi latar belakang Teks ini kembali ke keadaan semula


16 dengan Atribut CLASS dengan Atribut CLASS.miring { font-style: italic; }.garis_bawah { text-decoration: underline; } Penggunaan: Keadaan asli Keadaan asli Miring, lho. Miring, lho. dan ini digarisbawahi Kembali miring saja


17 dengan Atribut ID dengan Atribut ID.miring { font-style: italic; } #besar { font-size: 39pt; } Penggunaan: Teks normal Teks normal Teks ini besar dan miring Teks normal


18 Style Sheet Eksternal Pendefinisian style dapat dilakukan pada berkas sendiri Pendefinisian style dapat dilakukan pada berkas sendiri Memungkinkan definisi style dapat digunakan di beberapa berkas HTML Memungkinkan definisi style dapat digunakan di beberapa berkas HTML Untuk mengakses style eksternal, dapat menggunakan tag Untuk mengakses style eksternal, dapat menggunakan tag

19 Berkas: styleku.css /* Berkas: styleku.css Berisi contoh definisi style Berisi contoh definisi style */ BODY { background-color: blue; color: white; } color: white; }.miring { font-style: italic; } #besar { font-size: 39pt; }

20 Penggunaan Contoh Style Eksternal Contoh Style Eksternal HREF = "styleku.css"> Tes, tes, Besar lho dan miring


21 Berkas: style2.css /* Berkas: style2.css Berisi contoh definisi style Berisi contoh definisi style */.tebal { font-weight: bold; }

22 Penggunaan HREF = "styleku.css"> HREF = "style2.css"> Tes, tes, Besar lho dan miring serta ini tebal



Download ppt "Dasar CSS A’ud Solehuddin::Februari2012. Materi Mengenal CSS Mengenal CSS Mencoba CSS Mencoba CSS Penggunaan atribut ID dalam tag Penggunaan atribut ID."

Presentasi serupa


Iklan oleh Google