1

ReferensiCSS1.0

SintaksDasarCSS

oSelectoroGabunganSelectoroBanyakPropertiPadaSelectoroClassSelectoro IDSelectoroKomentar

PenerapanCSS

oMetodeInlineoMetodeInternaloMetodeEksternal

PropertiPropertiCSS

oTextoFontoClassificationoBoxoColordanBackground

2

UntukdapatmemahamiperaturanpenulisandanpenerapankodekodeCSSdidalamdokumenHTML,makakitaharusmengenalapaituSELECTOR,apaituGABUNGANSELECTOR,apaituBANYAKPROPERTIUNTUKSELECTOR,apaituCLASSSELECTOR,apaituIDSELECTOR,apaituKOMENTAR.

SintaksDasarCSSSelectorDidalamCSS,biasanyaselectoritudiwakiliolehelemenelemenHTML.Perhatikancontohkodedibawahini:

P{color:red}

PadacontohkodetersebutdiatasyangberperanmenjadiselectoradalahelemenPdanyangberperanmenjadipropertidariselectoradalahcolordannilaidariproperticoloradalahred.Jadikalaudilihatpadacontohkodediatas,penulisandarisebuahselectoradalahsepertiberikut:

selector{properti:nilai}

GabunganSelectorDidalamCSSkitadiperbolehkanmenuliskanlebihdarisatuselector.Caraini,selectorlebihdarisatuharusdipisahkandengantandakoma,misalkankitainginmenerapkanpropertiyangsamauntukbeberapaselector.

H1,H2,H3{color:red}

PadacontohkodediataselemenH1,H2,danH3akandiformatdenganpropertiyangsama,jadipenulisandaribeberapaselectorakansepertiberikut:

selector1,selector2,selector3{properti:nilai}

BanyakPropertiuntukSelectorPadaCSSkitadapatmemberikanlebihdarisatupropertiuntuksebuahselector.Misal,padacontohkodedibawahselectorPmempunyaiproperticolordanpropertifontsize:

3

P{color:redfontsize:150%}

ClassSelectorClassselectormerupakannamapengenalclassyangdidahuluitandatitik(.),untukditerapkanpadaelemenHTMLyangditetapkan,jikakitatanpamenuliskanelemenHTMLtertentusebagaisebuahselectordanhanyamenuliskannamapengenalclasssaja,makanamapengenalselectortersebutdapatdiaplikasikanuntuksemuaelemenHTMLyangmanasaja.MisalkanjikakitainginmenerapkanelemenPpadahalamanHTMLdenganwarnateksyangberbedabeda,perludiketahuiuntukmengaksesnyadidalamsebuahelemenHTMLdidahuluipenulisanatributCLASS.

/*khususuntukelemenPyangmempunyaiCLASSwarnasatu*/P.warnasatu{color:red}/*khususuntukelemenPyangmempunyaiCLASSwarnadua*/P.warnadua{color:blue}/*khususuntukelemenPyangmempunyaiCLASSwarnatiga*/P.warnatiga{color:olive}/*dapatditerapkanpadasemuaelemenHTML*/.warnaempat{color:brown}ClassSelectorClassSelectorClassselectormerupakanpenggabungandaribeberapapropertiyangdapatdigunakanlebihdarisatukali.Contoh,misalkankitainginmenerapkanpadaelemenPpadahalamanHTMLdenganwarnateksyangberbedabeda.Classselectormerupakanpenggabungandaribeberapapropertiyangdapatdigunakanlebihdarisatukali.Contoh,misalkankitainginmenerapkanpadaelemenPpadahalamanHTMLdenganwarnateksyangberbedabeda.Classselectormerupakanpenggabungandaribeberapapropertiyangdapatdigunakanlebihdarisatukali.Contoh,misalkankitainginmenerapkanpadaelemenPpadahalamanHTMLdenganwarnateksyangberbedabeda.

Jadikalaudilihatcontohkodediatas,untukpenulisanclassselectoradalahsepertiberikut:

tagHTML.namaClassSelector{properti:nilai}

4

Ataubisajugasepertiini:

.namaClassSelector{properti:nilai}

Catatan:Didalambentukpenulisanyangpertama,propertipropertihanyadapatditerapkanpadaelemenHTMLyangsudahditentukan.SedangkandidalampenulisanyangkeduapropertipropertinyadapatditerapkanpadaelemenelemenHTMLyangmanasaja.

IdSelectorUntukIDSelector,penerapannyahampirsamasepertiClassSelector.TetapihanyadibedakandalampenggaksesannyayaitumenggunakanatributIDdanpenulisannyamenggunakantanda#danbukantandatitik(.).MisalkankitainginmenerapkanwarnateksyangberbedabedapadaelemenP.

/*khususuntukelemenPyangmempunyaiIDwarnasatu*/P#warnasatu{color:red}/*khususuntukelemenPyangmempunyaiIDwarnadua*/P#warnadua{color:blue}/*khususuntukelemenPyangmempunyaiIDwarnatiga*/P#warnatiga{color:olive}/*dapatditerapkanpadasemuaelemenHTML*/#warnaempat{color:brown}IDSelectorIDSelectorIDSelectoruntukpenerapannyahampirsamasepertiClassSelector.TetapihanyadibedakandalampenggaksesannyayaitumenggunakanelemenIDdanpenulisannyamenggunakantanda#danbukantandatitik(.).MisalkankitainginmenerapkanwarnateksyangberbedapadaelemenP.IDSelectoruntukpenerapannyahampirsamasepertiClassSelector.TetapihanyadibedakandalampenggaksesannyayaitumenggunakanelemenIDdanpenulisannyamenggunakantanda#danbukantandatitik(.).MisalkankitainginmenerapkanwarnateksyangberbedapadaelemenP.IDSelectoruntukpenerapannyahampirsamasepertiClassSelector.TetapihanyadibedakandalampenggaksesannyayaitumenggunakanelemenIDdanpenulisannyamenggunakantanda#danbukantandatitik(.).MisalkankitainginmenerapkanwarnateksyangberbedapadaelemenP.

Jadikalaudilihatcontohkodediatas,untukpenulisanidselectoradalahsepertiberikut:

5

tagHTML#namaIdSelector{properti:nilai}

Ataubisajugasepertiini:

#namaIdSelector{properti:nilai}

