Dasar CSS A’ud Solehuddin::Februari2012
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
Mengenal CSS CSS: Cascading Style Sheet CSS: Cascading Style Sheet Digunakan untuk menciptakan suatu kumpulan style Digunakan untuk menciptakan suatu kumpulan style
Mencoba CSS <HTML><HEAD> CSS Pertama CSS Pertama <!-- H1 { font-size: 14pt; H1 { font-size: 14pt; font-style: italic; font-style: italic; color: green; } color: green; }--></STYLE></HEAD><BODY> CSS Pertamaku CSS Pertamaku Selamat mencoba CSS! </BODY></HTML>
Contoh: Mengatur Font dan Warna Font pada Tabel <!-- TH { font-weight : bold; TH { font-weight : bold; background-color: blue; background-color: blue; color : white; color : white; } TR { background-color: silver; TR { background-color: silver; color: blue; } color: blue; }--></STYLE>
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 </H2> Kalau ada kata yang salah Kalau ada kata yang salah Jangan disimpan dalam hati </H3>
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 </P>
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!
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!
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; }
Penggunaan Teks dalam CITE Teks dalam CITE Teks pada P dengan kelas biru <CITE> Teks dalam CITE yang berada dalam P dengan CLASS = "biru". Warnanya menjadi biru. </CITE></P>
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 </P>
Atribut STYLE <BODY STYLE = "font-size: 16pt; color: blue;" > color: blue;" > Warna ini biru dan berukuran agak besar Warna ini biru dan berukuran agak besar <BR> Contoh STYLE pada TABLE <TABLE STYLE = "font-size = 12pt; background-color: silver; background-color: silver; color: green;" color: green;" BORDER = "1"> BORDER = "1"><TR><TH>Kata</TH><TH>Arti</TH></TR><TR><TH>Blue</TH><TH>Biru</TH></TR><TR><TH>Red</TH><TH>Merah</TH></TR></TABLE></BODY>
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
dengan Atribut STYLE dengan Atribut STYLE Teks dalam paragraf ini berwarna biru <SPAN STYLE = "font-weight: bold; background-color:silver;"> background-color:silver;"> Tulisan ini dalam keadaan tebal dan diberi latar belakang dan diberi latar belakang</SPAN> Teks ini kembali ke keadaan semula </P>
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 </SPAN> Kembali miring saja </P>
dengan Atribut ID dengan Atribut ID.miring { font-style: italic; } #besar { font-size: 39pt; } Penggunaan: Teks normal Teks normal Teks ini besar dan miring </SPAN> Teks normal </P>
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
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; }
Penggunaan <HTML><HEAD> Contoh Style Eksternal Contoh Style Eksternal <LINK REL = "STYLESHEET" TYPE = "text/css" TYPE = "text/css" HREF = "styleku.css"> HREF = "styleku.css"></HEAD><BODY> Tes, tes, Besar lho dan miring </P></BODY></HTML>
Berkas: style2.css /* Berkas: style2.css Berisi contoh definisi style Berisi contoh definisi style */.tebal { font-weight: bold; }
Penggunaan <HTML><HEAD> <LINK REL = "STYLESHEET" TYPE = "text/css" HREF = "styleku.css"> HREF = "styleku.css"> <LINK REL = "STYLESHEET" TYPE = "text/css" HREF = "style2.css"> HREF = "style2.css"></HEAD><BODY> Tes, tes, Besar lho dan miring serta ini tebal </SPAN></P></BODY></HTML>