Referensi Panduan Belajar Css

ReferensiCSS1.
SintaksDasarCSS
o Selector
o GabunganSelector
o BanyakPropertiPadaSelector
o ClassSelector
o IDSelector
o Komentar
PenerapanCSS
o MetodeInline
o MetodeInternal
o MetodeEksternal
PropertiPropertiCSS
o Text
o Font
o Classification
o Box
o ColordanBackground
UntukdapatmemahamiperaturanpenulisandanpenerapankodekodeCSSdidalam
dokumenHTML,makakitaharusmengenalapaituSELECTOR,apaituGABUNGAN
SELECTOR,apaituBANYAKPROPERTIUNTUKSELECTOR,apaituCLASS
SELECTOR,apaituIDSELECTOR,apaituKOMENTAR.
SintaksDasarCSS
Selector
DidalamCSS,biasanyaselectoritudiwakiliolehelemenelemenHTML.Perhatikan
contohkodedibawahini:
P
{
color:red
}
PadacontohkodetersebutdiatasyangberperanmenjadiselectoradalahelemenP
danyangberperanmenjadipropertidariselectoradalahcolordannilaidariproperti
coloradalahred.Jadikalaudilihatpadacontohkodediatas,penulisandarisebuah
selectoradalahsepertiberikut:
selector
{
properti:nilai
}
GabunganSelector
DidalamCSSkitadiperbolehkanmenuliskanlebihdarisatuselector.Caraini,selector
lebihdarisatuharusdipisahkandengantandakoma,misalkankitaingin
menerapkanpropertiyangsamauntukbeberapaselector.
H1,H2,H3
{
color:red
}
PadacontohkodediataselemenH1,H2,danH3akandiformatdenganproperti
yangsama,jadipenulisandaribeberapaselectorakansepertiberikut:
selector1,selector2,selector3
{
properti:nilai
}
BanyakPropertiuntukSelector
PadaCSSkitadapatmemberikanlebihdarisatupropertiuntuksebuahselector.
Misal,padacontohkodedibawahselectorPmempunyaiproperticolordanproperti
fontsize:
P
{
color:red
fontsize:150%
}
ClassSelector
Classselectormerupakannamapengenalclassyangdidahuluitandatitik(.),untuk
diterapkanpadaelemenHTMLyangditetapkan,jikakitatanpamenuliskanelemen
HTMLtertentusebagaisebuahselectordanhanyamenuliskannamapengenalclass
saja,makanamapengenalselectortersebutdapatdiaplikasikanuntuksemua
elemenHTMLyangmanasaja.MisalkanjikakitainginmenerapkanelemenPpada
halamanHTMLdenganwarnateksyangberbedabeda,perludiketahuiuntuk
mengaksesnyadidalamsebuahelemenHTMLdidahuluipenulisanatributCLASS.
<!DOCTYPEHTMLPUBLIC"//W3C//DTDHTML4.0Transitional//EN"
"http://www.w3.org/TR/REChtml40/loose.dtd">
<HTML>
<HEAD>
<STYLETYPE="text/css">
/*khususuntukelemenPyangmempunyaiCLASSwarnasatu*/
P.warnasatu{color:red}
/*khususuntukelemenPyangmempunyaiCLASSwarnadua*/
P.warnadua{color:blue}
/*khususuntukelemenPyangmempunyaiCLASSwarnatiga*/
P.warnatiga{color:olive}
/*dapatditerapkanpadasemuaelemenHTML*/
.warnaempat{color:brown}
</STYLE>
</HEAD>
<BODY>
<H1CLASS="warnaempat">ClassSelector</H1>
<H2CLASS="warnaempat">ClassSelector</H2>
<PCLASS="warnasatu">Classselectormerupakanpenggabungandaribeberapapropertiyangdapat
digunakanlebihdarisatukali.Contoh,misalkankitainginmenerapkanpadaelemenPpadahalaman
HTMLdenganwarnateksyangberbedabeda.</P>
<PCLASS="warnadua">Classselectormerupakanpenggabungandaribeberapapropertiyangdapat
<PCLASS="warnatiga">Classselectormerupakanpenggabungandaribeberapapropertiyangdapat
</BODY>
</HTML>
Jadikalaudilihatcontohkodediatas,untukpenulisanclassselectoradalahseperti
berikut:
tagHTML.namaClassSelector
{
properti:nilai
}
Ataubisajugasepertiini:
.namaClassSelector
{
properti:nilai
}
Catatan:Didalambentukpenulisanyangpertama,propertipropertihanyadapat
diterapkanpadaelemenHTMLyangsudahditentukan.Sedangkandidalampenulisan
yangkeduapropertipropertinyadapatditerapkanpadaelemenelemenHTMLyang
manasaja.
IdSelector
UntukIDSelector,penerapannyahampirsamasepertiClassSelector.Tetapihanya
dibedakandalampenggaksesannyayaitumenggunakanatributIDdanpenulisannya
menggunakantanda#danbukantandatitik(.).Misalkankitainginmenerapkan
warnateksyangberbedabedapadaelemenP.
<HTML>
<HEAD>
/*khususuntukelemenPyangmempunyaiIDwarnasatu*/
P#warnasatu{color:red}
/*khususuntukelemenPyangmempunyaiIDwarnadua*/
P#warnadua{color:blue}
/*khususuntukelemenPyangmempunyaiIDwarnatiga*/
P#warnatiga{color:olive}
/*dapatditerapkanpadasemuaelemenHTML*/
#warnaempat{color:brown}
</STYLE>
</HEAD>
<BODY>
<H1ID="warnaempat">IDSelector</H1>
<H2ID="warnaempat">IDSelector</H2>
<PID="warnasatu">IDSelectoruntukpenerapannyahampirsamasepertiClassSelector.Tetapi
hanyadibedakandalampenggaksesannyayaitumenggunakanelemenIDdanpenulisannya
menggunakantanda#danbukantandatitik(.).Misalkankitainginmenerapkanwarnateksyang
berbedapadaelemenP.</P>
<PID="warnadua">IDSelectoruntukpenerapannyahampirsamasepertiClassSelector.Tetapi
<PID="warnatiga">IDSelectoruntukpenerapannyahampirsamasepertiClassSelector.Tetapi
</BODY>
</HTML>
Jadikalaudilihatcontohkodediatas,untukpenulisanidselectoradalahseperti
berikut:
4
tagHTML#namaIdSelector
{
properti:nilai
}
Ataubisajugasepertiini:
#namaIdSelector
{
properti:nilai
}
Komentar
Komentarpadaumumnyadigunakansebagaipenjelasandarikodekodeyangkita
buat,selainuntukberbagi.KomentarpadaCSSbentuknyasepertiberikut:
/*KomentarKitaDisini*/
PenerapanCSS
UntukdapatmenerapkanCSS,CSSmempunyaitigametode,yaituMetodeInline,
MetodeInternaldanMetodeEksternal.Berikutadalahpenjelasanpenjelasandari
ketigametodeyangdimilikiCSSdalamhalpenerapannya.
MetodeInlineCSS
MetodeInlineCSSadalahteknikmenuliskankodeCSSlangsungdidalamelemen
elemenHTML.CarapenulisaniniditerapkandidalamelemenBODY.Penulisan
metodeInlineCSS,kodediawalidenganpenulisanatributSTYLEdidalamtagtag
awalHTML.Jadibentuknyapenulisannyasepertiberikut:
<tagHtmlstyle="properti:nilai">...</tagHTML>
DibawahiniadalahcontohpenerapandarimetodeInlineCSS:
<HTML>
<HEAD>
<TITLE>MetodeInlineCSS</TITLE>
</HEAD>
<BODY>
<PSTYLE="color:red">MetodeInlineadalahteknikmenuliskankodeCSSlangsungdidalamelemen
HTML.CarapenulisaniniditerapkandidalamelemenBODY.</P>
<PSTYLE="color:blue">MetodeInlineadalahteknikmenuliskankodeCSSlangsungdidalamelemen
HTML.CarapenulisaniniditerapkandidalamelemenBODY.</P>
</BODY>
</HTML>
MetodeInternalCSS
MetodeInternalCSSyaituteknikmenempelkankodeCSSdidalamelemenHEAD.
Metodeinidiawalidenganpenulisan<STYLETYPE="text/css">dandiakhiri
</STYLE>.Jadibentuknyasepertiberikut:
<STYLETYPE="text/css">Kodecssdisini</STYLE>
DibawahiniadalahcontohdaripenerapanmetodeInternalCSS:
<HTML>
<HEAD>
<TITLE>MetodeInternalCSS</TITLE>
P{color:blue}
</STYLE>
<BODY>
<P>MetodeInternalyaituteknikdenganmenempelkankodeCSSdidalamelemenHEAD.</P>
</BODY>
</HTML>
MetodeEksternalCSS
MetodeEksternalCSSadalahteknikmeloadkodeCSSdariluarhalamanHTML
kedalamdokumenHTML.Penerapannyabisamenggunakancaradibawahiniatau
bisamenggunakanperintah@import.UntukmenentukanalamatdarifileCSSyang
akandimuat,ituberdasarkanpadaatributHREFdidalamelemenLINK.
1. Langkahpertama,kitaketikkansatusetkodeCSSpada,misalnyapadateks
editorNotepad.Misalkankodeyangditulissepertiberikut:
P
{
color:red
}
2. LangkahkeduakitasimpankodediatasdengannamaeksternalCSS.css.
3. Langkahketiga,memanggilkodeyangtadikitasimpan,yaitu
eksternalCSS.css.UntukmemanggilnyakitaharusdarihalamanHTML.Seperti
biasapadahalamanHTMLkitaambilViewSourcenyadahulu.Lalukita
ketikkankodeyangberikut:
<HTML>
<HEAD>
<TITLE>MetodeEksternalCSS</TITLE>
</HEAD>
<HEAD>
<LINKREL="stylesheet"HREF="eksternalCSS.css"TYPE="text/css">
</HEAD>
<BODY>
/*iniadalahelemenyangakandiformatdengankodeeksternaltadi*/
<P>Teks</P>
</BODY>
</HTML>
Catatan:Penempatanfileeksternalyangakandipanggildenganfilepemanggil,yaitu
browserdidalamsatudirektoriyangsama,makakitabisamenggunakankode
sepertiberikut:
<LINKREL="stylesheet"HREF="eksternalCSS.css"TYPE="text/css">
Tetapikalaumenempatkanfileyangdipanggil/fileeksternalituletaknyaberlainan
direktoriataufolderdenganfilepemanggil,makaharusdenganlengkap
penulisannya.MisalkankitamenyimpanfilepemanggilpadadirektoriE,lalufileyang
dipanggilituberadadidalamfolderDIPANGGILpadadirektoriF,makakodenya
harussepertiberikut:
<LINKREL="stylesheet"HREF="F:\DIPANGGIL\eksternalCSS.css"TYPE="text/css">
PropertiText
WordSpacing
wordspacing:normal,legth
Propertiwordspacingdigunakanuntukmenentukanjarakspasidiantarabariskata.
Nilaiawaldaripropertiiniadalahnormaldanpropertiinidapatditerapkanpada
semuaelemenelemenHTML.Untuknilailengthbisakitamemberikannilaipositif
ataupundengannilainegatif.
<HTML>
<HEAD>
P,EM {wordspacing: 0.4em}
P.note{wordspacing: 0.2em}
</STYLE>
</HEAD>
<BODY>
<P>Properti wordspacing digunakan untuk menentukan jarak spasi diantara kata. Nilai awal dari
propertiiniadalah normaldan propertiinidapatditerapkan padasemuaelemen. Untuknilailength
bisakitamemberikannilaipositifataupundengannilainegatif.</P>
<P CLASS="note">Properti wordspacing digunakan untuk menentukan jarak spasi diantara kata.
Nilaiawaldaripropertiiniadalahnormaldanpropertiinidapatditerapkanpadasemuaelemen.Untuk
nilailengthbisakitamemberikannilaipositifataupundengannilainegatif.</P>
<EM>Properti wordspacing digunakan untuk menentukan jarak spasi diantara kata. Nilaiawal dari
propertiiniadalah normaldan propertiinidapatditerapkan padasemuaelemen. Untuknilailength
bisakitamemberikannilaipositifataupundengannilainegatif.</EM>
</BODY>
</HTML>
LetterSpacing
letterspacing:normal,length
Propertiletterspacingdigunakanuntukmenentukanjarakspasidiantarakarakter.
Nilaiawaldaripropertiiniadalahnormaldandapatditerapkanpadasemuaelemen
elemenHTML.Untuknilailengthkitabisamemberikannilaipositifataupunnilai
negatif.
<HTML>
<HEAD>
H1{letterspacing:1em}
P.note{letterspacing: 0.1em}
</STYLE>
</HEAD>
<BODY>
<H1>Propertiletterspacing</H1>
<PCLASS="note">Propertiletterspacingdigunakanuntukmenentukanjarakspasidiantarakarakter.
Nilai awal dari properti ini adalah normal dan dapat diterapkan pada semua elemen. Untuk nilai
lengthkitabisamemberikannilaipositifataupunnilainegatif.</P>
</BODY>
</HTML>
TextDecoration
textdecoration:none,underline,overline,linethrough,blink
Propertitextdecorationdigunakanuntukmemberikandekorasihuruftercoret
ditengah,atauakantampakgarisbawahdibawahteksataudiatasteks,atau
membuatteksberkedip.Nilaiawaldaripropertiiniadalahnonedandapat
diterapkanpadasemuaelemenelemenHTML.
<HTML>
<HEAD>
P{textdecoration:underline}
</STYLE>
</HEAD>
<BODY>
<P>Properti textdecoration digunakan untuk memberikan dekorasi huruf tercoret ditengah, atau
akantampakgarisbawahdibawahteksdandiatasteks,ataumembuatteksberkedip.Nilaiawaldari
propertiiniadalahnonedandapatditerapkanpadasemuaelemen.</P>
</BODY>
</HTML>
VerticalAlign
verticalalign:base,sub,super,top,texttop,middle,bottom,textbottom,persentase
Propertiverticalaligndigunakanuntukmenentukanposisidarisebuahelemeninline,
sehubungandenganelemenparentnya.Elemeninlineadalahyangtidakmemiliki
linebreaksebelumdansetelahnya,sebagaicontohelemenEM,A,danIMGpada
HTML.
<HTML>
<HEAD>
IMG.middle{verticalalign:middle}
IMG
{verticalalign:50%}
.exponent{verticalalign:texttop}
</STYLE>
</HEAD>
<BODY>
<P>Properti verticalalign digunakan <IMG SRC="gambar.jpg" CLASS="exponent" WIDTH="100"
HEIGHT="50"> untuk menentukan posisi dari sebuah elemen inline, sehubungan dengan elemen
parentnya. Elemen inline adalah yang tidak memiliki line break sebelum dan setelahnya, sebagai
contoh,EM,A,danIMGpadaHTML.</P>
</BODY>
</HTML>
TextTransform
texttransform:none,capitalize,UPPERCASE,lowercase
Propertitexttransformdigunakanhanyauntukstyledaripenulisantekstekssaja.
<HTML>
<HEAD>
<TITLE>texttransform</TITLE>
H1{texttransform:uppercase}
H2{texttransform:capitalize}
</STYLE>
</HEAD>
<BODY>
<H1>Propertitexttransform</H1>
<H2>Propertitexttransform</H2>
</BODY>
</HTML>
TextAlign
textalign:left,right,center,justify
Propertitextaligndigunakanuntukmenentukanposisiatauperataanteks.Nilaiawal
daripropertiinitergantungpadabrowser.
<HTML>
<HEAD>
<TITLE>textalign</TITLE>
H1{textalign:center}
P.newspaper{textalign:justify}
P.newspaper2{textalign:right}
</STYLE>
</HEAD>
<BODY>
<H1>textalign</H1>
<PCLASS="newspaper">Propertitextaligndigunakanuntukmenentukanposisiatauperataanteks.
Nilaiawaldaripropertiinitergantungpadabrowseryangdigunakan.</P>
<PCLASS="newspaper2">Propertitextaligndigunakanuntukmenentukanposisiatauperataanteks.
Nilaiawaldaripropertiinitergantungpadabrowseryangdigunakan.</P>
</BODY>
</HTML>
TextIndent
textindent:length,persentase
Propertitextindentdigunakanuntukmenentukanjarakteksyangmenjorokkedalam
padaawalparagrap.
<HTML>
<HEAD>
<TITLE>textindent</TITLE>
10
P{textindent:5em}
</STYLE>
</HEAD>
<BODY>
<P>Propertitextindentdigunakanuntukmenentukanjarakteksyangmenjorokkedalampadaawal
paragrap.Propertitextindentdigunakanuntukmenentukanjarakteksyangmenjorokkedalampada
awalparagrap.Propertitextindentdigunakanuntukmenentukanjarakteksyangmenjorokkedalam
padaawalparagrap.</P>
</BODY>
</HTML>
LineHeight
lineheight:normal,number,length,persentase
Propertilineheightdigunakanuntukmenentukanjarakantarabaris.Nilaiawaldari
propertiiniadalahnormaldandapatditerapkanpadasemuaelemen.
<HTML>
<HEAD>
P{lineheight:4em}
</STYLE>
</HEAD>
<BODY>
<P>Propertilineheight digunakan untukmenentukan jarak antarabaris.Nilai awaldaripropertiini
adalahnormaldandapatditerapkanpadasemuaelemen.</P>
</BODY>
</HTML>
11
PropertiFont
FontFamily
fontfamily:familyname,genericfamily
Propertifontfamilydigunakanuntukmenentukanjenishurufyangakandigunakan
padabrowser.Nilaiawalnyatergantungpadabrowserdandapatditerapkanpada
semuaelemenHTML.Ketikakitamenugaskanbanyakjenishuruf,makakitaharus
memisahkannyadengantandakoma.
Catatan:Untukjenishurufyanglebihdarisatukataharuslahdiapittandakutip,
misalkan"TimesNewRoman".
<HTML>
<HEAD>
P{fontfamily:"NewCenturySchoolbook", Times, serif}
</STYLE>
</HEAD>
<BODY>
<P>Properti fontfamily digunakan untuk menentukan jenis huruf yang akan digunakan pada
browser. Nilai awalnya tergantung pada browser dan dapat diterapkan pada semua elemen HTML.
Ketika kita menugaskan banyak jenis huruf, maka kita harus memisahkannya dengan tanda koma.
Catatanuntukjenishurufyanglebihdarisatukataharuslahdiapittandakutip,misalkan"TimesNew
Roman".</P>
</BODY>
</HTML>
FontStyle
fontstyle:normal,italic,oblique
Propertifontstyledigunakanuntukmemberikanstyledangayapadahuruf.Nilai
awalnyaadalahnormaldandapatditerapkanpadasemuaelemenHTML.
<HTML>
<HEAD>
H1{fontstyle:oblique}
P {fontstyle:normal}
</STYLE>
</HEAD>
<BODY>
<H1>Propertifontstyle</H1>
<P>Properti fontstyle digunakan untuk memberikan style pada huruf. Nilai awalnya adalah normal
dandapatditerapkanpadasemuaelemenHTML.</P>
</BODY>
</HTML>
FontVariant
fontvariant:normal,SMALLCAPS
12
Propertifontvariantdigunakanuntukmenentukantampilanhurufapaadanyaatau
hurufbesaryangakanditampilkan.JikapropertifontvariantdiberinilaiSMALLCAPS
makahurufyangakanditampilkanadalahhurufbesarsemuanya,sebaliknyajika
menggunakannilainormalpadapropertifontvariantmakahurufyangakan
ditampilkanapaadanya.
<HTML>
<HEAD>
SPAN{fontvariant:smallcaps}
</STYLE>
</HEAD>
<BODY>
<P>Properti<SPAN>fontvariant</SPAN>digunakanuntukmenentukantampilanhurufapaadanya
atau huruf besar yang akan ditampilkan. Jika properti fontvariant diberi nilai SMALLCAPS maka
hurufyangakanditampilkanadalahhurufbesarsemuanya,sebaliknyajikamenggunakannilainormal
padapropertifontvariantmakahurufyangakanditampilkanapaadanya.</P>
</BODY>
</HTML>
FontWeight
fontweight:normal,bold,bolder,lighter,100900
Propertifontweightdigunakanuntukmenentukantebaldantipisdarisebuahhuruf.
Nilaidaripropertiiniadalahnormal,bold,bolder,lighter,100,200,300,400,500,
600,700,800,900.Nilaiawalnyaadalahnormaldanpropertiinidapatditerapkan
padasemuaelemenHTML.
<HTML>
<HEAD>
H1{fontweight:800}
P {fontweight:normal}
</STYLE>
</HEAD>
<BODY>
<H1>Propertifontweight</H1>
<P>Propertifontweightdigunakanuntukmenentukantebaldantipisdarisebuahhuruf.Nilaidari
propertiiniadalahnormal,bold,bolder,lighter,100,200,300,400,500,600,700,800,900.Nilai
awalnyaadalahnormaldanpropertiinidapatditerapkanpadasemuaelemenHTML.</P>
</BODY>
</HTML>
FontSize
fontsize:xxsmall,xsmall,small,medium,large,xlarge,xxlarge,larger,smaller
Propertifontsizedigunakanuntukmenentukanataumemodifikasiukurandari
huruf.Nilainyaterbagimenjadinilaiabsolut,relatif,persentase,danlength.Yang
termasuknilaiabsolutadalahxxsmall,xsmall,small,medium,large,xlarge,xx
large.Yangtermasuknilairelatifadalahlarger,smaller.Yangtermasuknilai
13
persentase,contoh:80%.Yangtermasuknilailength,contoh:34pt.Nilaiawalnya
adalahmediumdanpropertiinidapatditerapkanpadasemuaelemenHTML.
<HTML>
<HEAD>
H1{fontsize:large}
P
{fontsize:12pt}
LI {fontsize:90%}
STRONG{fontsize:larger}
</STYLE>
</HEAD>
<BODY>
<H1>Propertifontsize</H1>
<P>Properti fontsize digunakan untuk menentukan atau memodifikasi ukuran dari huruf. Nilainya
terbagimenjadinilaiabsolut,relatif,persentase,danlength.Yangtermasuknilaiabsolutadalah xx
small, xsmall, small, medium, large, xlarge, xxlarge. Yang termasuk nilai relatif adalah larger,
smaller.Yangtermasuknilaipersentase,contoh:80%.Yangtermasuknilailength,contoh:34pt.Nilai
awalnyaadalahmediumdanpropertiinidapatditerapkanpadasemuaelemenHTML.</P>
<STRONG>Properti fontsize digunakan untuk menentukan atau memodifikasi ukuran dari huruf.
Nilainya terbagi menjadi nilai absolut, relatif, persentase, dan length. Yang termasuk nilai absolut
adalah xxsmall, xsmall, small, medium, large,xlarge, xxlarge. Yang termasuknilai relatif adalah
larger, smaller. Yang termasuk nilai persentase, contoh: 80%. Yang termasuk nilai length, contoh:
34pt. Nilai awalnya adalah medium dan properti ini dapat diterapkan pada semua elemen
HTML.</STRONG><BR><BR>
<LI>Belajar</LI>
<LI>CSS</LI>
<LI>Mengasyikkanlho!</LI>
</BODY>
</HTML>
Font
font:fontfamily,fontstyle,fontvariant,fontweight,fontsize
Propertifontdigunakansebagaijalanpintasuntukmenerapkanpropertifontfamily,
fontstyle,fontvariant,fontweight,fontsize.Padapropertifontkitahanyaharus
menuliskannilainilaidaripropertipropertifontyangada(nilaidaripropertifont
family,fontstyle,fontvariant,fontweight,fontsize).Nilainilainyaharusdipisahkan
denganspasi.
<HTML>
<HEAD>
P{font:italicbold12pt/14ptTimes,serif}
</STYLE>
</HEAD>
<BODY>
<P>Properti font digunakan sebagai jalan pintas untuk menerapkan semua propertiproperti font.
Pada properti font kita hanya harusmenuliskan nilainilai dari propertiproperti font yang ada (nilai
dari fontfamily, fontstyle, fontvariant, fontweight, fontsize). Nilainilainya harus dipisahkan
denganspasi.</P>
</BODY>
</HTML>
14
Classification
Display
display:block,inline,listitem,none
Propertidisplaydigunakanuntukmenggambarkansebuahelemendengansalahsatu
dariempatnilainilaiyangtersedia:block(menambahkanlinebreak/gantibaris
sebelumdansesudahnya),inline(tidakadalinebreaksebelumdansetelahelemen),
listitem(samasepertiblockkecualisebuahpenandalistitemditambahkan),none
(tidakadatampilan).
Padaumumnyasetiapelemendiberikannilaidefaultdisplayolehbrowser,yang
didasarkanpadarenderingdidalamspesifikasiHTML.
<HTML>
<HEAD>
BODY{
backgroundcolor:blue
width:100%
color:white
}
B{
display:block
marginbottom:30pt
marginleft:0
}
</STYLE>
</HEAD>
<BODY>
<H1>BelajarCSS</H1>
<B>Sekarang kita dapat belajar CSS,Sekarang kita dapat belajar CSS,Sekarang kita dapat belajar
CSS,Sekarang kita dapat belajar CSS,Sekarang kita dapat belajar CSS,Sekarang kita dapat belajar
CSS</B>
CSS</B>
CSS</B>
</BODY>
</HTML>
WhiteSpace
whitespace:normal,pre,nowrap
Propertiwhitespaceakanmenentukanbagaimanaspasispasididalamelemenitu
diperlakukan,apakahditampilkansecaraapaadanya,atausecaranormalkah.
15
<HTML>
<HEAD>
P{whitespace:nowrap}
</STYLE>
</HEAD>
<BODY>
<P>Propertiwhitespaceakanmenentukanbagaimanaspasispasididalamelemenitudiperlakukan.
Properti whitespace akan menentukan bagaimana spasispasi didalam elemen itu diperlakukan.
Propertiwhitespaceakanmenentukanbagaimanaspasispasididalamelemenitudiperlakukan.</P>
</BODY>
</HTML>
ListStyleType
liststyletype:disc,circle,square,decimal,lowerroman,upperroman,loweralpha,upperalpha,
none
Propertiliststyletypedigunakanuntukmenentukanpenandauntuksebuahdaftar
list.BiasanyadigunakanuntukelemenLIpadaHTML.
<HTML>
<HEAD>
LI.satu{liststyletype:circle}
LI.dua{liststyletype:lowerroman}
LI.tiga{liststyletype:disc}
</STYLE>
</HEAD>
<BODY>
<LI CLASS="satu">Properti liststyletype digunakan untuk menentukan penanda pada daftar list.
BiasanyadigunakanuntukelemenLIpadaHTML.</LI>
<LI CLASS="dua">Properti liststyletype digunakan untuk menentukan penanda pada daftar list.
<LI CLASS="tiga">Properti liststyletype digunakan untuk menentukan penanda pada daftar list.
</BODY>
</HTML>
ListStyleImage
liststyleimage:url,none
Propertiliststyleimagedigunakanuntukmenggunakansebuahgambaruntuk
digunakansebagaipenandadaftarlist.Fungsinyasamasepertipropertiliststyle
type,tetapipadapropertiinipenandanyamenggunakansebuahgambar.Biasanya
digunakanuntukelemenLIpadaHTML.
<HTML>
16
<HEAD>
<TITLE>liststyleimage</TITLE>
LI.satu{liststyleimage:url(xball.bmp)}
</STYLE>
</HEAD>
<BODY>
<LI CLASS="satu">Properti liststyleimage digunakan untuk menggunakan sebuah gambar untuk
digunakan sebagai penanda daftar list. Fungsinya sama seperti properti liststyletype, tetapi pada
properti ini penandanya menggunakan sebuah gambar. Biasanya digunakan untuk elemen LI pada
HTML.</LI>
</BODY>
</HTML>
ListStylePosition
liststyleposition:inside,outside
Propertiliststylepositionmempunyaiduanilai,yaituinsideatauoutside.Nilai
outsideadalahnilaidefaultdaripropertiini.Propertiinimenentukandimana
penandaituditempatkan.Jikanilaiinsidedigunakan,barisakandiwrapdibawah
penandadaripadadiindent.BiasanyadigunakanuntukelemenLIpadaHTML.
<HTML>
<HEAD>
<TITLE>liststyleposition</TITLE>
LI.satu{liststyleimage:url(xball.bmp)liststyleposition:inside}
</STYLE>
</HEAD>
<BODY>
<LICLASS="satu">Propertiliststylepositionmempunyaiduanilai,yaituinsideatauoutside.Nilai
outsideadalahnilaidefaultdaripropertiini.Propertiinimenentukandimanapenandaitu
ditempatkan.Jikanilaiinsidedigunakan,barisakandiwrapdibawahpenandadaripadadiindent.
</BODY>
</HTML>
ListStyle
liststyle:liststyletype,liststyleposition,url
Propertiliststyleadalahsebuahjalanpintasuntukpropertiliststyletype,liststyle
position,danliststyleimage.
<HTML>
<HEAD>
LI.kotak1{liststyle:squareinside}
LI.kotak2{liststyle:squareoutside}
</STYLE>
</HEAD>
<BODY>
<LICLASS="kotak1">AkuInginMenjadi...???</LI>
<LICLASS="kotak2">AkuInginMenjadi...???</LI>
17
</BODY>
</HTML>
18
PropertiBox
MarginTop
margintop:length,persentase,auto
Propertimargintopdigunakanuntukmenentukanbatasmarginpadaposisiatasdari
sebuahelemen.Propertimargintopdapatditerapkanpadasemuaelemendan
propertimargintopmempunyainilaiawal,yaitu0.
<HTML>
<HEAD>
BODY{margintop: 40}
</STYLE>
</HEAD>
<BODY>
<P>Properti margintop digunakan untuk menentukan batas margin pada posisi atas dari sebuah
elemen.Propertimargintopdigunakanuntukmenentukanbatasmarginpadaposisiatasdarisebuah
elemen.</P>
</BODY>
</HTML>
MarginRight
marginleft:length,perseentase,auto
Propertimarginleftdigunakanuntukmenentukanbatasmarginpadaposisikiridari
sebuahelemen.Propertimarginleftdapatditerapkanpadasemuaelemendan
propertiinimempunyainilaiawal0.
<HTML>
<HEAD>
BODY{marginleft:40%}
</STYLE>
</HEAD>
<BODY>
<P>Properti marginleft digunakan untuk menentukan batas margin pada posisi kiri dari sebuah
elemen.Propertimarginleftdigunakanuntukmenentukanbatasmarginpadaposisikiridarisebuah
elemen.</P>
</BODY>
</HTML>
MarginBottom
marginbottom:length,persentase,auto
Propertimarginbottomdigunakanuntukmenentukanbatasmarginpadaposisi
bawahdarisebuahelemen.Propertimarginbottomdapatditerapkanpadasemua
elemendanpropertiinimempunyainilaiawal0.
19
<HTML>
<HEAD>
BODY{marginbottom:10em}
</STYLE>
</HEAD>
<BODY>
<P>Properti marginbottom digunakan untuk menentukan batas margin pada posisi bawah dari
sebuah elemen. Properti marginbottom digunakan untuk menentukan batas margin pada posisi
bawahdarisebuahelemen.Propertimarginbottomdigunakanuntukmenentukanbatasmarginpada
posisibawahdarisebuahelemen.</P>
</BODY>
</HTML>
MarginLeft
marginleft:length,persentase,auto
Propertimarginleftdigunakanuntukmenentukanbatasmarginpadaposisikiridari
sebuahelemen.Propertimarginleftdapatditerapkanpadasemuaelemendan
propertiinimempunyainilaiawal0.
<HTML>
<HEAD>
BODY{marginleft:50%}
</STYLE>
</HEAD>
<BODY>
<P>Properti marginleft digunakan untuk menentukan batas margin pada posisi kiri dari sebuah
elemen.</P>
</BODY>
</HTML>
Margin
margin:length,persentase,auto,marginleft,marginright,margintop,marginbottom
Propertimargindigunakansebagaijalanpintaspenerapanpropertipropertimargin
yangada(margintop,marginbottom,marginright,marginleft).
<HTML>
<HEAD>
P {margin:1em2em3em4em}
</STYLE>
</HEAD>
<BODY>
<P>Properti margin digunakan sebagai jalan pintas penerapan propertiproperti margin yang ada.
Properti margin digunakan sebagai jalan pintas penerapan propertiproperti margin yang ada.
20
Properti margin digunakan sebagai jalan pintas penerapan propertiproperti margin yang ada.
Propertimargindigunakansebagaijalanpintaspenerapanpropertipropertimarginyangada.</P>
</BODY>
</HTML>
PaddingTop
paddingtop:legth,persentase
Propertipaddingtopdigunakanuntukmenentukanberapabanyakruangspasi
diantaraborderbagianatasdanisidarisebuahelemen.
<HTML>
<HEAD>
P{
paddingtop:12%}
</STYLE>
</HEAD>
<BODY>
<P>Propertipaddingtopmenguraikanberapabanyakruangspasidiantaraborderbagianatasdanisi
dari selector.Properti paddingtop menguraikan berapa banyak ruang spasi diantara border bagian
atas dan isi dari selector. Properti paddingtop menguraikan berapa banyak ruang spasi diantara
borderbagianatasdanisidariselector.Propertipaddingtopmenguraikanberapabanyakruangspasi
diantara border bagian atas dan isi dari selector.Properti paddingtop menguraikan berapa banyak
ruangspasidiantaraborderbagianatasdanisidariselector.</P>
</BODY>
</HTML>
PaddingRight
paddingright:length,persentase
Propertipaddingrightdigunakanuntukmenetapkanberapabanyakruangspasi
diantaraborderbagiankanandanisidarisebuahelemen.
<HTML>
<HEAD>
P{paddingright:12%}
</STYLE>
</HEAD>
<BODY>
<P>Propertipaddingrightmenguraikanberapabanyakruangspasidiantaraborderbagiankanan
danisidariselector.Propertipaddingrightmenguraikanberapabanyakruangspasidiantaraborder
bagiankanandanisidariselector.Propertipaddingrightmenguraikanberapabanyakruangspasi
diantaraborderbagiankanandanisidariselector.</P>
</BODY>
</HTML>
PaddingBottom
paddingbottom:length,persentase
21
Propertipaddingbottommenguraikanberapabanyakruangspasidiantaraborder
bagianbawahdanisidarisebuahelemen.
<HTML>
<HEAD>
P{paddingbottom:12%}
</STYLE>
</HEAD>
<BODY>
<P>Propertipaddingbottommenguraikanberapabanyakruangspasidiantaraborderbagianbawah
dan isi dari selector. Properti paddingbottom menguraikan berapa banyak ruang spasi diantara
border bagian bawah dan isi dari selector. Properti paddingbottom menguraikan berapa banyak
ruangspasidiantaraborderbagianbawahdanisidariselector.</P>
</BODY>
</HTML>
PaddingLeft
paddingleft:length,persentase
Propertipaddingleftdigunakanuntukmenentukanberapabanyakruangspasi
diantaraborderbagiankiridanisidarisebuahelemen.
<HTML>
<HEAD>
<TITLE>paddingleft</TITLE>
P{paddingleft:12%}
</STYLE>
</HEAD>
<BODY>
<P>Propertipaddingleftmenguraikanberapabanyakruangspasidiantaraborderbagiankiridanisi
dari selector. Properti paddingleft menguraikan berapa banyak ruang spasi diantara border bagian
kiri dan isi dari selector. Properti paddingleft menguraikan berapa banyak ruang spasi diantara
borderbagiankiridanisidariselector.</P>
</BODY>
</HTML>
Padding
padding:length,persentase,paddingtop,paddingbottom,paddingright,paddingleft
Propertipaddingdigunakanuntukjalanpintasdalamhalmenerapkanproperti
propertipaddingyangada(paddingtop,paddingbottom,paddingleft,padding
right).
<HTML>
<HEAD>
P{
padding:2em4em5em}
</STYLE>
</HEAD>
<BODY>
22
<P>Propertipaddingdigunakanuntukjalan pintasdalam halmenerapkanpropertipropertipadding