KomentarKomentarpadaumumnyadigunakansebagaipenjelasandarikodekodeyangkitabuat,selainuntukberbagi.KomentarpadaCSSbentuknyasepertiberikut:

/*KomentarKitaDisini*/

6

PenerapanCSSUntukdapatmenerapkanCSS,CSSmempunyaitigametode,yaituMetodeInline,MetodeInternaldanMetodeEksternal.BerikutadalahpenjelasanpenjelasandariketigametodeyangdimilikiCSSdalamhalpenerapannya.

MetodeInlineCSSMetodeInlineCSSadalahteknikmenuliskankodeCSSlangsungdidalamelemenelemenHTML.CarapenulisaniniditerapkandidalamelemenBODY.PenulisanmetodeInlineCSS,kodediawalidenganpenulisanatributSTYLEdidalamtagtagawalHTML.Jadibentuknyapenulisannyasepertiberikut:

...

DibawahiniadalahcontohpenerapandarimetodeInlineCSS:

MetodeInlineCSSMetodeInlineadalahteknikmenuliskankodeCSSlangsungdidalamelemenHTML.CarapenulisaniniditerapkandidalamelemenBODY.MetodeInlineadalahteknikmenuliskankodeCSSlangsungdidalamelemenHTML.CarapenulisaniniditerapkandidalamelemenBODY.

MetodeInternalCSSMetodeInternalCSSyaituteknikmenempelkankodeCSSdidalamelemenHEAD.Metodeinidiawalidenganpenulisandandiakhiri.Jadibentuknyasepertiberikut:

Kodecssdisini

DibawahiniadalahcontohdaripenerapanmetodeInternalCSS:

MetodeInternalCSSP{color:blue}MetodeInternalyaituteknikdenganmenempelkankodeCSSdidalamelemenHEAD.

7

MetodeEksternalCSSMetodeEksternalCSSadalahteknikmeloadkodeCSSdariluarhalamanHTMLkedalamdokumenHTML.Penerapannyabisamenggunakancaradibawahiniataubisamenggunakanperintah@import.UntukmenentukanalamatdarifileCSSyangakandimuat,ituberdasarkanpadaatributHREFdidalamelemenLINK.

1. Langkahpertama,kitaketikkansatusetkodeCSSpada,misalnyapadatekseditorNotepad.Misalkankodeyangditulissepertiberikut:

P{color:red}

2. LangkahkeduakitasimpankodediatasdengannamaeksternalCSS.css.

3. Langkahketiga,memanggilkodeyangtadikitasimpan,yaitueksternalCSS.css.UntukmemanggilnyakitaharusdarihalamanHTML.SepertibiasapadahalamanHTMLkitaambilViewSourcenyadahulu.Lalukitaketikkankodeyangberikut:

MetodeEksternalCSS/*iniadalahelemenyangakandiformatdengankodeeksternaltadi*/Teks

Catatan:Penempatanfileeksternalyangakandipanggildenganfilepemanggil,yaitubrowserdidalamsatudirektoriyangsama,makakitabisamenggunakankodesepertiberikut:

Tetapikalaumenempatkanfileyangdipanggil/fileeksternalituletaknyaberlainandirektoriataufolderdenganfilepemanggil,makaharusdenganlengkappenulisannya.MisalkankitamenyimpanfilepemanggilpadadirektoriE,lalufileyangdipanggilituberadadidalamfolderDIPANGGILpadadirektoriF,makakodenyaharussepertiberikut:

8

PropertiTextWordSpacingwordspacing:normal,legth

Propertiwordspacingdigunakanuntukmenentukanjarakspasidiantarabariskata.NilaiawaldaripropertiiniadalahnormaldanpropertiinidapatditerapkanpadasemuaelemenelemenHTML.Untuknilailengthbisakitamemberikannilaipositifataupundengannilainegatif.

P,EM {wordspacing: 0.4em}P.note{wordspacing: 0.2em}Properti wordspacing digunakan untuk menentukan jarak spasi diantara kata. Nilai awal dariproperti iniadalahnormaldanproperti inidapatditerapkanpadasemuaelemen.Untuknilai lengthbisakitamemberikannilaipositifataupundengannilainegatif.Properti wordspacing digunakan untuk menentukan jarak spasi diantara kata.Nilaiawaldaripropertiiniadalahnormaldanpropertiinidapatditerapkanpadasemuaelemen.Untuknilailengthbisakitamemberikannilaipositifataupundengannilainegatif.Propertiwordspacingdigunakanuntukmenentukan jarakspasidiantarakata.Nilaiawaldariproperti iniadalahnormaldanproperti inidapatditerapkanpadasemuaelemen.Untuknilai lengthbisakitamemberikannilaipositifataupundengannilainegatif.

LetterSpacingletterspacing:normal,length

Propertiletterspacingdigunakanuntukmenentukanjarakspasidiantarakarakter.NilaiawaldaripropertiiniadalahnormaldandapatditerapkanpadasemuaelemenelemenHTML.Untuknilailengthkitabisamemberikannilaipositifataupunnilainegatif.

H1{letterspacing:1em}P.note{letterspacing: 0.1em}PropertiletterspacingPropertiletterspacingdigunakanuntukmenentukanjarakspasidiantarakarakter.Nilai awal dari properti ini adalah normal dan dapat diterapkan pada semua elemen. Untuk nilailengthkitabisamemberikannilaipositifataupunnilainegatif.

9

TextDecorationtextdecoration:none,underline,overline,linethrough,blink

Propertitextdecorationdigunakanuntukmemberikandekorasihuruftercoretditengah,atauakantampakgarisbawahdibawahteksataudiatasteks,ataumembuatteksberkedip.NilaiawaldaripropertiiniadalahnonedandapatditerapkanpadasemuaelemenelemenHTML.

P{textdecoration:underline}Properti textdecoration digunakan untuk memberikan dekorasi huruf tercoret ditengah, atauakantampakgarisbawahdibawahteksdandiatasteks,ataumembuatteksberkedip.Nilaiawaldaripropertiiniadalahnonedandapatditerapkanpadasemuaelemen.

VerticalAlignverticalalign:base,sub,super,top,texttop,middle,bottom,textbottom,persentase

Propertiverticalaligndigunakanuntukmenentukanposisidarisebuahelemeninline,sehubungandenganelemenparentnya.Elemeninlineadalahyangtidakmemilikilinebreaksebelumdansetelahnya,sebagaicontohelemenEM,A,danIMGpadaHTML.

