css (cascading style sheet) - devierosaa's blog · microsoft powerpoint - bab 4 - css.ppt...
TRANSCRIPT
![Page 1: CSS (Cascading Style Sheet) - Devierosaa's Blog · Microsoft PowerPoint - bab 4 - CSS.ppt Author: Devie Created Date: 4/6/2010 8:32:43 AM ...Authors: Anna Van RaaphorstAbout: Cascading](https://reader031.vdocument.in/reader031/viewer/2022022009/5aec50c67f8b9ac361904b13/html5/thumbnails/1.jpg)
CSSCSS(Cascading Style Sheet)(Cascading Style Sheet)
OlehOleh ::Devie Rosa Devie Rosa AnamisaAnamisa
![Page 2: CSS (Cascading Style Sheet) - Devierosaa's Blog · Microsoft PowerPoint - bab 4 - CSS.ppt Author: Devie Created Date: 4/6/2010 8:32:43 AM ...Authors: Anna Van RaaphorstAbout: Cascading](https://reader031.vdocument.in/reader031/viewer/2022022009/5aec50c67f8b9ac361904b13/html5/thumbnails/2.jpg)
PembahasanPembahasan
PengertianPengertian CSSCSSCSS (FONT, TEXT, COLOR)CSS (FONT, TEXT, COLOR)CSS CSS -- ImageImage
![Page 3: CSS (Cascading Style Sheet) - Devierosaa's Blog · Microsoft PowerPoint - bab 4 - CSS.ppt Author: Devie Created Date: 4/6/2010 8:32:43 AM ...Authors: Anna Van RaaphorstAbout: Cascading](https://reader031.vdocument.in/reader031/viewer/2022022009/5aec50c67f8b9ac361904b13/html5/thumbnails/3.jpg)
PENGERTIAN CSSPENGERTIAN CSS
SingkatanSingkatan daridari Cascading Style SheetCascading Style SheetDigunakanDigunakan dalamdalam kodekode HTML HTML untukuntukmenciptakanmenciptakan suatusuatu kumpulankumpulan style style menjadimenjadi lebihlebihmenarikmenarik dandan mudahmudah dikeloladikelola..CSS CSS dapatdapat dituliskandituliskan padapada bagianbagian <body><body>, , <head> <head> suatusuatu dokumendokumen HTML HTML atauatau diletakkandiletakkandidi sebuahsebuah file file eksternaleksternal..PerintahPerintah--perintahperintah CSS CSS dibatasidibatasi oleholeh tag tag <style> <style> dandan </style></style>
![Page 4: CSS (Cascading Style Sheet) - Devierosaa's Blog · Microsoft PowerPoint - bab 4 - CSS.ppt Author: Devie Created Date: 4/6/2010 8:32:43 AM ...Authors: Anna Van RaaphorstAbout: Cascading](https://reader031.vdocument.in/reader031/viewer/2022022009/5aec50c67f8b9ac361904b13/html5/thumbnails/4.jpg)
ContohContoh SederhanaSederhana
sasasasa
![Page 5: CSS (Cascading Style Sheet) - Devierosaa's Blog · Microsoft PowerPoint - bab 4 - CSS.ppt Author: Devie Created Date: 4/6/2010 8:32:43 AM ...Authors: Anna Van RaaphorstAbout: Cascading](https://reader031.vdocument.in/reader031/viewer/2022022009/5aec50c67f8b9ac361904b13/html5/thumbnails/5.jpg)
SelectorSelectorAdalahAdalah namanama yang yang diberikandiberikan untukuntuk setiapsetiap style style berbedaberbeda yang yang dibuatdibuat. . DiDi dalamdalam style style didefinisikandidefinisikan bagaimanabagaimana setiapsetiap selector selector akanakanbekerjabekerja ((fontfont, , color color dandan lainlain--lain.). lain.). KemudianKemudian dididalamdalam bagianbagian body body halamanhalaman web, web, selector selector tersebuttersebut dipanggildipanggil untukuntuk mengaktifkanmengaktifkan style style yang yang telahtelah didefinisikandidefinisikan..JenisJenis--jenisjenis SelectorSelector::
Selector Selector HTMLHTMLSelector ClassSelector ClassSelector Selector IDID
![Page 6: CSS (Cascading Style Sheet) - Devierosaa's Blog · Microsoft PowerPoint - bab 4 - CSS.ppt Author: Devie Created Date: 4/6/2010 8:32:43 AM ...Authors: Anna Van RaaphorstAbout: Cascading](https://reader031.vdocument.in/reader031/viewer/2022022009/5aec50c67f8b9ac361904b13/html5/thumbnails/6.jpg)
Selector HTMLSelector HTML
DigunakanDigunakan untukuntuk mendefinisikanmendefinisikan style style yang yang berhubunganberhubungan dengandengan tag HTML, tag HTML, melakukanmelakukan redefinisiredefinisi tag normal HTMLtag normal HTMLSyntax: Syntax: SelectorHTMLSelectorHTML{{
Properti:NilaiProperti:Nilai;;}}
![Page 7: CSS (Cascading Style Sheet) - Devierosaa's Blog · Microsoft PowerPoint - bab 4 - CSS.ppt Author: Devie Created Date: 4/6/2010 8:32:43 AM ...Authors: Anna Van RaaphorstAbout: Cascading](https://reader031.vdocument.in/reader031/viewer/2022022009/5aec50c67f8b9ac361904b13/html5/thumbnails/7.jpg)
ContohContoh Selector HTMLSelector HTML
sasasasa
![Page 8: CSS (Cascading Style Sheet) - Devierosaa's Blog · Microsoft PowerPoint - bab 4 - CSS.ppt Author: Devie Created Date: 4/6/2010 8:32:43 AM ...Authors: Anna Van RaaphorstAbout: Cascading](https://reader031.vdocument.in/reader031/viewer/2022022009/5aec50c67f8b9ac361904b13/html5/thumbnails/8.jpg)
Selector ClassSelector Class
DigunakanDigunakan untukuntuk mendefinisikanmendefinisikan style style yang yang dapatdapat dipakaidipakai tanpatanpa melakukanmelakukanredefinisiredefinisi tag HTML.tag HTML.Syntax: Syntax: ClassSelectorClassSelector {{
Properti:NilaiProperti:Nilai;;}}
![Page 9: CSS (Cascading Style Sheet) - Devierosaa's Blog · Microsoft PowerPoint - bab 4 - CSS.ppt Author: Devie Created Date: 4/6/2010 8:32:43 AM ...Authors: Anna Van RaaphorstAbout: Cascading](https://reader031.vdocument.in/reader031/viewer/2022022009/5aec50c67f8b9ac361904b13/html5/thumbnails/9.jpg)
ContohContoh Selector ClassSelector Class
![Page 10: CSS (Cascading Style Sheet) - Devierosaa's Blog · Microsoft PowerPoint - bab 4 - CSS.ppt Author: Devie Created Date: 4/6/2010 8:32:43 AM ...Authors: Anna Van RaaphorstAbout: Cascading](https://reader031.vdocument.in/reader031/viewer/2022022009/5aec50c67f8b9ac361904b13/html5/thumbnails/10.jpg)
Selector IDSelector ID
DigunakanDigunakan untukuntuk mendefinisikanmendefinisikan style style yang yang berhubunganberhubungan dengandengan suatusuatu object object memanfaatkanmemanfaatkan ID ID unikunik, , biasabiasa digunakandigunakansaatsaat bekerjabekerja dengandengan layerlayerSyntax: Syntax: ##IDSelectorIDSelector {{
Properti:NilaiProperti:Nilai;;}}
![Page 11: CSS (Cascading Style Sheet) - Devierosaa's Blog · Microsoft PowerPoint - bab 4 - CSS.ppt Author: Devie Created Date: 4/6/2010 8:32:43 AM ...Authors: Anna Van RaaphorstAbout: Cascading](https://reader031.vdocument.in/reader031/viewer/2022022009/5aec50c67f8b9ac361904b13/html5/thumbnails/11.jpg)
ContohContoh Selector IDSelector ID
sasasasa
![Page 12: CSS (Cascading Style Sheet) - Devierosaa's Blog · Microsoft PowerPoint - bab 4 - CSS.ppt Author: Devie Created Date: 4/6/2010 8:32:43 AM ...Authors: Anna Van RaaphorstAbout: Cascading](https://reader031.vdocument.in/reader031/viewer/2022022009/5aec50c67f8b9ac361904b13/html5/thumbnails/12.jpg)
KomentarKomentar DalamDalam Style SheetStyle Sheet
DalamDalam pasanganpasangan tag <STYLE> tag <STYLE> dandan</STYLE>, </STYLE>, dapatdapat memberikanmemberikan suatusuatukomentarkomentar yang yang membuatmembuat browser browser tidaktidakmemprosesmemproses bagianbagian dalamdalam komentarkomentartersebuttersebut..Tag :Tag :/* /* dandan */*/
![Page 13: CSS (Cascading Style Sheet) - Devierosaa's Blog · Microsoft PowerPoint - bab 4 - CSS.ppt Author: Devie Created Date: 4/6/2010 8:32:43 AM ...Authors: Anna Van RaaphorstAbout: Cascading](https://reader031.vdocument.in/reader031/viewer/2022022009/5aec50c67f8b9ac361904b13/html5/thumbnails/13.jpg)
ContohContoh KomentarKomentar
sasasasa
![Page 14: CSS (Cascading Style Sheet) - Devierosaa's Blog · Microsoft PowerPoint - bab 4 - CSS.ppt Author: Devie Created Date: 4/6/2010 8:32:43 AM ...Authors: Anna Van RaaphorstAbout: Cascading](https://reader031.vdocument.in/reader031/viewer/2022022009/5aec50c67f8b9ac361904b13/html5/thumbnails/14.jpg)
Style Style dalamdalam file file eksternaleksternal
CSS dapat didefinisikan untuk semuahalaman hanya dengan menulis definisiCSS di dalam sebuah file teks yang selanjutnya dirujuk oleh setiap halamanweb yang akan menggunakannya.Dengan demikian jika suatu saat ingindilakukan perubahan style yang berlakuuntuk semua halaman Web maka yang diubah ada file teks eksternal tersebut.
![Page 15: CSS (Cascading Style Sheet) - Devierosaa's Blog · Microsoft PowerPoint - bab 4 - CSS.ppt Author: Devie Created Date: 4/6/2010 8:32:43 AM ...Authors: Anna Van RaaphorstAbout: Cascading](https://reader031.vdocument.in/reader031/viewer/2022022009/5aec50c67f8b9ac361904b13/html5/thumbnails/15.jpg)
ContohContoh File File EksternalEksternal
File File style.cssstyle.css : File HTML :: File HTML :
![Page 16: CSS (Cascading Style Sheet) - Devierosaa's Blog · Microsoft PowerPoint - bab 4 - CSS.ppt Author: Devie Created Date: 4/6/2010 8:32:43 AM ...Authors: Anna Van RaaphorstAbout: Cascading](https://reader031.vdocument.in/reader031/viewer/2022022009/5aec50c67f8b9ac361904b13/html5/thumbnails/16.jpg)
ElemenElemen--elemenelemen CSSCSS
FontFontTextTextColorColorLinkLink
![Page 17: CSS (Cascading Style Sheet) - Devierosaa's Blog · Microsoft PowerPoint - bab 4 - CSS.ppt Author: Devie Created Date: 4/6/2010 8:32:43 AM ...Authors: Anna Van RaaphorstAbout: Cascading](https://reader031.vdocument.in/reader031/viewer/2022022009/5aec50c67f8b9ac361904b13/html5/thumbnails/17.jpg)
FontFont
DigunakanDigunakan untukuntuk mengaturmengaturtingkahtingkah--lakulaku hurufhuruf ((fontfont). ). ElemenElemen iniini mempunyaimempunyaibeberapabeberapa propertiproperti. . SatuSatupropertiproperti dapatdapat mempunyaimempunyaibeberapabeberapa nilainilai..
![Page 18: CSS (Cascading Style Sheet) - Devierosaa's Blog · Microsoft PowerPoint - bab 4 - CSS.ppt Author: Devie Created Date: 4/6/2010 8:32:43 AM ...Authors: Anna Van RaaphorstAbout: Cascading](https://reader031.vdocument.in/reader031/viewer/2022022009/5aec50c67f8b9ac361904b13/html5/thumbnails/18.jpg)
ContohContoh FontFont
sasasasa
![Page 19: CSS (Cascading Style Sheet) - Devierosaa's Blog · Microsoft PowerPoint - bab 4 - CSS.ppt Author: Devie Created Date: 4/6/2010 8:32:43 AM ...Authors: Anna Van RaaphorstAbout: Cascading](https://reader031.vdocument.in/reader031/viewer/2022022009/5aec50c67f8b9ac361904b13/html5/thumbnails/19.jpg)
TextText
Element text Element text akanakanmembuatmembuat tampilantampilan teksteksmenjadimenjadi lebihlebih menarikmenarik
![Page 20: CSS (Cascading Style Sheet) - Devierosaa's Blog · Microsoft PowerPoint - bab 4 - CSS.ppt Author: Devie Created Date: 4/6/2010 8:32:43 AM ...Authors: Anna Van RaaphorstAbout: Cascading](https://reader031.vdocument.in/reader031/viewer/2022022009/5aec50c67f8b9ac361904b13/html5/thumbnails/20.jpg)
ContohContoh TextText
![Page 21: CSS (Cascading Style Sheet) - Devierosaa's Blog · Microsoft PowerPoint - bab 4 - CSS.ppt Author: Devie Created Date: 4/6/2010 8:32:43 AM ...Authors: Anna Van RaaphorstAbout: Cascading](https://reader031.vdocument.in/reader031/viewer/2022022009/5aec50c67f8b9ac361904b13/html5/thumbnails/21.jpg)
ColorColor
ElemenElemen color yang color yang digunakandigunakan untukuntuk mengaturmengaturwarnawarna teksteks dandan background background halamanhalaman webweb
![Page 22: CSS (Cascading Style Sheet) - Devierosaa's Blog · Microsoft PowerPoint - bab 4 - CSS.ppt Author: Devie Created Date: 4/6/2010 8:32:43 AM ...Authors: Anna Van RaaphorstAbout: Cascading](https://reader031.vdocument.in/reader031/viewer/2022022009/5aec50c67f8b9ac361904b13/html5/thumbnails/22.jpg)
ContohContoh ColorColor
sasasasa
![Page 23: CSS (Cascading Style Sheet) - Devierosaa's Blog · Microsoft PowerPoint - bab 4 - CSS.ppt Author: Devie Created Date: 4/6/2010 8:32:43 AM ...Authors: Anna Van RaaphorstAbout: Cascading](https://reader031.vdocument.in/reader031/viewer/2022022009/5aec50c67f8b9ac361904b13/html5/thumbnails/23.jpg)
PropertiProperti Border StyleBorder Style
PropertiProperti border style border style bergunaberguna untukuntuk mengaturmengaturbingkaibingkai suatusuatu isiisi dalamdalam halamanhalaman web.web.
![Page 24: CSS (Cascading Style Sheet) - Devierosaa's Blog · Microsoft PowerPoint - bab 4 - CSS.ppt Author: Devie Created Date: 4/6/2010 8:32:43 AM ...Authors: Anna Van RaaphorstAbout: Cascading](https://reader031.vdocument.in/reader031/viewer/2022022009/5aec50c67f8b9ac361904b13/html5/thumbnails/24.jpg)
ContohContoh Border StyleBorder Style
sasasasa
![Page 25: CSS (Cascading Style Sheet) - Devierosaa's Blog · Microsoft PowerPoint - bab 4 - CSS.ppt Author: Devie Created Date: 4/6/2010 8:32:43 AM ...Authors: Anna Van RaaphorstAbout: Cascading](https://reader031.vdocument.in/reader031/viewer/2022022009/5aec50c67f8b9ac361904b13/html5/thumbnails/25.jpg)
SPAN SPAN dandan DIVDIV
DuaDua tag yang tag yang seringsering dikombinasikandikombinasikandengandengan selector class selector class adalahadalah <SPAN> <SPAN> dandan <DIV><DIV>Tag Tag <SPAN> <SPAN> adalahadalah ""inlineinline--tagtag" " dalamdalamHTML, HTML, berartiberarti tidaktidak adaada pergantianpergantian barisbaris((line breakline break) yang ) yang disisipkandisisipkan sebelumsebelum atauatausetelahsetelah penulisannyapenulisannya..
![Page 26: CSS (Cascading Style Sheet) - Devierosaa's Blog · Microsoft PowerPoint - bab 4 - CSS.ppt Author: Devie Created Date: 4/6/2010 8:32:43 AM ...Authors: Anna Van RaaphorstAbout: Cascading](https://reader031.vdocument.in/reader031/viewer/2022022009/5aec50c67f8b9ac361904b13/html5/thumbnails/26.jpg)
ContohContoh SPANSPAN
asasasas
![Page 27: CSS (Cascading Style Sheet) - Devierosaa's Blog · Microsoft PowerPoint - bab 4 - CSS.ppt Author: Devie Created Date: 4/6/2010 8:32:43 AM ...Authors: Anna Van RaaphorstAbout: Cascading](https://reader031.vdocument.in/reader031/viewer/2022022009/5aec50c67f8b9ac361904b13/html5/thumbnails/27.jpg)
Tag Tag <DIV> <DIV> adalahadalah ""block tagblock tag" " dalamdalam HTML, HTML, berartiberarti pergantianpergantian barisbaris secarasecara otomatisotomatisdisisipkandisisipkan untukuntuk memberikanmemberikan jarakjarak antaraantara blokblokyang yang dibuatdibuat dengandengan teksteks atauatau blokblok lain lain sebelumsebelumdandan sesudahnyasesudahnya ((sepertiseperti tag <P> tag <P> atauatau<TABLE>).<TABLE>).Tag Tag <DIV> <DIV> seringsering digunakandigunakan untukuntukimplementasiimplementasi layer layer karenakarena layer layer merupakanmerupakanblokblokblokblok informasiinformasi terpisahterpisah. Tag . Tag <DIV> <DIV> merupakanmerupakan pilihanpilihan yang yang tepattepat saatsaat membuatmembuatlayer layer padapada halamanhalaman web.web.
![Page 28: CSS (Cascading Style Sheet) - Devierosaa's Blog · Microsoft PowerPoint - bab 4 - CSS.ppt Author: Devie Created Date: 4/6/2010 8:32:43 AM ...Authors: Anna Van RaaphorstAbout: Cascading](https://reader031.vdocument.in/reader031/viewer/2022022009/5aec50c67f8b9ac361904b13/html5/thumbnails/28.jpg)
ContohContoh DIVDIV
sasassasas
![Page 29: CSS (Cascading Style Sheet) - Devierosaa's Blog · Microsoft PowerPoint - bab 4 - CSS.ppt Author: Devie Created Date: 4/6/2010 8:32:43 AM ...Authors: Anna Van RaaphorstAbout: Cascading](https://reader031.vdocument.in/reader031/viewer/2022022009/5aec50c67f8b9ac361904b13/html5/thumbnails/29.jpg)
ImageImage
CSS Image CSS Image ddigunakanigunakan untukuntuk mengaturmengaturtampilantampilan daridari gambargambar (image) (image) padapada html.html.ElemenElemen iniini mempunyaimempunyai beberapabeberapa attributattribut..SatuSatu propertiproperti dapatdapat mempunyaimempunyai beberapabeberapanilainilai. .
![Page 30: CSS (Cascading Style Sheet) - Devierosaa's Blog · Microsoft PowerPoint - bab 4 - CSS.ppt Author: Devie Created Date: 4/6/2010 8:32:43 AM ...Authors: Anna Van RaaphorstAbout: Cascading](https://reader031.vdocument.in/reader031/viewer/2022022009/5aec50c67f8b9ac361904b13/html5/thumbnails/30.jpg)
Property Background ColorProperty Background ColorPropertiProperti background color background color digunakandigunakan untukuntukmengaturmengatur warnawarna latarlatar belakangbelakang..ContohContoh ::
![Page 31: CSS (Cascading Style Sheet) - Devierosaa's Blog · Microsoft PowerPoint - bab 4 - CSS.ppt Author: Devie Created Date: 4/6/2010 8:32:43 AM ...Authors: Anna Van RaaphorstAbout: Cascading](https://reader031.vdocument.in/reader031/viewer/2022022009/5aec50c67f8b9ac361904b13/html5/thumbnails/31.jpg)
PropertiProperti Background ImageBackground Image
TidakTidak hanyahanya warnawarna yang yang bisabisa dijadikandijadikan sebagaisebagailatarlatar belakangbelakang, , tetapitetapi jugajuga gambargambar..halhal iniini bisabisa dilakukandilakukan dengandengan menggunakanmenggunakanpropertiproperti backgroundbackground--imageimageContohContoh ::
![Page 32: CSS (Cascading Style Sheet) - Devierosaa's Blog · Microsoft PowerPoint - bab 4 - CSS.ppt Author: Devie Created Date: 4/6/2010 8:32:43 AM ...Authors: Anna Van RaaphorstAbout: Cascading](https://reader031.vdocument.in/reader031/viewer/2022022009/5aec50c67f8b9ac361904b13/html5/thumbnails/32.jpg)
DaftarDaftar PustakaPustaka
Chris Bates [2006]. Chris Bates [2006]. Web Programming: Web Programming: Building Internet ApplicationsBuilding Internet Applications, Third Edition, , Third Edition, John Wiley & Sons Ltd, England. John Wiley & Sons Ltd, England. HusniHusni [2007]. [2007]. PemrogramanPemrograman Database Database BerbasisBerbasis WebWeb, , GrahaGraha IlmuIlmu, , YogyakartaYogyakarta..SebestaSebesta, R.W. [2002], , R.W. [2002], Programming the Programming the World Wide WebWorld Wide Web, Addison Wesley., Addison Wesley.