yang ada. Properti padding digunakan untuk jalan pintas dalam hal menerapkan propertiproperti
padding yang ada. Properti padding digunakan untuk jalan pintas dalam hal menerapkan properti
properti padding yang ada. Properti padding digunakan untuk jalan pintas dalam hal menerapkan
propertiproperti padding yang ada. Properti padding digunakan untuk jalan pintas dalam hal
menerapkan propertiproperti padding yang ada. Properti padding digunakan untuk jalan pintas
dalamhalmenerapkanpropertipropertipaddingyangada.</P>
</BODY>
</HTML>
BorderTopWidth
bordertopwidth:thin,medium,thick,length
Propertibordertopwidthdigunakanuntukmenentukantebaldantipisgarisborder
padabagianatas.Gunakanpropertiinibersamaandenganpropertiborderstyle.
Propertiinidapatditerapkanpadasemuaelemendanmempunyainilaiawal
medium.
<HTML>
<HEAD>
<TITLE>bordertopwidth</TITLE>
P{bordertopwidth:34
borderstyle:solid}
</STYLE>
</HEAD>
<BODY>
<P>Propertibordertopwidthdigunakanuntukmenentukantebaldantipisgarisborderpadabagian
atas.Gunakanpropertiinibersamaandenganpropertiborderstyle.</P>
</BODY>
</HTML>
BorderRightWidth
borderrightwidth:thin,medium,thick,length
Propertiborderrightwidthdigunakanuntukmenentukantebaldantipisdarigaris
borderpadasebelahkanan.Propertiinidapatditerapkanpadasemuaelemendan
mempunyainilaiawalmedium.Gunakanpropertiinibersamaandenganproperti
borderstyle.
<HTML>
<HEAD>
P{borderrightwidth:34borderstyle:solid}
</STYLE>
</HEAD>
<BODY>
<P>Properti borderrightwidth digunakan untuk menentukan tebal dan tipis dari garis border pada
sebelahkanan.Propertiinidapatditerapkanpadasemuaelemendanmempunyainilaiawalmedium.
Gunakanpropertiinibersamaandenganpropertiborderstyle.</P>
</BODY>
</HTML>
23
BorderBottomWidth
borderbottomwidth:thin,medium,thick,length
Propertiborderbottomwidthdigunakanuntukmenentukantebaldantipisdarigaris
borderpadasebelahbawah.Propertiinidapatditerapkanpadasemuaelemendan
borderstyle.
<HTML>
<HEAD>
<TITLE>borderbottomwidth</TITLE>
P{borderbottomwidth:34borderstyle:solid}
</STYLE>
</HEAD>
<BODY>
<P>Propertiborderbottomwidthdigunakanuntukmenentukantebaldantipisdarigarisborderpada
sebelahbawah.Propertiinidapatditerapkanpadasemuaelemendanmempunyainilaiawalmedium.
</BODY>
</HTML>
BorderLeftWidth
borderleftwidth:thin,medium,thick,length
Propertiborderleftwidthdigunakanuntukmenentukantebaldantipisdarigaris
borderpadasebelahkiri.Propertiinidapatditerapkanpadasemuaelemendan
borderstyle.
<HTML>
<HEAD>
<TITLE>borderleftwidth</TITLE>
P{borderleftwidth:34borderstyle:solid}
</STYLE>
</HEAD>
<BODY>
<P>Properti borderleftwidth digunakan untuk menentukan tebal dan tipis dari garis border pada
sebelah kiri. Properti ini dapat diterapkan pada semua elemen dan mempunyai nilai awal medium.
</BODY>
</HTML>
BorderWidth
borderwidth:thin,medium,thick,length,bordertopwidth,borderbottomwidth,borderrightwidth,
borderleftright.
Propertiborderwidthadalahjalanpintasuntukmenentukantebaldantipisnyagaris
borderpadakeempatsisi(bordertopwidth,borderbottomwidth,borderright
width,borderleftright).Propertiinidapatditerapkanpadasemuaelemen.
24
<HTML>
<HEAD>
<TITLE>borderwidth</TITLE>
P{borderwidth:5101520borderstyle:solid}
</STYLE>
</HEAD>
<BODY>
<H1>Propertiborderwidth</H1>
<P>Propertiborderwidthadalahjalanpintasuntukmenentukantebaldantipisnyagarisborderpada
keempatsisi.Propertiinidapatditerapkanpadasemuaelemen.</P>
<P>Propertiborderwidthadalahjalanpintasuntukmenentukantebaldantipisnyagarisborderpada
keempatsisi.Propertiinidapatditerapkanpadasemuaelemen.</P>
</BODY>
</HTML>
BorderColor
bordercolor:color
Propertibordercolordigunakanuntukmenentukanwarnadarigarisborderuntuk
keempatgarisborderyangada(bordertopwidth,borderbottomwidth,border
rightwidth,borderleftright).
<HTML>
<HEAD>
P{bordercolor:blueyellowgreenoliveborderstyle:solid}
</STYLE>
</HEAD>
<BODY>
<P>Propertibordercolordigunakanuntukmenentukanwarnadarigarisborderuntukkeempatgaris
borderyangada.</P>
</BODY>
</HTML>
BorderStyle
borderstyle:none,dotted,dashed,solid,double,groove,ridge,inset,outset
Propertiborderstyledigunakanuntukmenentukanstylegarisborderyangakan
digunakan.
<HTML>
<HEAD>
P{borderstyle:dotteddashedsoliddouble}
</STYLE>
</HEAD>
<BODY>
<P>Propertiborderstyledigunakanuntukmenentukanstylegarisborderyangakandigunakan.</P>
</BODY>
</HTML>
25
BorderTop
bordertop:bordertopwidth,borderstyle,color
Propertibordertopdigunakansebagaijalanpintasuntukmenerapkanproperticolor,
bordertopwidth,danborderstyle,tentunyapadagarisborderbagianatas.
<HTML>
<HEAD>
P{bordertop:solid5blue}
</STYLE>
</HEAD>
<BODY>
<P>Propertibordertopdigunakansebagaijalanpintasuntukmenerapkanproperticolor,bordertop
width,danborderstyle,tentunyapadagarisborderbagianatas.</P>
</BODY>
</HTML>
BorderRight
borderright:bordertopwidth,borderstyle,color
Propertiborderrightdigunakansebagaijalanpintasuntukmenerapkanproperti
color,bordertopwidth,danborderstyle,tentunyapadagarisborderbagiankanan.
<HTML>
<HEAD>
<TITLE>borderstyle</TITLE>
P{borderright:solid5blue}
</STYLE>
</HEAD>
<BODY>
<P>Propertiborderrightdigunakansebagaijalanpintasuntukmenerapkanproperticolor,border
topwidth,danborderstyle,tentunyapadagarisborderbagiankanan.</P>
</BODY>
</HTML>
BorderBottom
borderbottom:bordertopwidth,borderstyle,color
Propertiborderbottomdigunakansebagaijalanpintasuntukmenerapkanproperti
color,bordertopwidth,danborderstyle,tentunyapadagarisborderbagianbawah.
<HTML>
<HEAD>
</TITLE>Propertiborderbottom</TITLE>
P{borderbottom:solid5blue}
</STYLE>
</HEAD>
<BODY>
26
<P>Propertiborderbottomdigunakansebagaijalanpintasuntukmenerapkanproperticolor,border
topwidth,danborderstyle,tentunyapadagarisborderbagianbawah.</P>
</BODY>
</HTML>
BorderLeft
borderleft:bordertopwidth,borderstyle,color
Propertiborderleftdigunakansebagaijalanpintasuntukmenerapkanproperticolor,
bordertopwidth,danborderstyle,tentunyapadagarisborderbagiankiri.
<HTML>
<HEAD>
</TITLE>Propertiborderleft</TITLE>
P{borderleft:solid5blue}
</STYLE>
</HEAD>
<BODY>
<P>Propertiborderleftdigunakansebagaijalanpintasuntukmenerapkanproperticolor,bordertop
width,danborderstyle,tentunyapadagarisborderbagiankiri.</P>
</BODY>
</HTML>
Border
border:borderwidth,borderstyle,color
Propertiborderdigunakansebagaijalanpintasuntukmenerapakanproperticolor,
borderwidth,danborderstyle,tentunyapadagarisborderpadakeempatsisi.
<HTML>
<HEAD>
</TITLE>Propertiborder</TITLE>
P{border:solid5blue}
</STYLE>
</HEAD>
<BODY>
<P>Properti border digunakan sebagai jalan pintas untuk menerapakan properti color, bordertop
width,danborderstyle,tentunyapadagarisborderpadakeempatsisi.</P>
<P>Properti border digunakan sebagai jalan pintas untuk menerapakan properti color, bordertop
width,danborderstyle,tentunyapadagarisborderpadakeempatsisi.</P>
</BODY>
</HTML>
Width
width:length,persentase,auto
PropertiwidthdigunakanuntukmenentukanlebardarielemenelemensepertiIMG,
INPUT,TEXTAREA,SELECT,danOBJECT.
<HTML>
27
<HEAD>
IMG{width:15em}
</STYLE>
</HEAD>
<BODY>
<IMGSRC="gambar.jpg">
</BODY>
</HTML>
Height
height:length,persentase,auto
PropertiheightdigunakanuntukmenentukantinggidarielemenelemensepertiIMG,
INPUT,TEXTAREA,SELECT,danOBJECT.
<HTML>
<HEAD>
IMG{height:15emwidth:15em}
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Float
float:left,right,none
Propertifloatmengizinkankitauntukmembungkusteksdisekitarsebuahelemen.Ini
samasepertipenerapanatributALIGN="left"danALIGN="right"padaelemenIMG,
tetapipadaCSS1.0kitadiperbolehkanuntukmenerapkanpropertiinipadasemua
elemen.
<HTML>
<HEAD>
IMG{float:right}
P{float:left}
</STYLE>
</HEAD>
<BODY>
<P>Properti float mengizinkan kita untuk membungkus teks disekitar sebuah elemen. Ini sama
seperti penerapan atribut ALIGN=left dan ALIGN=right untuk elemen IMG, tetapi pada CSS1 kita
diperbolehkanuntukditerapkanpadasemuaelemen.</P>
</BODY>
</HTML>
Clear
clear:none,left,right,both
28
Properticleardigunakanuntukmengizinkanelemenelemenyangdiformatdengan
propertifloatditempatkanpadasisisisielemenelemenyangdiformatdengan
properticlear.FungsiproperticlearsamafungsinyasepertipadaelemenBRdi
HTML.
<HTML>
<HEAD>
IMG{clear:right}
P{float:left}
</STYLE>
</HEAD>
<BODY>
<P>Properticleardigunakanuntukmengizinkanelemenelemenyangdiformatdenganpropertifloat
ditempatkanpadasisisisielemenelemenyangdiformatdenganproperticlear.</P>
</BODY>
</HTML>
29
PropertiColordanBackground
Color
color:color
Properticolordigunakanuntukmenentukanwarnalatarbelakangdarisebuah
elemenyangditetapkanatauuntukmenentukanwarnateks.Properticolordapat
diterapkanpadasemuaelemendannilaiawalnyaditentukanolehbrowser.
<HTML>
<HEAD>
H1{color:blue}
H2{color:#000080}
H3{color:#0c0}
</STYLE>
</HEAD>
<BODY>
<H1>Properticolor</H1>
</BODY>
</HTML>
BackgoundColor
backgroundcolor:color,transparent
Propertibackgoundcolordigunakanuntukmenentukanwarnalatarbelakangpada
sebuahelemen.Nilaiawalpropertiiniadalahtransparent.
<HTML>
<HEAD>
BODY{backgroundcolor:blue}
H1{backgroundcolor:#000080}
</STYLE>
</HEAD>
<BODY>
<H1>Propertibackgroundcolor</H1>
<P>Properti backoundcolor digunakan untuk menentukan warna latar belakang pada sebuah
elemen.Nilaiawalpropertiiniadalahtransparent.</P>
</BODY>
</HTML>
BackgroundImage
backgroundimage:url,none
Propertibackgroundimagedigunakanuntukmenetapkansebuahgambaruntuk
dijadikansebagailatarbelakangdarisebuahelemen.Nilaiawalpropertiiniadalah
none,yangberartitidakditerapkan.Nilaiurladalahalamatdarifilegambaritu
disimpan.
30
<HTML>
<HEAD>
BODY{backgroundimage:url(gambar.jpg)}
</STYLE>
</HEAD>
<BODY>
<P>Propertibackgroundimagedigunakanuntukmenetapkansebuahgambaruntukdijadikan
sebagailatarbelakangdarisebuahelemen.Nilaiawalpropertiiniadalahnone,yangberartitidak
diterapkan.Nilaiurladalahalamatdarifilegambaritudisimpan.</P>
</BODY>
</HTML>
BackgroundRepeat
backgroundrepeat:repeat,repeatx,repeaty,norepeat
Propertibackgroundrepeatdigunakanuntukmenetapkanapakahgambaryang
menjadilatarbelakangditampilkansecaraberulangatautidak.Propertiinidapat
diterapkanpadasemuaelemendannilaiawalnyaadalahrepeat.
<HTML>
<HEAD>
BODY{
background:whiteurl(gambar.jpg)
backgroundrepeat:repeatx
}
</STYLE>
</HEAD>
<BODY>
<P>Properti backgroundrepeat digunakan untuk menetapkan apakah gambar yang menjadi latar
belakang ditampilkan secara berulang atau tidak. Properti ini dapat diterapkan pada semua elemen
dannilaiawalnyaadalahrepeat.</P>
</BODY>
</HTML>
BackgroundAttachment
backgroundattachment:scroll,fixed
Propertibackgroundattachmentdigunakanuntukmenentukanapakahlatar
belakangberupagambardapatdigulungbersamaandenganisiyangadapada
jendelaatauapakahhanyaisiyangadapadajendelasajayangdapatdigulung
sedangkangambaryangmenjadilatarbelakangitutetapatautidakdapatdigulung.
Propertiinidapatditerapkanadasemuaelemendannilaiawaldaripropertiini
adalahscroll.
<HTML>
<HEAD>
BODY{background:whiteurl(gambar.jpg)
backgroundattachment:fixed}
31
</STYLE>
</HEAD>
<BODY>
<P>Properti backgroundattachment digunakan untuk menentukan apakah latar belakang berupa
gambardapatdigulungbersamaandenganisiyangadapadajendelaatauapakahhanyaisiyangada
padajendelasajayangdapatdigulungsedangkangambaryangmenjadilatarbelakangitutetapatau
tidakdapatdigulung.Propertiinidapatditerapkanadasemuaelemendannilaiawaldaripropertiini
adalahscroll.</P>
adalahscroll.</P>
adalahscroll.</P>
adalahscroll.</P>
adalahscroll.</P>
adalahscroll.</P>
</BODY>
</HTML>
BackgroundPosition
backgroundposition:persentase,length,top,center,bottom,left,right
Propertibackgroundpositiondigunakanuntukmenetapkantataletakdarisebuah
latarbelakang.Nilaiawaldaripropertiiniadalah0%0%.Biasanyapropertiini
diterapkanpadaelemenIMG,INPUT,TEXTAREA,SELECT,danOBJECT.
<HTML>
<HEAD>
BODY{backgroundposition:center}
</STYLE>
</HEAD>
<BODYBACKGROUND="gambar.jpg">
<P>Propertibackgroundpositiondigunakanuntukmenetapkantataletakdarisebuahlatarbelakang.
Nilaiawaldaripropertiiniadalah0%0%.BiasanyapropertiiniditerapkanpadaelemenIMG,INPUT,
TEXTAREA,SELECT,danOBJECT.</P>
</BODY>
</HTML>
32
Background
Propertibackgroundadalahsebuahjalanpintasuntukmenerapkannilainilaidari
propertipropertibackgoundyangada(backgroundcolor,backgroundimage,
backgroundrepeat,backgroundattachment,backgroundposition).Nilainilainya
harusdipisahkandenganspasi.
<HTML>
<HEAD>
P{background:blackurl(gambar.jpg)}
</STYLE>
</HEAD>
<BODY>
<P>Propertibackgroundpositiondigunakanuntukmenetapkantataletakdarisebuahlatarbelakang.
Nilaiawaldaripropertiiniadalah0%0%.BiasanyapropertiiniditerapkanpadaelemenIMG,INPUT,
TEXTAREA,SELECT,danOBJECT.</P>
</BODY>
</HTML>
NOTES:
SEMOGATAMBAHRAJINBELAJARDANTAMBAHPINTAR,ANDADAPATMENDOWNLOADFILEFILE
LAINNYAPADA:http://WaNeWaAki.blogspot.com
33

Referensi Panduan Belajar Css

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Referensi Panduan Belajar Css

Diunggah oleh

Hak Cipta:

Format Tersedia

ReferensiCSS1.

<P>Propertipaddingdigunakanuntukjalan pintasdalam halmenerapkanpropertipropertipadding

Anda mungkin juga menyukai