IMG.middle{verticalalign:middle}IMG {verticalalign:50%}.exponent{verticalalign:texttop}Properti verticalalign digunakan untuk menentukan posisi dari sebuah elemen inline, sehubungan dengan elemenparentnya. Elemen inline adalah yang tidak memiliki line break sebelum dan setelahnya, sebagaicontoh,EM,A,danIMGpadaHTML.Properti verticalalign digunakan untuk menentukan posisi dari sebuah elemen inline, sehubungan dengan elemenparentnya. Elemen inline adalah yang tidak memiliki line break sebelum dan setelahnya, sebagaicontoh,EM,A,danIMGpadaHTML.Properti verticalalign digunakan untuk menentukan posisi dari sebuah elemen inline, sehubungan dengan elemenparentnya. Elemen inline adalah yang tidak memiliki line break sebelum dan setelahnya, sebagaicontoh,EM,A,danIMGpadaHTML.

10

TextTransformtexttransform:none,capitalize,UPPERCASE,lowercase

Propertitexttransformdigunakanhanyauntukstyledaripenulisantekstekssaja.

texttransformH1{texttransform:uppercase}H2{texttransform:capitalize}PropertitexttransformPropertitexttransform

TextAligntextalign:left,right,center,justify

Propertitextaligndigunakanuntukmenentukanposisiatauperataanteks.Nilaiawaldaripropertiinitergantungpadabrowser.

textalignH1{textalign:center}P.newspaper{textalign:justify}P.newspaper2{textalign:right}textalignPropertitextaligndigunakanuntukmenentukanposisiatauperataanteks.Nilaiawaldaripropertiinitergantungpadabrowseryangdigunakan.Propertitextaligndigunakanuntukmenentukanposisiatauperataanteks.Nilaiawaldaripropertiinitergantungpadabrowseryangdigunakan.

TextIndenttextindent:length,persentase

Propertitextindentdigunakanuntukmenentukanjarakteksyangmenjorokkedalampadaawalparagrap.

textindent

11

P{textindent:5em}Propertitextindentdigunakanuntukmenentukanjarakteksyangmenjorokkedalampadaawalparagrap.Propertitextindentdigunakanuntukmenentukanjarakteksyangmenjorokkedalampadaawalparagrap.Propertitextindentdigunakanuntukmenentukanjarakteksyangmenjorokkedalampadaawalparagrap.

LineHeightlineheight:normal,number,length,persentase

Propertilineheightdigunakanuntukmenentukanjarakantarabaris.Nilaiawaldaripropertiiniadalahnormaldandapatditerapkanpadasemuaelemen.

P{lineheight:4em}Properti lineheightdigunakanuntukmenentukanjarakantarabaris.Nilaiawaldariproperti iniadalahnormaldandapatditerapkanpadasemuaelemen.

12

PropertiFontFontFamilyfontfamily:familyname,genericfamily

Propertifontfamilydigunakanuntukmenentukanjenishurufyangakandigunakanpadabrowser.NilaiawalnyatergantungpadabrowserdandapatditerapkanpadasemuaelemenHTML.Ketikakitamenugaskanbanyakjenishuruf,makakitaharusmemisahkannyadengantandakoma.

Catatan:Untukjenishurufyanglebihdarisatukataharuslahdiapittandakutip,misalkan"TimesNewRoman".

P{fontfamily:"NewCenturySchoolbook", Times, serif}Properti fontfamily digunakan untuk menentukan jenis huruf yang akan digunakan padabrowser. Nilaiawalnya tergantung pada browser dandapat diterapkanpada semuaelemenHTML.Ketika kitamenugaskan banyak jenis huruf,maka kita harusmemisahkannya dengan tanda koma.Catatanuntukjenishurufyanglebihdarisatukataharuslahdiapittandakutip,misalkan"TimesNewRoman".

FontStylefontstyle:normal,italic,oblique

Propertifontstyledigunakanuntukmemberikanstyledangayapadahuruf.NilaiawalnyaadalahnormaldandapatditerapkanpadasemuaelemenHTML.

H1{fontstyle:oblique}P {fontstyle:normal}PropertifontstyleProperti fontstyledigunakanuntukmemberikanstylepadahuruf.Nilaiawalnya adalahnormaldandapatditerapkanpadasemuaelemenHTML.

FontVariantfontvariant:normal,SMALLCAPS

13

Propertifontvariantdigunakanuntukmenentukantampilanhurufapaadanyaatauhurufbesaryangakanditampilkan.JikapropertifontvariantdiberinilaiSMALLCAPSmakahurufyangakanditampilkanadalahhurufbesarsemuanya,sebaliknyajikamenggunakannilainormalpadapropertifontvariantmakahurufyangakanditampilkanapaadanya.

SPAN{fontvariant:smallcaps}Propertifontvariantdigunakanuntukmenentukantampilanhurufapaadanyaatau huruf besar yang akan ditampilkan. Jika properti fontvariant diberi nilai SMALLCAPS makahurufyangakanditampilkanadalahhurufbesarsemuanya,sebaliknyajikamenggunakannilainormalpadapropertifontvariantmakahurufyangakanditampilkanapaadanya.

FontWeightfontweight:normal,bold,bolder,lighter,100900

Propertifontweightdigunakanuntukmenentukantebaldantipisdarisebuahhuruf.Nilaidaripropertiiniadalahnormal,bold,bolder,lighter,100,200,300,400,500,600,700,800,900.NilaiawalnyaadalahnormaldanpropertiinidapatditerapkanpadasemuaelemenHTML.

H1{fontweight:800}P {fontweight:normal}PropertifontweightPropertifontweightdigunakanuntukmenentukantebaldantipisdarisebuahhuruf.Nilaidaripropertiiniadalahnormal,bold,bolder,lighter,100,200,300,400,500,600,700,800,900.NilaiawalnyaadalahnormaldanpropertiinidapatditerapkanpadasemuaelemenHTML.

FontSizefontsize:xxsmall,xsmall,small,medium,large,xlarge,xxlarge,larger,smaller

