JUNIOR WEB PROGRAMMING

(CSS)
BY:

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 1

 Materi 3

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 2

 Aturan pada CSS Rules
• Last rule, css akan mengambil selector yang letaknya ada
di akhir lembar kode

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 3

 Aturan pada CSS Rules
• Spesific rule, css akan mengambil selector yang spesifik

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 4

Pewarisan pada CSS Inheritance
Sebuah elemen mewarisi beberapa nilai dari beberapa properti yang
dimiliki parent-nya.
Ada beberapa properti yang nilainya diwariskan, ada juga yang tidak.
Solusinya beri nilai inherit pada properti yang ingin diwariskan.

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 5

Pewarnaan pada CSS

Jenis properti warna:

• Foreground color = warna pada teks → color
• Background color = warna latar belakang → background-color

Pemberian value warna:

• By name ( yellow, green, cyan, red, ... )
• RGB value ( rgb( 255, 255, 255 ) )
• Hex code ( #FFFFFF = R(255) G(255) B(255), nilai FF = 255 )

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 6

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 7
Transparansi Warna pada CSS

• Rgba (red-green-blue-alpha)
• nilai rgb = 0-255
• nilai alpha = 0 – 1 (transparansi)
• Hsl (hue-saturation-lightness)
• nilai hue = 0-360
• nilai saturation = %
• nilai lightness = %
• Hsla (hue-saturation-lightness-alpha)
• nilai alpha = 0 – 1

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 8

Properti Font / Teks CSS

• font-family ( ‘nama font’ )

• font-size ( nama-ukurannya, %, px, em )
• font-weight ( bold, bolder, lighter, normal )
• font-style ( italic, normal )
• text-decoration ( none, underline, overline, line-through )
• text-transform ( capitalize, uppercase, lowercase )
• text-align ( center, justify, left, right )
• text-shadow ( sumbu-x sumbu-y dispersi warna-bayangan )
• letter-spacing ( %, px, em )
• word-spacing ( %, px, em )

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 9

 And…
It’s Time To Say Goodbye!..

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 10