1 / 22

Dasar CSS

Dasar CSS. A’ud Solehuddin::Februari2012. Materi. Mengenal CSS Mencoba CSS Penggunaan atribut ID dalam tag Penggunaan kelas Pendefinisian tag dengan kelas Komentar dalam style sheet Pendefinisian kelas atau ID terhadap tag Atribut STYLE Tag <SPAN> Style sheet eksternal. Mengenal CSS.

cheryl
Download Presentation

Dasar CSS

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. Dasar CSS A’ud Solehuddin::Februari2012

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

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

  4. Mencoba CSS <HTML> <HEAD> <TITLE>CSS Pertama</TITLE> <STYLE TYPE = "text/CSS"> <!-- H1 { font-size: 14pt; font-style: italic; color: green; } --> </STYLE> </HEAD> <BODY> <H1>CSS Pertamaku</H1> Selamat mencoba CSS! </BODY> </HTML>

  5. Contoh: Mengatur Font dan Warna Font pada Tabel <STYLE TYPE = "text/CSS"> <!-- TH { font-weight : bold; background-color: blue; color : white; } TR { background-color: silver; color: blue; } --> </STYLE>

  6. Penggunaan Atribut ID dalam Tag #Tebal { font-weight : bold; color : blue; } #Miring { font-style : italic; color: pink; } Penggunaan: <H2 ID = "Miring"> Kalauadajarum yang patah<BR> Jangandisimpandalampeti </H2> <H3 ID = "Tebal"> Kalauadakata yang salah<BR> Jangandisimpandalamhati </H3>

  7. Penggunaan Kelas .kapital { text-transform: uppercase; } .kecil { text-transform: lowercase; } .garis_bawah { text-decoration: underline; } Penggunaan: <H2 CLASS = "kapital">Tes, Tes, 123</H2> <H3 CLASS = "kecil">Tes, Tes, 123</H3> <P CLASS = "garis_bawah"> Tes, Tes, 123 </P>

  8. Pendefinisian Tag dengan Kelas H3.merah { color: red; } H3.biru { color: blue; } Penggunaan: <H3 CLASS = "biru">Biru? Pasti!</H3> <H3 CLASS = "merah">Merah? Pasti!</H3> <H4 CLASS = "merah">Merah? Nggakmungkin!</H4>

  9. Komentar dalam Style Sheet /* H3.merah { color: red; } */ H3.biru { color: blue; } Penggunaan: <H3 CLASS = "biru">Biru? Pasti!</H3> <H3 CLASS = "merah">Merah? Pasti!</H3> <H4 CLASS = "merah">Merah? Nggakmungkin!</H4>

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

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

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

  13. Atribut STYLE <BODY STYLE = "font-size: 16pt; color: blue;" > Warna ini biru dan berukuran agak besar<BR> <BR> Contoh STYLE pada TABLE <TABLE STYLE = "font-size = 12pt; background-color: silver; color: green;" 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>

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

  15. <SPAN> dengan Atribut STYLE <P STYLE = "color: blue; "> Teks dalam paragraf ini berwarna biru <SPAN STYLE = "font-weight: bold; background-color:silver;"> Tulisan ini dalam keadaan tebal dan diberi latar belakang </SPAN> Teks ini kembali ke keadaan semula </P>

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

  17. <SPAN> dengan Atribut ID .miring { font-style: italic; } #besar { font-size: 39pt; } Penggunaan: <P>Teks normal <SPAN CLASS = "miring" ID = "besar"> Teks ini besar dan miring </SPAN> Teks normal </P>

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

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

  20. Penggunaan <HTML> <HEAD> <TITLE>Contoh Style Eksternal</TITLE> <LINK REL = "STYLESHEET" TYPE = "text/css" HREF = "styleku.css"> </HEAD> <BODY> Tes, tes, 123... <P ID = "besar" CLASS = "miring"> Besar lho dan miring </P> </BODY> </HTML>

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

  22. Penggunaan <HTML> <HEAD> <LINK REL = "STYLESHEET" TYPE = "text/css" HREF = "styleku.css"> <LINK REL = "STYLESHEET" TYPE = "text/css" HREF = "style2.css"> </HEAD> <BODY> Tes, tes, 123... <P ID = "besar" CLASS = "miring"> Besar lho dan miring <SPAN CLASS = "tebal"> serta ini tebal </SPAN> </P> </BODY> </HTML>

More Related