Propertifontsizedigunakanuntukmenentukanataumemodifikasiukurandarihuruf.Nilainyaterbagimenjadinilaiabsolut,relatif,persentase,danlength.Yangtermasuknilaiabsolutadalahxxsmall,xsmall,small,medium,large,xlarge,xxlarge.Yangtermasuknilairelatifadalahlarger,smaller.Yangtermasuknilai

14

persentase,contoh:80%.Yangtermasuknilailength,contoh:34pt.NilaiawalnyaadalahmediumdanpropertiinidapatditerapkanpadasemuaelemenHTML.

H1{fontsize:large}P {fontsize:12pt}LI {fontsize:90%}STRONG{fontsize:larger}PropertifontsizeProperti fontsize digunakan untukmenentukan ataumemodifikasi ukuran dari huruf. Nilainyaterbagimenjadinilaiabsolut,relatif,persentase,danlength.Yangtermasuknilaiabsolutadalahxxsmall, xsmall, small, medium, large, xlarge, xxlarge. Yang termasuk nilai relatif adalah larger,smaller.Yangtermasuknilaipersentase,contoh:80%.Yangtermasuknilailength,contoh:34pt.NilaiawalnyaadalahmediumdanpropertiinidapatditerapkanpadasemuaelemenHTML.Properti fontsize digunakan untuk menentukan atau memodifikasi ukuran dari huruf.Nilainya terbagi menjadi nilai absolut, relatif, persentase, dan length. Yang termasuk nilai absolutadalahxxsmall, xsmall, small,medium, large,xlarge,xxlarge.Yang termasuknilai relatifadalahlarger, smaller. Yang termasuknilaipersentase, contoh: 80%. Yang termasuknilai length, contoh:34pt. Nilai awalnya adalah medium dan properti ini dapat diterapkan pada semua elemenHTML.BelajarCSSMengasyikkanlho!

Fontfont:fontfamily,fontstyle,fontvariant,fontweight,fontsize

Propertifontdigunakansebagaijalanpintasuntukmenerapkanpropertifontfamily,fontstyle,fontvariant,fontweight,fontsize.Padapropertifontkitahanyaharusmenuliskannilainilaidaripropertipropertifontyangada(nilaidaripropertifontfamily,fontstyle,fontvariant,fontweight,fontsize).Nilainilainyaharusdipisahkandenganspasi.

P{font:italicbold12pt/14ptTimes,serif}Properti font digunakan sebagai jalan pintas untukmenerapkan semua propertiproperti font.Padaproperti fontkitahanyaharusmenuliskannilainilaidaripropertiproperti fontyang ada (nilaidari fontfamily, fontstyle, fontvariant, fontweight, fontsize). Nilainilainya harus dipisahkandenganspasi.

15

ClassificationDisplaydisplay:block,inline,listitem,none

Propertidisplaydigunakanuntukmenggambarkansebuahelemendengansalahsatudariempatnilainilaiyangtersedia:block(menambahkanlinebreak/gantibarissebelumdansesudahnya),inline(tidakadalinebreaksebelumdansetelahelemen),listitem(samasepertiblockkecualisebuahpenandalistitemditambahkan),none(tidakadatampilan).

Padaumumnyasetiapelemendiberikannilaidefaultdisplayolehbrowser,yangdidasarkanpadarenderingdidalamspesifikasiHTML.

BODY{backgroundcolor:bluewidth:100%color:white}B{display:blockmarginbottom:30ptmarginleft:0}BelajarCSSSekarang kita dapat belajar CSS,Sekarang kita dapat belajar CSS,Sekarang kita dapat belajarCSS,Sekarang kita dapat belajar CSS,Sekarang kita dapat belajar CSS,Sekarang kita dapat belajarCSS,Sekarang kita dapat belajar CSS,Sekarang kita dapat belajar CSS,Sekarang kita dapat belajarCSSSekarang kita dapat belajar CSS,Sekarang kita dapat belajar CSS,Sekarang kita dapat belajarCSS,Sekarang kita dapat belajar CSS,Sekarang kita dapat belajar CSS,Sekarang kita dapat belajarCSS,Sekarang kita dapat belajar CSS,Sekarang kita dapat belajar CSS,Sekarang kita dapat belajarCSSSekarang kita dapat belajar CSS,Sekarang kita dapat belajar CSS,Sekarang kita dapat belajarCSS,Sekarang kita dapat belajar CSS,Sekarang kita dapat belajar CSS,Sekarang kita dapat belajarCSS,Sekarang kita dapat belajar CSS,Sekarang kita dapat belajar CSS,Sekarang kita dapat belajarCSS

WhiteSpacewhitespace:normal,pre,nowrap

Propertiwhitespaceakanmenentukanbagaimanaspasispasididalamelemenitudiperlakukan,apakahditampilkansecaraapaadanya,atausecaranormalkah.

16

P{whitespace:nowrap}Propertiwhitespaceakanmenentukanbagaimanaspasispasididalamelemenitudiperlakukan.Properti whitespace akan menentukan bagaimana spasispasi didalam elemen itu diperlakukan.Properti whitespace akan menentukan bagaimana spasispasi didalam elemen itu diperlakukan.Properti whitespace akan menentukan bagaimana spasispasi didalam elemen itu diperlakukan.Properti whitespace akan menentukan bagaimana spasispasi didalam elemen itu diperlakukan.Properti whitespace akan menentukan bagaimana spasispasi didalam elemen itu diperlakukan.Properti whitespace akan menentukan bagaimana spasispasi didalam elemen itu diperlakukan.Properti whitespace akan menentukan bagaimana spasispasi didalam elemen itu diperlakukan.Propertiwhitespaceakanmenentukanbagaimanaspasispasididalamelemenitudiperlakukan.

ListStyleTypeliststyletype:disc,circle,square,decimal,lowerroman,upperroman,loweralpha,upperalpha,none

Propertiliststyletypedigunakanuntukmenentukanpenandauntuksebuahdaftarlist.BiasanyadigunakanuntukelemenLIpadaHTML.

LI.satu{liststyletype:circle}LI.dua{liststyletype:lowerroman}LI.tiga{liststyletype:disc}Properti liststyletype digunakan untukmenentukan penanda pada daftar list.BiasanyadigunakanuntukelemenLIpadaHTML.Properti liststyletype digunakan untuk menentukan penanda pada daftar list.BiasanyadigunakanuntukelemenLIpadaHTML.Properti liststyletype digunakan untuk menentukan penanda pada daftar list.BiasanyadigunakanuntukelemenLIpadaHTML.

