32
CSS CSS (Cascading Style Sheet) (Cascading Style Sheet) Oleh Oleh : : Devie Rosa Devie Rosa Anamisa Anamisa
CSSCSS(Cascading Style Sheet)(Cascading Style Sheet)
OlehOleh ::Devie Rosa Devie Rosa AnamisaAnamisa
PembahasanPembahasan
PengertianPengertian CSSCSSCSS (FONT, TEXT, COLOR)CSS (FONT, TEXT, COLOR)CSS CSS -- ImageImage
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>
ContohContoh SederhanaSederhana
sasasasa
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
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;;}}
ContohContoh Selector HTMLSelector HTML
sasasasa
Selector ClassSelector Class
DigunakanDigunakan untukuntuk mendefinisikanmendefinisikan style style yang yang dapatdapat dipakaidipakai tanpatanpa melakukanmelakukanredefinisiredefinisi tag HTML.tag HTML.Syntax: Syntax: ClassSelectorClassSelector {{
Properti:NilaiProperti:Nilai;;}}
ContohContoh Selector ClassSelector Class
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;;}}
ContohContoh Selector IDSelector ID
sasasasa
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 */*/
ContohContoh KomentarKomentar
sasasasa
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.
ContohContoh File File EksternalEksternal
File File style.cssstyle.css : File HTML :: File HTML :
ElemenElemen--elemenelemen CSSCSS
FontFontTextTextColorColorLinkLink
FontFont
DigunakanDigunakan untukuntuk mengaturmengaturtingkahtingkah--lakulaku hurufhuruf ((fontfont). ). ElemenElemen iniini mempunyaimempunyaibeberapabeberapa propertiproperti. . SatuSatupropertiproperti dapatdapat mempunyaimempunyaibeberapabeberapa nilainilai..
ContohContoh FontFont
sasasasa
TextText
Element text Element text akanakanmembuatmembuat tampilantampilan teksteksmenjadimenjadi lebihlebih menarikmenarik
ContohContoh TextText
ColorColor
ElemenElemen color yang color yang digunakandigunakan untukuntuk mengaturmengaturwarnawarna teksteks dandan background background halamanhalaman webweb
ContohContoh ColorColor
sasasasa
PropertiProperti Border StyleBorder Style
PropertiProperti border style border style bergunaberguna untukuntuk mengaturmengaturbingkaibingkai suatusuatu isiisi dalamdalam halamanhalaman web.web.
ContohContoh Border StyleBorder Style
sasasasa
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..
ContohContoh SPANSPAN
asasasas
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.
ContohContoh DIVDIV
sasassasas
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. .
Property Background ColorProperty Background ColorPropertiProperti background color background color digunakandigunakan untukuntukmengaturmengatur warnawarna latarlatar belakangbelakang..ContohContoh ::
PropertiProperti Background ImageBackground Image
TidakTidak hanyahanya warnawarna yang yang bisabisa dijadikandijadikan sebagaisebagailatarlatar belakangbelakang, , tetapitetapi jugajuga gambargambar..halhal iniini bisabisa dilakukandilakukan dengandengan menggunakanmenggunakanpropertiproperti backgroundbackground--imageimageContohContoh ::
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.
![CSS - yangliang.github.io · Cascading Style Sheets • Õý Cascading • ]4¤MÎ](https://static.documents.pub/doc/80x56/5dd08106d6be591ccb614e7f/css-cascading-style-sheets-a-cascading-a-4m.jpg)
