You are on page 1of 10

Aqwam Rosadi K

MATERI
CASCADING STYLE SHEETS (CSS)
Tujuan :
1. Memahami tentang konsep CSS
1. Memahami aturan penulisan pada CSS
2. Memahami selector sebagai pengontrol design
3. Memahami pembuatan background
4. Memformat text pada web
5. Memahami pengaturan bentuk font
. Membuat pengaturan tabel dan pewarnaann!a
". Membuat h!perlink dan tombol !ang menarik
I. KONSEP CSS
Apa itu CSS :
#eature untuk membuat d!namic $%M&.
St!le sheet mendeskripsikan bagaimana tampilan document $%M& di la!ar 'template(
Membuat special efek 'mendefinisikan st!le untuk )$1* dengan st!le bold dan italic dan
berwarna biru(
Support ke semua browser.
Aturan penulian :
+ilai untuk propert! tidak boleh dalam tanda petik.
contoh , color , green-
+ama propert! bersifat case sensiti.e.
color , green-
propert! , color
.alue , green
Cara pen!!unaan CSS :
/xternal St!le Sheet
0entuk ,
)link rel12st!lesheet3 t!pe12text4css3 href12css5files.css3*
dimana ,
)link6 merupakan tag pembuka diakhiri dengan tanda 2*3
rel12st!lesheet36 menerangkan halaman ini akan dikenai efek st!le sheet
t!pe12text4css36 file !ang dipanggil berupa css
href12css5files.css36 alamat dokumen st!lesheet !ang dipanggil
Contoh 7enggunaan ,
script efek.css
bod! 8
color, green-
1
Aqwam Rosadi K
background, white-
font9famil! , arial-
:
;nternal St!le Sheet
0entuk umum ,
)st!le t!pe12text4css3*
<definisi st!le<
)4st!le*
Contoh 7enggunaan ,
;nline St!le sheet
Contoh 7enggunaan ,
2
)$%M&*
)$/=>*
)%;%&/*centranet)4%;%&/*
)&;+? @/&1AS%B&/S$//%A
%B7/1Atext4cssA $@/#1Aefek.cssA*
)4$/=>*
)0C>B*

)$1*7/+S ;%S)4$1*

)7* 7/+S ;%S adalah kampus teknik !ang
concern ke bidang elektro
)40C>B*
"HTML#
"HEAD#
"TITLE#$entranet"%TITLE#
"STYLE t&pe'(te)t%$(#
*+,& -
$+l+r: ./ite0
*a$1!r+un,: !reen0
2+nt32a4il& : arial0
5
"%STYLE#
"%HEAD#
"6ODY#

"H7#8e2net"%H7#

"P#8e2net a,ala/ e*ua/ .e* De9el+per ,an Linu) Center
"%6ODY#
"%HTML#
)$%M&*
)$/=>*
)%;%&/*centranet)4%;%&/*
)4$/=>*
)0C>B st!le1Acolor, white-
background, green-
font9famil! , arial-2 *
)$1*D/#+/%)4$1*
)7*D/#+/% adalah sebuah web
>e.eloper dan &inux Center
)40C>B*
)4$%M&*
Aqwam Rosadi K
II. AT:RAN PEN:LISAN PADA CSS
S!ntaxis CSS dibagi dalam 3 bagian ,
selector 8propert! , .alue:
dimana ,
selector , tag $%M& !ang akan didefinisikan 'bod!6 $16 &ink 6 dll(.
propert! , atribut !ang akan diubah
Cara penulisan ,
#C+%9#=M;&B , sans9serif-
#C+%9S;D/ , small-
Cara penulisan !ang salah ,
#C+%9#=M;&B , 2sans9serif3-
#C+%9S;D/ , EsmallF-
Cara mendeklarasikan kelompok , 'tanda koma serta G(
$16 $2 8color , green:-
$36 $4 G $5 8color , red:-
Cara menuliskan komentar ,
Menggunakan tanda , 4H <.. H4
Menggunakan tanda , )I99 9 9 *
0entuk ukuran ,
:1uran Keteran!an
em Jntuk menentukan ukuran !ang pecahan 'desimal(
ex x9height6 digunakan untuk menentukan ukuran !ang
sifatn!a .ertikal
px 7ixels6 menentukan ukuran !ang bersifat pixel 'la!ar
monitor( seperti ukuran huruf.
III. SELECTOR SE6AGAI PENGONTROL DESIGN
1. Selector untuk merubah bod!.
)$%M&*
)$/=>*
)%;%&/* Selector )4%;%&/*
)st!le t!pe1Atext4cssA*
bod!
8
#C+%9#=M;&B, Kene.a6 =rial-
#C+%9S;D/, 2Lpx-
color, red-
0=C?K@CJ+>9CC&C@, green-
:
)4st!le*
)4$/=>*
)0C>B*
$alaman efect CSS
3
Aqwam Rosadi K
)40C>B*
)4$%M&*
2. Menis9Nenis selector
a. Selector bebas
)$%M&*
)$/=>*
)%;%&/* Selector )4%;%&/*
)st!le t!pe1Atext4cssA*
!*a.a/-
TE;T3DECORATION: un,erline0
:
)4st!le*
)4$/=>*
)0C>B*
"!*a.a/# E2e$t Gari 6a.a/ ,en!an
Sele$t+r 6e*a "%!*a.a/#
)40C>B*
)4$%M&*
b. Selector dengan class
)$%M&*
)$/=>*
)%;%&/* Selector )4%;%&/*
)st!le t!pe1Atext4cssA*
.ri!/t - te)t3ali!n : ri!/t 5
)4st!le*
)4$/=>*
)0C>B*
)h2 $la'(ri!/t(*Class $eading 2 )4h2*
)p $la'(ri!/t(* Class 7aragraf)4p*
)40C>B*
)4$%M&*
c. Selector ;d
)$%M&*
)$/=>*
)%;%&/* Selector )4%;%&/*
)st!le t!pe1Atext4cssA*
<6ODY=77> -
?ONT3SI8E: @Ap)0
TE;T3DECORATION: un,erline0
COLOR: *lue0
?ONT3?AMILY:C+4i$ San MS0
5
)4st!le*
)4$/=>*
)0C>B i,'(6ODY=77>(*
Menggunakan ;> Selector
)40C>B*
)4$%M&*
IB. MEM?ORMAT HALAMAN CE6
1. #ormat dengan margin
)$%M&*
)$/=>*
)%;%&/*7engaturan Margin)4%;%&/*
)S%B&/ 1Atext4cssA*
6ODY
-
4ar!in3t+p : 7$40
4ar!in3ri!/t : @$40
4ar!in3*+tt+4 : 7$40
4ar!in3le2t : @$40
5
)4S%B&/*
)4$/=>*
)0C>B*
7engaturan Margin $alaman
'1cm62cm61cm62cm(
)40C>B*
)4$%M&*
2. 7emetaan menggunakan padding
7adding hampir sama dengan margin ,
a. Margin han!a digunakan untuk membuat
batasan9batasan sisi halaman.
b. 7adding dapat membuat batasan9batasan pada
komponen web lain seperti tabel6 disamping
pengaturan batas halaman.
)$%M&*
)$/=>*
)%;%&/*7engaturan Margin)4%;%&/*
)S%B&/ 1Atext4cssA*
6ODY -
pa,,in!3t+p : 7AD0
pa,,in!3ri!/t : @AD0
pa,,in!3*+tt+4 : EAD0
4
Aqwam Rosadi K
pa,,in!3le2t: @AD0
5
)4S%B&/*
)4$/=>*
)0C>B*
%ext ini berada di tengah halaman 6
karna di lakukan pengaturan halaman
dengan menggunakan padding atas 1LO6
kanan 2LO6bawah 4LO6dan kiri 2LO.
)40C>B*
)4$%M&*
B. MEM6:AT 6ACKGRO:ND
1. 0ackground warna
)$%M&*
)$/=>*
)%;%&/*Menggunakan 0ackground
Parna)4%;%&/*
)S%B&/ t!pe1Atext4cssA*
6ODY - *a$1!r+un,3$+l+r : &ell+.5
)4S%B&/*
)4$/=>*
)0C>B*
$alaman ini di buat 0erwarna ?uning
)40C>B*
)4$%M&*
2. 0ackground campuran
)$%M&*
)$/=>*
)%;%&/*Menggunakan 0ackground
Parna)4%;%&/*
)S%B&/ 1Atext4cssA*
*+,& -*a$1!r+un,3$+l+r : <FFCC??5
/@ -*a$1!r+un, : !reen5
/G -*a$1!r+un,3$+l+r : tranparent5
p -*a$1!r+un, : r!*(@EAH@EIH@>>)5
)4S%B&/*
)4$/=>*
)0C>B*
)h2*$eader 260ackground $iNao)4h2*
)h3*$eader 3 6 0akground %ransparan)4h3*
)p*0ackground pada paragraph)4p*
)40C>B*
)4$%M&*
3. 0ackground gambar
Pr+pertie Balue Keteran!an
background9
image
url =lamat gambar
!ang dituNu
background9
repeat
repeat
repeat9x
repeat9!
no9repeat
>iulang dlm hal
>iulang sumbu x
>iulang sumbu !
%ampil 1 gbr
0ackground9
position
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x9O !9O
x9pos !9pos
=tas kiri hal
=tas tngh hal
=tas kanan hal
%gh kiri hal
7usat hal
%ngh kanan hal
0wh kiri hal
0wh tgh hal
0wh kanan hal
7akai nilai O
Contoh 1 :
)$%M&*
)$/=>*
)%;%&/*Menggunakan 0ackground
Kambar)4%;%&/*
)S%B&/ 1Atext4cssA*
6ODY
-
*a$1!r+un,3i4a!e:
url((,ru4.Jp!()0
*a$1!r+un,3repeat: repeat3)0
5
)4S%B&/*
)4$/=>*
)0C>B*
0ackground 0erulang pada Sumbu Q
)40C>B*
)4$%M&*
Contoh 2 :
)$%M&*
)$/=>*
)%;%&/*Menggunakan 0ackground
Kambar)4%;%&/*
)S%B&/ 1Atext4cssA*
6ODY
-
*a$1!r+un,3i4a!e:url ((4+t+r.Jp!()0
*a$1!r+un,3repeat: n+3repeat0
5
Aqwam Rosadi K
*a$1!r+un,3p+iti+n: $enter $enter0
5
)4S%B&/*
)4$/=>*
)0C>B*
0ackground di 7usat $alaman
)40C>B*
)4$%M&*
BI. ?ORMAT TE;T PADA CE6
Pr+pertie Balue Keteran!an
Pengaturan warna
color green6 dll
Pengaturan Spasi (jrk antar karakter)
letter9spacing +ormal
&ength
Jkrn standar $%M&
Jkrn panNang
'cm6px(
Perataan Tet
text9align left
right
center
Nustif!
text9decoration none
underline
o.erline
line9through
blink
0entuk standar
0ergaris bwh
0ergaris atas
%ext dicoret
%ext berkedip
Pengaturan tet indentasi
text9indent length
O
>engn cm6 px
>engan persentase
Pengu!ahan "entuk Karakter
text9transform capitaliRe
uppercase
lowercase
none
Contoh 1 :
)$%M&*
)$/=>*
)%;%&/*#ormat %ext )4%;%&/*
)S%B&/ 1Atext4cssA*
p -$+l+r : !reen0 letter3pa$in!: A.>$45
/E -letter3pa$in!: 3@p)5
)4S%B&/*
)4$/=>*
)0C>B*
)p*7engaturan Spasi 7ada 7aragraph
)4p*
)h4* $eader 4)4h4*
)40C>B*
)4$%M&*
Contoh 2 :
)$%M&*
)$/=>*
)%;%&/*#ormat %ext )4%;%&/*
)S%B&/ 1Atext4cssA*
/7 -te)t3ali!n: $enter5
/@ -te)t3ali!n: le2t5
/G -te)t3ali!n: ri!/t5
)4S%B&/*
)4$/=>*
)0C>B*
)h1*$eader 16>i tengah)4h1*
)h2*$eader 2 6 >i kiri)4h2*
)h3*$eader 3 6>i kanan)4h3*
)40C>B*
)4$%M&*
Contoh # :
)$%M&*
)$/=>*
)%;%&/*#ormat %ext )4%;%&/*
)S%B&/ 1Atext4cssA*
e4 -te)t3,e$+rati+n : +9erline5
/@ -te)t3,e$+rati+n: *lin15
/G -te)t3,e$+rati+n: un,erline5
a -te)t3,e$+rati+n: n+ne5
)4S%B&/*
)4$/=>*
)0C>B*
)em*0entuk C.erline)4em*
)h2*$eader 26 0entuk &ine9
through)4h2*
)h3*$eader 360entuk Jnderline)4h3*
)p* )a href1Ahttp,44lecturer.eepis9
its.edu4SRenhadiA*
7enggunaan >alam &ink6+ilai +C+/)4a*)4p*
)40C>B*
)4$%M&*
Contoh $ :
)$%M&*
)$/=>*
)%;%&/*#ormat %ext )4%;%&/*

Aqwam Rosadi K
)S%B&/ 1Atext4cssA*
p.*ear -te)t3tran2+r4: upper$ae5
p.1e$il -te)t3tran2+r4: l+.er$ae5
)4S%B&/*
)4$/=>*
)0C>B*
)p class1AbesarA*
pengubahan kedalam hurup 0esar
)4p*
)p class1AkecilA*
7/+KJ0=$=+ ?/>=&=M $J@J# ?/C;&
)4p*
)40C>B*
)4$%M&*
BII. PENGAT:RAN ?ONT
Pr+pertie Balue Keteran!an
%enis &ont
font9famil! arial6 dll
'kuran (uru)
#ont9siRe Small
Medium
&arge
&ength
O
?ecil
Menengah
0esar
0esar font 'pt6px(
7ersentase
Pengaturan ga*a pada )ont
font9st!le normal
italic
obliTue
Kete!a+an huru)
font9weight +ormal
bold
1LL S ULL
Contoh 1 :
)$%M&*
)$/=>*
)%;%&/*7engaturan #ont)4%;%&/*
)S%B&/ 1Atext4cssA*
p.itali$
-
2+nt3iKe :@AA D 0
2+nt3t&le: itali$0
5
p.n+r4al-
2+nt32a4il& : 9er,ana 0
2+nt3t&le: n+r4al0
5
p.+*liLue -2+nt3t&le: +*liLue5
)4S%B&/*
)4$/=>*
)0C>B*
)7 class1AitalicA*Menggunakan St!le
;talic)47*
)7 class1AnormalA*Menggunakan St!le +ormal
)47*
)7 class1AobliTueA*Menggunakan St!le
CblieTue)47*
)40C>B*
)4$%M&*
Contoh 2 :
)$%M&*
)$/=>*
)%;%&/*7engaturan #ont)4%;%&/*
)S%B&/ 1Atext4cssA*
p.n+r4al
-
2+nt32a4il& : 9er,ana 0
2+nt3.ei!/t: n+r4al0
5
p.t/i$1
-
2+nt32a4il& : 9er,ana 0
2+nt3.ei!/t: *+l,0
5
p.t/i$1er
-
2+nt32a4il& : ti4e 0
2+nt3.ei!/t: FAA0
5
)4S%B&/*
)4$/=>*
)0C>B*
)p class1AnormalA*
%his is a paragraph)4p*
)p class1AthickA*
%his is a paragraph)4p*
)p class1AthickerA*
%his is a paragraph)4p*
)40C>B*
)4$%M&*
"
Aqwam Rosadi K
BIII. PENGAT:RAN TA6EL
Bang perlu diperhatikan adalah
pengaturan border6 padding dan margin suatu
tabel.
1. 7engaturan padding
)$%M&*
)$/=>*
)%;%&/*7engaturan 7adding %able)4%;%&/*
)st!le t!pe1Atext4cssA*
t,.1iri-
pa,,in!3t+p: @$40
pa,,in!3ri!/t: @$40
pa,,in!3*+tt+4: @$40
pa,,in!3le2t: @$4 0
*a$1!r+un,3$+l+r : <?A?I??0
5
)4st!le*
)4$/=>*
)0C>B*
)%=0&/ 0C@>/@1A1A*
)%@*
)%> class1AkiriA*7ading dengan Narak 2cm
dari kiri6atas6kanan6dan bawah)4%>*
)%>*%anpa Narak )4%>*
)4%@*
)4%=0&/*
)40C>B*
)4$%M&*
2. Menggunakan file css untuk mempercantik
pembuatan tabel.
?ile ta*le=pe$*+,&.$
4H CSS >ocument H4
%$ 8
color , V######-
background9color , V33UU-
border9width, 1px -
border9st!le,solid-
border9color ,red -
font9siRe, Upt-
:
%> 8
color , red-
background9color , V//#=-
border9width, 1px -
border9st!le,solid-
border9color ,blue -
font9siRe, Upt-
:
?ile /t4l &an! a1an 4e4an!!il 2ile $
)$%M&*
)$/=>*
)%;%&/*7engaturan %able spec)4%;%&/*
"LINK REL'(STYLESHEET(
TYPE'(te)t%$(
HRE?'(ta*le=pe$*+,&.$(#
)4$/=>*
)0C>B*
)table width1A4WA border1ALA
cellpadding1A5A cellspacing1ALA *
)tr*
)th width1A112A *+ama Computer)4th*
)th width1AU1A*7rossesor)4th*
)th width1AUA*@am)4th*
)th width1A13"A *S!stem Cperasi)4th*
)4tr*
)tr*
)td*Clnt91)4td*
)td *;7 4 16W KhR)4td*
)td *1L K0)4td*
)td *@edhat &inux)4td*
)4tr*
)tr*
)td *Clnt92)4td*
)td *;7 2 KhR C)4td*
)td * K0)4td*
)td *Mandrake &inux)4td*
)4tr*
)tr*
)td *Clnt92)4td*
)td *Q7 2LLLX )4td*
)td *2L K0)4td*
)td*Pindows)4td*
)4tr*
)4table*
W
Aqwam Rosadi K
)40C>B*
)4$%M&*
I;.PENGAT:RAN HYPERLINK M
TOM6OL YANG MENARIK
S!ntax penulisan pada CSS ,
a:lin1 -pr+pert& : 9alue5
Sele$t+r Keteran!an
a,link ?eadaan awal pemicu link aktif
a,.isited ?eadaan pemicu link setelah
dikunNungi
a,acti.e ?eadaan pemicu !ang sedang aktif
a,ho.er ?eNadian pada pemicu link saat mouse
digerakkan diatasn!a
1. 7enggunaan propert! selector
)$%M&*
)$/=>*
)%;%&/*7engaturan pada link)4%;%&/*
)S%B&/ t!pe1Atext4cssA*
4H?on.ersi pengaturan &ink pada contoh
sebelum!a menggunakan css H4
A:lin1 -$+l+r : !reen05
A:/+9er - $+l+r : pin105
)4S%B&/*
)4$/=>*
)0C>B*
)a href1Ahttp,44lecturer.eepis9its.edu4SRenhadiA
target1A5selfA*Contoh $!perlink menggunakan
CSS)4a*
)40C>B*
)4$%M&*
2. 7embuatan tombol dengan tabel
)$%M&*
)$/=>*
)%;%&/*7engaturan 7ada &ink
background)4%;%&/*

)S%B&/ 1Atext4cssA*
A:lin1 -te)t3,e$+rati+n: n+ne5
A:9iite, -te)t3,e$+rati+n: n+ne5
A:a$ti9e -te)t3,e$+rati+n: n+ne5
A:/+9er -
2+nt3.ei!/t:n+ne0
$+l+r: re,0
*a$1!r+un,3$+l+r:*lue05
)4S%B&/*

)4$/=>*
)0C>B*
)%=0&/ border1A1A*
)%@*
)%> width1A144A*
)a href1AVA*=rahkan Mouse ke
sini)4a*
)4%>*
)4%@*
)%@*
)%> width1A144A*
)a href1AVA*=rahkan Mouse ke
sini)4a*
)4%>*
)4%@*
)4%=0&/*
)40C>B*
)4$%M&*
3. Membuat tombol .isual 3>
a. 7embuatan file css
4H CSS >ocument H4
.leftlinks 8
border,1px solid V224"C-
padding,5px-
margin,5px-
text9align,middle-
background9color,V33UU-
width,15Lpx-
:
.leftlinks a 8
displa!,block-
margin,3px Lpx-
border9top,1px solid V4CWCL-
border9left,1px solid V4CWCL-
border9right,1px solid V224"C-
border9bottom,1px solid V224"C-
padding, 4px 1Lpx-
U
Aqwam Rosadi K
text9align,center-
background9color,V33UU-
color,V/>/>/>-
text9decoration,none-
:
.leftlinks a,link 8
color,V/>/>/>-
:
.leftlinks a,.isited 8
color,V/>/>/>-
:
.leftlinks a,ho.er 8
displa!,block-
margin,3px Lpx-
border9top,1px solid V224"C-
border9left,1px solid V224"C-
border9bottom,1px solid V4CWCL-
border9right,1px solid V4CWCL-
padding, 5px Upx 3px 11px-
text9align,center-
background9color,V33UU-
color,V//>U2U-
text9decoration,none-
:
b. 7embuatan file $%M& utk memanggil css
)$%M&*
)$/=>*
)%;%&/*7engaturan 7ada &ink Yisualisasi
tombol)4%;%&/*

"LINK REL'(STYLESHEET(
TYPE'(te)t%$(
HRE?'(lin1=2rt+4*+l.$(#

)4$/=>*
)0C>B*
)di. class1AleftlinksA*
)a href1Aindex.htmA*%eras Pamika)4a*
)a href1Aprofil.htmA*7ssrofil Crganisasi)4a*
)a href1Astruktur.htmA*Struktur)4a*
)a href1Apembimbing.htmA*7embimbing
Crg)4a*
)a href1Adpo.htmA*>7C Crganisasi)4a*
)a href1Akegiatan.htmA*?egiatan @utin)4a*
)a href1Aberita.htmA*0erita J?M)4a*
)4di.*
)40C>B*
)4$%M&*
#ungsi tag )di.* , hampir sama dengan tag
paragraf )p*6 berguna untuk mengelompokkan
seNumlah baris teks !ang memiliki karakteristik
!ang sama.
T:GAS :
0uatlah web pribadi anda6 lengkapi dengan
pembuatan tombol link menggunakan css.
#=S;&;%=S M/+J ,
1. $CM/ , ;nformasi sekilas tentang diri anda.
2. 7/+>;>;?=+ , 7endidikan !ang telah anda
tempuh6 termasuk pelatihan dan training !ang
pernah diikuti.
3. M=>P=& ?J&;=$ , Kunakan pemakaian
tabel dengan css seperti diatas.
4. =?%;Y;%=S , 7engalaman organisasi !ang
pernah anda ikuti selama kuliah atau di luar.
5. %ambahkan informasi lain6 untuk menambah
nilai anda.
1L

You might also like