ListStyleImageliststyleimage:url,none

Propertiliststyleimagedigunakanuntukmenggunakansebuahgambaruntukdigunakansebagaipenandadaftarlist.Fungsinyasamasepertipropertiliststyletype,tetapipadapropertiinipenandanyamenggunakansebuahgambar.BiasanyadigunakanuntukelemenLIpadaHTML.

17

liststyleimageLI.satu{liststyleimage:url(xball.bmp)}Properti liststyleimage digunakan untuk menggunakan sebuah gambar untukdigunakan sebagai penanda daftar list. Fungsinya sama seperti properti liststyletype, tetapi padaproperti ini penandanyamenggunakan sebuah gambar. Biasanya digunakanuntuk elemen LI padaHTML.

ListStylePositionliststyleposition:inside,outside

Propertiliststylepositionmempunyaiduanilai,yaituinsideatauoutside.Nilaioutsideadalahnilaidefaultdaripropertiini.Propertiinimenentukandimanapenandaituditempatkan.Jikanilaiinsidedigunakan,barisakandiwrapdibawahpenandadaripadadiindent.BiasanyadigunakanuntukelemenLIpadaHTML.

liststylepositionLI.satu{liststyleimage:url(xball.bmp)liststyleposition:inside}Propertiliststylepositionmempunyaiduanilai,yaituinsideatauoutside.Nilaioutsideadalahnilaidefaultdaripropertiini.Propertiinimenentukandimanapenandaituditempatkan.Jikanilaiinsidedigunakan,barisakandiwrapdibawahpenandadaripadadiindent.BiasanyadigunakanuntukelemenLIpadaHTML.

ListStyleliststyle:liststyletype,liststyleposition,url

Propertiliststyleadalahsebuahjalanpintasuntukpropertiliststyletype,liststyleposition,danliststyleimage.

LI.kotak1{liststyle:squareinside}LI.kotak2{liststyle:squareoutside}AkuInginMenjadi...???AkuInginMenjadi...???

18

19

PropertiBoxMarginTopmargintop:length,persentase,auto

Propertimargintopdigunakanuntukmenentukanbatasmarginpadaposisiatasdarisebuahelemen.Propertimargintopdapatditerapkanpadasemuaelemendanpropertimargintopmempunyainilaiawal,yaitu0.

BODY{margintop: 40}Properti margintop digunakan untuk menentukan batasmargin pada posisi atas dari sebuahelemen.Propertimargintopdigunakanuntukmenentukanbatasmarginpadaposisiatasdarisebuahelemen.Propertimargintopdigunakanuntukmenentukanbatasmarginpadaposisiatasdarisebuahelemen.Propertimargintopdigunakanuntukmenentukanbatasmarginpadaposisiatasdarisebuahelemen.

MarginRightmarginleft:length,perseentase,auto

Propertimarginleftdigunakanuntukmenentukanbatasmarginpadaposisikiridarisebuahelemen.Propertimarginleftdapatditerapkanpadasemuaelemendanpropertiinimempunyainilaiawal0.

BODY{marginleft:40%}Properti marginleft digunakan untuk menentukan batas margin pada posisi kiri dari sebuahelemen.Propertimarginleftdigunakanuntukmenentukanbatasmarginpadaposisikiridarisebuahelemen.Propertimarginleftdigunakanuntukmenentukanbatasmarginpadaposisikiridarisebuahelemen.

MarginBottommarginbottom:length,persentase,auto

Propertimarginbottomdigunakanuntukmenentukanbatasmarginpadaposisibawahdarisebuahelemen.Propertimarginbottomdapatditerapkanpadasemuaelemendanpropertiinimempunyainilaiawal0.

20

BODY{marginbottom:10em}Properti marginbottom digunakan untuk menentukan batas margin pada posisi bawah darisebuah elemen. Properti marginbottom digunakan untuk menentukan batas margin pada posisibawahdarisebuahelemen.Propertimarginbottomdigunakanuntukmenentukanbatasmarginpadaposisibawahdarisebuahelemen.

MarginLeftmarginleft:length,persentase,auto

Propertimarginleftdigunakanuntukmenentukanbatasmarginpadaposisikiridarisebuahelemen.Propertimarginleftdapatditerapkanpadasemuaelemendanpropertiinimempunyainilaiawal0.

BODY{marginleft:50%}Properti marginleft digunakan untuk menentukan batas margin pada posisi kiri dari sebuahelemen.Propertimarginleftdigunakanuntukmenentukanbatasmarginpadaposisikiridarisebuahelemen.Propertimarginleftdigunakanuntukmenentukanbatasmarginpadaposisikiridarisebuahelemen.Propertimarginleftdigunakanuntukmenentukanbatasmarginpadaposisikiridarisebuahelemen.

Marginmargin:length,persentase,auto,marginleft,marginright,margintop,marginbottom

Propertimargindigunakansebagaijalanpintaspenerapanpropertipropertimarginyangada(margintop,marginbottom,marginright,marginleft).

P {margin:1em2em3em4em}Properti margin digunakan sebagai jalan pintas penerapan propertipropertimargin yang ada.Properti margin digunakan sebagai jalan pintas penerapan propertiproperti margin yang ada.

21

Properti margin digunakan sebagai jalan pintas penerapan propertiproperti margin yang ada.Propertimargindigunakansebagaijalanpintaspenerapanpropertipropertimarginyangada.

PaddingToppaddingtop:legth,persentase

Propertipaddingtopdigunakanuntukmenentukanberapabanyakruangspasidiantaraborderbagianatasdanisidarisebuahelemen.

P{paddingtop:12%}Propertipaddingtopmenguraikanberapabanyakruangspasidiantaraborderbagianatasdanisidari selector.Properti paddingtopmenguraikan berapa banyak ruang spasi diantara border bagianatas dan isi dari selector. Properti paddingtop menguraikan berapa banyak ruang spasi diantaraborderbagianatasdanisidariselector.Propertipaddingtopmenguraikanberapabanyakruangspasidiantara border bagian atas dan isi dari selector.Properti paddingtopmenguraikan berapa banyakruangspasidiantaraborderbagianatasdanisidariselector.

PaddingRightpaddingright:length,persentase

