i { color:blue; i { color:blue;
CSS Selektor-Kontekstual Contextual Selector
Text
html head
titleCSS_01title style type=textcss
b,i { color:blue; b,i { color:blue;
text-decoration:underline; }
style head
body
bUniversitas Narotama Surabayab br
iFakultas Ilmu Komputeri
body html
Catatan: selector ini kesemuanya untuk bold+italic text
NEXT BACK
CSS Cascading Style Sheet
Perbedaan CSS pewarisan inheritance dengan CSS Selektor-Kontekstual Contextual Selector
html head
titleCSS Inheritancetitle html
head titleSelektor-Kontekstualtitle
Pewarisan inheritance
Selektor Kontekstual Contextual Selector
titleCSS Inheritancetitle style type=textcss
b { color:blue; text-decoration:underline } i { color:blue; text-decoration:underline }
style head
body
bUniversitas Narotama Surabayab br
iFakultas Ilmu Komputeri
body html
titleSelektor-Kontekstualtitle style type=textcss
b,i { color:blue; text-decoration:underline;
} style
head body
bUniversitas Narotama Surabayab br
iFakultas Ilmu Komputeri
body html
NEXT BACK
CSS Cascading Style Sheet
Aturan CSS berdasarkan case to case
html head
titleCSS_01title head
head body
Universitas Narotama Surabaya br
b style=color:lime Fakultas Ilmu Komputer
b
body html
TIDAK EFEKTIF
NEXT BACK
CSS Cascading Style Sheet
Text
html head
titleCSS_02title style type=textcss
i { color:ff3333 } i { color:ff3333 }
style head
body Universitas Narotama Surabaya
br iFakultas Ilmu Komputeri
body html
NEXT BACK
CSS Cascading Style Sheet
Text
html head
titleCSS_03title style type=textcss
u { color:3333CC } u { color:3333CC }
style head
body Universitas Narotama Surabaya
br uFakultas Ilmu Komputeru
body html
NEXT BACK
CSS Cascading Style Sheet
Text
html head
titleCSS_04title style type=textcss
h3 { color:009900 } h3 { color:009900 }
style head
body h3Fakultas Ilmu Komputerh3
body html
NEXT BACK
CSS Cascading Style Sheet
Text
html head
titleCSS_05title style type=textcss
h2 { color:009900 } h2 { color:009900 }
h3 { color:FF3333 }
style head
body
h2Sistem Informasih2 br
h3Sistem Komputerh3
body html
NEXT BACK
CSS Cascading Style Sheet
Text
html head
titleCSS_07title style type=textcss
b,i { color:blue;
text-decoration:
- underline tampil garis dibawah text - overline tampil garis diatas text
- line-trough tampil garis melalui text - none non-efek
b,i { color:blue;
text-decoration:underline; font-family:Tahoma;
} style
head body
bUniversitas Narotama Surabayab br
iFakultas Ilmu Komputeri
body html
NEXT BACK
CSS Cascading Style Sheet
Text
html head
titleCSS_08title style type=textcss
b,i { color:blue; text-decoration:underline;
text-decoration:underline; font-family:Tahoma;
font-size: 28px; }
style head
body
bUniversitas Narotama Surabayab br
iFakultas Ilmu Komputeri
body html
NEXT BACK
CSS Cascading Style Sheet
• Soal 1
Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:
NEXT BACK
PREVIEW
CSS Cascading Style Sheet
• Soal 2
Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:
NEXT BACK
PREVIEW
CSS Cascading Style Sheet
• Soal 3
Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:
END PREVIEW
CSS Cascading Style Sheet
Text
html head
titleCSS_09title style type=textcss
i { color:blue; text-decoration:underline;
text-decoration:underline; font-family:Tahoma;
font-size:14px; font-weight:bold;
} style
head body
iUniversitas Narotama Surabayai body
html
NEXT
font-weight:
- normal - bold
CSS Cascading Style Sheet
Text
html head
titleCSS_10title style type=textcss
p { color:blue; font-family:Tahoma;
font-family:Tahoma; font-size:14px;
font-weight:bold; font-style:italic;
} style
head body
pUniversitas Narotama Surabayap body
html
NEXT BACK
CSS Cascading Style Sheet
Text
html head
titleCSS_11title style type=textcss
p { color:blue; font-family:Tahoma;
font-variant: small-caps mengganti semua kar.lower-case
dengan kar.upper-case
none tanpa efek
font-family:Tahoma; font-size:14px;
font-weight:bold; font-variant:small-caps;
} style
head body
pUniversitas Narotama Surabayap body
html
NEXT BACK
Catatan: font-variant tidak berlaku pada browser Netscape
CSS Cascading Style Sheet
Text
html head
titleCSS_12title style type=textcss
p { color:blue;
text-transform: capitalize Kar.pertama huruf besar
uppercase Semua kar. huruf besar lowercase Semua kar. Huruf kecil
p { color:blue; font-family:Tahoma;
text-transform:lowercase;
} style
head body
pUNIVERSITAS NAROTAMA SURABAYAp body
html
NEXT BACK
CSS Cascading Style Sheet
Text
html head
titleCSS_13title style type=textcss
p { color:blue; p { color:blue;
font-family:Tahoma;
letter-spacing:10px;
} style
head body
pUNIVERSITAS NAROTAMAp body
html
NEXT BACK
letter-spacing = mengendalikan jumlah spasi antar karakter
CSS Cascading Style Sheet
Text
html head
titleCSS_14title style type=textcss
p { color:blue; p { color:blue;
font-family:Tahoma;
text-indent:30px;
} style
head body
pUNIVERSITAS NAROTAMAp body
html
NEXT BACK
text-indent = membuat indent untuk awal paragraf
CSS Cascading Style Sheet
Body
html head
titleCSS_15title style type=textcss
body body
{ background-color:blue;
}
style head
body body
html
NEXT BACK
CSS Cascading Style Sheet
Body
html head
titleCSS_16title style type=textcss
body body
{ background-image: urlbg.jpg;
} style
head body
body html
NEXT BACK
CSS Cascading Style Sheet
Catatan:
Nilai list-style-type:
disc - efek lingkaran circle - efek persegi empat
NEXT BACK
circle - efek persegi empat square - efek lingkaran yang transparan
decimal - 1,2,3,…dst lower-roman - i,ii,iii,…dst
upper-roman - I,II,III,…dst lower-alpha - a,b,c,…dst
upper-alpha - A,B,C,…dst None - Tanpa Efek
CSS Cascading Style Sheet
Bullet Numbering
html head
titleCSS_17title style type=textcss
li { list-style-type:square;
font-weight:bold; font-weight:bold;
} style
head body
h3Fakultas Ilmu Komputerh3 ol
liSistem Informasili liSistem Komputerli
ol
body html
NEXT BACK
CSS Cascading Style Sheet
• Soal 4
Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:
NEXT BACK
PREVIEW
CSS Cascading Style Sheet
• Soal 5
Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:
NEXT BACK
PREVIEW
CSS Cascading Style Sheet
• Soal 6
Tuliskan Source Code dari tampilan berikut dengan menggunakan CSS:
END PREVIEW
CSS Cascading Style Sheet
Link
Link Properties:
• A:link
• A:link
• A:hover
• A:active
NEXT
CSS Cascading Style Sheet
Link
Definisi style link:
• A:link - memberikan efek pada saat normal unlink
• A:link - memberikan efek pada saat normal unlink
• A:hover - memberikan efek pada saat mouse pointer diatas
object
•
A:active - memberikan efek setelah event click
NEXT BACK
CSS Cascading Style Sheet
Link
html head
titleCSS_18title style type=textcss
a { color: 000000; kode warna hitam a { color: 000000; kode warna hitam
text-decoration: none; }