Propertipaddingrightdigunakanuntukmenetapkanberapabanyakruangspasidiantaraborderbagiankanandanisidarisebuahelemen.

P{paddingright:12%}Propertipaddingrightmenguraikanberapabanyakruangspasidiantaraborderbagiankanandanisidariselector.Propertipaddingrightmenguraikanberapabanyakruangspasidiantaraborderbagiankanandanisidariselector.Propertipaddingrightmenguraikanberapabanyakruangspasidiantaraborderbagiankanandanisidariselector.

PaddingBottompaddingbottom:length,persentase

22

Propertipaddingbottommenguraikanberapabanyakruangspasidiantaraborderbagianbawahdanisidarisebuahelemen.

P{paddingbottom:12%}Propertipaddingbottommenguraikanberapabanyakruangspasidiantaraborderbagianbawahdan isi dari selector. Properti paddingbottom menguraikan berapa banyak ruang spasi diantaraborder bagian bawah dan isi dari selector. Properti paddingbottom menguraikan berapa banyakruangspasidiantaraborderbagianbawahdanisidariselector.

PaddingLeftpaddingleft:length,persentase

Propertipaddingleftdigunakanuntukmenentukanberapabanyakruangspasidiantaraborderbagiankiridanisidarisebuahelemen.

paddingleftP{paddingleft:12%}Propertipaddingleftmenguraikanberapabanyakruangspasidiantaraborderbagiankiridanisidari selector.Propertipaddingleftmenguraikanberapabanyak ruang spasidiantaraborderbagiankiri dan isi dari selector. Properti paddingleft menguraikan berapa banyak ruang spasi diantaraborderbagiankiridanisidariselector.

Paddingpadding:length,persentase,paddingtop,paddingbottom,paddingright,paddingleft

Propertipaddingdigunakanuntukjalanpintasdalamhalmenerapkanpropertipropertipaddingyangada(paddingtop,paddingbottom,paddingleft,paddingright).

P{padding:2em4em5em}

23

Propertipaddingdigunakanuntukjalanpintasdalamhalmenerapkanpropertipropertipaddingyang ada. Properti padding digunakan untuk jalan pintas dalam halmenerapkan propertipropertipadding yang ada. Properti padding digunakanuntuk jalan pintas dalamhalmenerapkan propertiproperti padding yang ada. Properti padding digunakan untuk jalan pintas dalamhalmenerapkanpropertiproperti padding yang ada. Properti padding digunakan untuk jalan pintas dalam halmenerapkan propertiproperti padding yang ada. Properti padding digunakan untuk jalan pintasdalamhalmenerapkanpropertipropertipaddingyangada.

BorderTopWidthbordertopwidth:thin,medium,thick,length

Propertibordertopwidthdigunakanuntukmenentukantebaldantipisgarisborderpadabagianatas.Gunakanpropertiinibersamaandenganpropertiborderstyle.Propertiinidapatditerapkanpadasemuaelemendanmempunyainilaiawalmedium.

bordertopwidthP{bordertopwidth:34borderstyle:solid}Propertibordertopwidthdigunakanuntukmenentukantebaldantipisgarisborderpadabagianatas.Gunakanpropertiinibersamaandenganpropertiborderstyle.

BorderRightWidthborderrightwidth:thin,medium,thick,length

Propertiborderrightwidthdigunakanuntukmenentukantebaldantipisdarigarisborderpadasebelahkanan.Propertiinidapatditerapkanpadasemuaelemendanmempunyainilaiawalmedium.Gunakanpropertiinibersamaandenganpropertiborderstyle.

P{borderrightwidth:34borderstyle:solid}Propertiborderrightwidthdigunakanuntukmenentukan tebaldan tipisdarigarisborderpadasebelahkanan.Propertiinidapatditerapkanpadasemuaelemendanmempunyainilaiawalmedium.Gunakanpropertiinibersamaandenganpropertiborderstyle.

24

BorderBottomWidthborderbottomwidth:thin,medium,thick,length

Propertiborderbottomwidthdigunakanuntukmenentukantebaldantipisdarigarisborderpadasebelahbawah.Propertiinidapatditerapkanpadasemuaelemendanmempunyainilaiawalmedium.Gunakanpropertiinibersamaandenganpropertiborderstyle.

borderbottomwidthP{borderbottomwidth:34borderstyle:solid}Propertiborderbottomwidthdigunakanuntukmenentukantebaldantipisdarigarisborderpadasebelahbawah.Propertiinidapatditerapkanpadasemuaelemendanmempunyainilaiawalmedium.Gunakanpropertiinibersamaandenganpropertiborderstyle.

BorderLeftWidthborderleftwidth:thin,medium,thick,length

Propertiborderleftwidthdigunakanuntukmenentukantebaldantipisdarigarisborderpadasebelahkiri.Propertiinidapatditerapkanpadasemuaelemendanmempunyainilaiawalmedium.Gunakanpropertiinibersamaandenganpropertiborderstyle.

borderleftwidthP{borderleftwidth:34borderstyle:solid}Properti borderleftwidth digunakan untukmenentukan tebal dan tipis dari garis border padasebelah kiri. Properti ini dapat diterapkan pada semua elemendanmempunyai nilai awalmedium.Gunakanpropertiinibersamaandenganpropertiborderstyle.

BorderWidthborderwidth:thin,medium,thick,length,bordertopwidth,borderbottomwidth,borderrightwidth,borderleftright.

Propertiborderwidthadalahjalanpintasuntukmenentukantebaldantipisnyagarisborderpadakeempatsisi(bordertopwidth,borderbottomwidth,borderrightwidth,borderleftright).Propertiinidapatditerapkanpadasemuaelemen.

25

borderwidthP{borderwidth:5101520borderstyle:solid}PropertiborderwidthPropertiborderwidthadalahjalanpintasuntukmenentukantebaldantipisnyagarisborderpadakeempatsisi.Propertiinidapatditerapkanpadasemuaelemen.Propertiborderwidthadalahjalanpintasuntukmenentukantebaldantipisnyagarisborderpadakeempatsisi.Propertiinidapatditerapkanpadasemuaelemen.

BorderColorbordercolor:color

Propertibordercolordigunakanuntukmenentukanwarnadarigarisborderuntukkeempatgarisborderyangada(bordertopwidth,borderbottomwidth,borderrightwidth,borderleftright).

P{bordercolor:blueyellowgreenoliveborderstyle:solid}Propertibordercolordigunakanuntukmenentukanwarnadarigarisborderuntukkeempatgarisborderyangada.

BorderStyleborderstyle:none,dotted,dashed,solid,double,groove,ridge,inset,outset

Propertiborderstyledigunakanuntukmenentukanstylegarisborderyangakandigunakan.

P{borderstyle:dotteddashedsoliddouble}Propertiborderstyledigunakanuntukmenentukanstylegarisborderyangakandigunakan.

26

BorderTopbordertop:bordertopwidth,borderstyle,color

Propertibordertopdigunakansebagaijalanpintasuntukmenerapkanproperticolor,bordertopwidth,danborderstyle,tentunyapadagarisborderbagianatas.

P{bordertop:solid5blue}Propertibordertopdigunakansebagaijalanpintasuntukmenerapkanproperticolor,bordertopwidth,danborderstyle,tentunyapadagarisborderbagianatas.

BorderRightborderright:bordertopwidth,borderstyle,color

Propertiborderrightdigunakansebagaijalanpintasuntukmenerapkanproperticolor,bordertopwidth,danborderstyle,tentunyapadagarisborderbagiankanan.

borderstyleP{borderright:solid5blue}Propertiborderrightdigunakansebagaijalanpintasuntukmenerapkanproperticolor,bordertopwidth,danborderstyle,tentunyapadagarisborderbagiankanan.

BorderBottomborderbottom:bordertopwidth,borderstyle,color

Propertiborderbottomdigunakansebagaijalanpintasuntukmenerapkanproperticolor,bordertopwidth,danborderstyle,tentunyapadagarisborderbagianbawah.

PropertiborderbottomP{borderbottom:solid5blue}

27

Propertiborderbottomdigunakansebagaijalanpintasuntukmenerapkanproperticolor,bordertopwidth,danborderstyle,tentunyapadagarisborderbagianbawah.

BorderLeftborderleft:bordertopwidth,borderstyle,color

Propertiborderleftdigunakansebagaijalanpintasuntukmenerapkanproperticolor,bordertopwidth,danborderstyle,tentunyapadagarisborderbagiankiri.

PropertiborderleftP{borderleft:solid5blue}Propertiborderleftdigunakansebagaijalanpintasuntukmenerapkanproperticolor,bordertopwidth,danborderstyle,tentunyapadagarisborderbagiankiri.

Borderborder:borderwidth,borderstyle,color

Propertiborderdigunakansebagaijalanpintasuntukmenerapakanproperticolor,borderwidth,danborderstyle,tentunyapadagarisborderpadakeempatsisi.

PropertiborderP{border:solid5blue}Properti border digunakan sebagai jalan pintasuntukmenerapakan properti color, bordertopwidth,danborderstyle,tentunyapadagarisborderpadakeempatsisi.Properti border digunakan sebagai jalan pintasuntukmenerapakan properti color, bordertopwidth,danborderstyle,tentunyapadagarisborderpadakeempatsisi.

Widthwidth:length,persentase,auto

PropertiwidthdigunakanuntukmenentukanlebardarielemenelemensepertiIMG,INPUT,TEXTAREA,SELECT,danOBJECT.

28

IMG{width:15em}

Heightheight:length,persentase,auto

PropertiheightdigunakanuntukmenentukantinggidarielemenelemensepertiIMG,INPUT,TEXTAREA,SELECT,danOBJECT.

IMG{height:15emwidth:15em}

Floatfloat:left,right,none

Propertifloatmengizinkankitauntukmembungkusteksdisekitarsebuahelemen.InisamasepertipenerapanatributALIGN="left"danALIGN="right"padaelemenIMG,tetapipadaCSS1.0kitadiperbolehkanuntukmenerapkanpropertiinipadasemuaelemen.

IMG{float:right}P{float:left}Properti float mengizinkan kita untuk membungkus teks disekitar sebuah elemen. Ini samaseperti penerapan atribut ALIGN=left dan ALIGN=right untuk elemen IMG, tetapi pada CSS1 kitadiperbolehkanuntukditerapkanpadasemuaelemen.

Clearclear:none,left,right,both

29

Properticleardigunakanuntukmengizinkanelemenelemenyangdiformatdenganpropertifloatditempatkanpadasisisisielemenelemenyangdiformatdenganproperticlear.FungsiproperticlearsamafungsinyasepertipadaelemenBRdiHTML.

IMG{clear:right}P{float:left}Properticleardigunakanuntukmengizinkanelemenelemenyangdiformatdenganpropertifloatditempatkanpadasisisisielemenelemenyangdiformatdenganproperticlear.

30

PropertiColordanBackgroundColorcolor:color

Properticolordigunakanuntukmenentukanwarnalatarbelakangdarisebuahelemenyangditetapkanatauuntukmenentukanwarnateks.Properticolordapatditerapkanpadasemuaelemendannilaiawalnyaditentukanolehbrowser.

H1{color:blue}H2{color:#000080}H3{color:#0c0}ProperticolorProperticolorProperticolor

BackgoundColorbackgroundcolor:color,transparent

Propertibackgoundcolordigunakanuntukmenentukanwarnalatarbelakangpadasebuahelemen.Nilaiawalpropertiiniadalahtransparent.

BODY{backgroundcolor:blue}H1{backgroundcolor:#000080}PropertibackgroundcolorProperti backoundcolor digunakan untuk menentukan warna latar belakang pada sebuahelemen.Nilaiawalpropertiiniadalahtransparent.

BackgroundImagebackgroundimage:url,none

Propertibackgroundimagedigunakanuntukmenetapkansebuahgambaruntukdijadikansebagailatarbelakangdarisebuahelemen.Nilaiawalpropertiiniadalahnone,yangberartitidakditerapkan.Nilaiurladalahalamatdarifilegambaritudisimpan.

31

BODY{backgroundimage:url(gambar.jpg)}Propertibackgroundimagedigunakanuntukmenetapkansebuahgambaruntukdijadikansebagailatarbelakangdarisebuahelemen.Nilaiawalpropertiiniadalahnone,yangberartitidakditerapkan.Nilaiurladalahalamatdarifilegambaritudisimpan.

BackgroundRepeatbackgroundrepeat:repeat,repeatx,repeaty,norepeat

Propertibackgroundrepeatdigunakanuntukmenetapkanapakahgambaryangmenjadilatarbelakangditampilkansecaraberulangatautidak.Propertiinidapatditerapkanpadasemuaelemendannilaiawalnyaadalahrepeat.

BODY{background:whiteurl(gambar.jpg)

backgroundrepeat:repeatx}Properti backgroundrepeat digunakan untuk menetapkan apakah gambar yang menjadi latarbelakangditampilkan secaraberulangatau tidak.Properti inidapatditerapkanpadasemuaelemendannilaiawalnyaadalahrepeat.

BackgroundAttachmentbackgroundattachment:scroll,fixed

Propertibackgroundattachmentdigunakanuntukmenentukanapakahlatarbelakangberupagambardapatdigulungbersamaandenganisiyangadapadajendelaatauapakahhanyaisiyangadapadajendelasajayangdapatdigulungsedangkangambaryangmenjadilatarbelakangitutetapatautidakdapatdigulung.Propertiinidapatditerapkanadasemuaelemendannilaiawaldaripropertiiniadalahscroll.

BODY{background:whiteurl(gambar.jpg)

backgroundattachment:fixed}

32

Properti backgroundattachment digunakan untuk menentukan apakah latar belakang berupagambardapatdigulungbersamaandenganisiyangadapadajendelaatauapakahhanyaisiyangadapadajendelasajayangdapatdigulungsedangkangambaryangmenjadilatarbelakangitutetapatautidakdapatdigulung.Propertiinidapatditerapkanadasemuaelemendannilaiawaldaripropertiiniadalahscroll.Properti backgroundattachment digunakan untuk menentukan apakah latar belakang berupagambardapatdigulungbersamaandenganisiyangadapadajendelaatauapakahhanyaisiyangadapadajendelasajayangdapatdigulungsedangkangambaryangmenjadilatarbelakangitutetapatautidakdapatdigulung.Propertiinidapatditerapkanadasemuaelemendannilaiawaldaripropertiiniadalahscroll.Properti backgroundattachment digunakan untuk menentukan apakah latar belakang berupagambardapatdigulungbersamaandenganisiyangadapadajendelaatauapakahhanyaisiyangadapadajendelasajayangdapatdigulungsedangkangambaryangmenjadilatarbelakangitutetapatautidakdapatdigulung.Propertiinidapatditerapkanadasemuaelemendannilaiawaldaripropertiiniadalahscroll.Properti backgroundattachment digunakan untuk menentukan apakah latar belakang berupagambardapatdigulungbersamaandenganisiyangadapadajendelaatauapakahhanyaisiyangadapadajendelasajayangdapatdigulungsedangkangambaryangmenjadilatarbelakangitutetapatautidakdapatdigulung.Propertiinidapatditerapkanadasemuaelemendannilaiawaldaripropertiiniadalahscroll.Properti backgroundattachment digunakan untuk menentukan apakah latar belakang berupagambardapatdigulungbersamaandenganisiyangadapadajendelaatauapakahhanyaisiyangadapadajendelasajayangdapatdigulungsedangkangambaryangmenjadilatarbelakangitutetapatautidakdapatdigulung.Propertiinidapatditerapkanadasemuaelemendannilaiawaldaripropertiiniadalahscroll.Properti backgroundattachment digunakan untuk menentukan apakah latar belakang berupagambardapatdigulungbersamaandenganisiyangadapadajendelaatauapakahhanyaisiyangadapadajendelasajayangdapatdigulungsedangkangambaryangmenjadilatarbelakangitutetapatautidakdapatdigulung.Propertiinidapatditerapkanadasemuaelemendannilaiawaldaripropertiiniadalahscroll.

BackgroundPositionbackgroundposition:persentase,length,top,center,bottom,left,right

Propertibackgroundpositiondigunakanuntukmenetapkantataletakdarisebuahlatarbelakang.Nilaiawaldaripropertiiniadalah0%0%.BiasanyapropertiiniditerapkanpadaelemenIMG,INPUT,TEXTAREA,SELECT,danOBJECT.

BODY{backgroundposition:center}Propertibackgroundpositiondigunakanuntukmenetapkantataletakdarisebuahlatarbelakang.Nilaiawaldaripropertiiniadalah0%0%.BiasanyapropertiiniditerapkanpadaelemenIMG,INPUT,TEXTAREA,SELECT,danOBJECT.

33

BackgroundPropertibackgroundadalahsebuahjalanpintasuntukmenerapkannilainilaidaripropertipropertibackgoundyangada(backgroundcolor,backgroundimage,backgroundrepeat,backgroundattachment,backgroundposition).Nilainilainyaharusdipisahkandenganspasi.

P{background:blackurl(gambar.jpg)}Propertibackgroundpositiondigunakanuntukmenetapkantataletakdarisebuahlatarbelakang.Nilaiawaldaripropertiiniadalah0%0%.BiasanyapropertiiniditerapkanpadaelemenIMG,INPUT,TEXTAREA,SELECT,danOBJECT.

NOTES:SEMOGATAMBAHRAJINBELAJARDANTAMBAHPINTAR,ANDADAPATMENDOWNLOADFILEFILELAINNYAPADA:http://WaNeWaAki.blogspot.com

Banyak Properti untuk SelectorGabungan SelectorSelectorSintaks Dasar CSSClass SelectorId SelectorKomentarMetode Inline CSSMetode Internal CSS

Penerapan CSSMetode Eksternal CSS

Properti TextLetter-SpacingWord-SpacingText-DecorationVertical-AlignText-AlignText-IndentText-TransformLine-HeightFont-FamilyFont-StyleFont-Variant

Properti FontFont-SizeFont-WeightFontDisplayWhite-Space

ClassificationList-Style-ImageList-Style-TypeList-StyleList-Style-PositionMargin-BottomMargin-RightMargin-Top

Properti BoxMarginMargin-LeftPadding-BottomPadding-RightPadding-TopPaddingPadding-LeftBorder-Right-WidthBorder-Top-WidthBorder-Bottom-WidthBorder-Left-WidthBorder-WidthBorder-ColorBorder-StyleBorder-BottomBorder-RightBorder-TopBorderBorder-LeftWidthClearFloatHeightBackgound-ColorBackground-ImageColor

Properti Color dan BackgroundBackground-AttachmentBackground-RepeatBackground-PositionBackground