JUNIOR WEB PROGRAMMING

(CSS) BY:

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 1

 Pengenaln
CSS

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 2

 Pengenalan CSS Struktur CSS

Selector Selector Selector

h1 { #header { .box {
color: blue; color: blue; color: blue;
background: red; background: red; background: red;
} } }

Property Value Property Value Property Value

Catatan:
• Selector adalah elemen/tag HTML yang ingin diberi style. Anda dapat menuliskan, langsung nama tag yang ingin diberi style tanpa
perlu menambahkan tanda <>, Jika tag HTML yang ingin diberi style memiliki ID, anda dapat menuliskan nama ID tersebut dengan
diawali tanda kress (#), jika tag yang diberi style memiliki Class, maka penulisan selector bisa dilakukandengan tanda titik (.) diikuti
dengan nama class.
• Property adalah sifat-sifat yang ingin diterapkan pada selector, seperti warna text, warna background, jarak antar elemen, garis
pinggir dan lain sebagainya
• Value adalah nilai pada property kita gunakan.

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 3

 3 Cara
Menggunakan
CSS

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 4

 Menggunakan CSSMenggunakan Cara Inline

 Buatlah Folder “Latihan1”

 Buatlah File html baru dengan nama “latihan1.html”

 Ketikkanlah kode berikut :

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 5

 Menggunakan CSS
Menggunakan Cara Internal

 Buatlah Folder “Latihan2”

 Buatlah File html baru dengan nama “latihan2.html”

 Ketikkanlah kode berikut :

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 6

 Menggunakan CSS
Menggunakan Cara Eksternal
 Buatlah Folder “Latihan3”

 Buatlah file css dengan nama style.css

 Buatlah File html baru dengan nama “latihan3.html”

 Ketikkanlah kode berikut :

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 7

 Implementasi
CSS

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 8

 Memebuat Box-Model Menggunakan margin

Property margin digunakan untuk memberikan jarak antar elemen/tag HTML

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 9

 Memebuat Box-Model Menggunakan Padding

Properti padding digunakan untuk memberikan jarak antara konten elemen dengan elemen tersebut

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 10

 Memebuat Box-Model Menggunakan Border

Property border digunakan untuk memberikan garis pinggir pada elemen

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 11

 Mengatur Font Pada CSS
Properti font

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 12

 CSS Image & BackgroundProperti background-image

Property background-image digunakan Untuk memanggil gambar sebagai background dari elemen

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 13

 CSS Image & Background
Properti background pengulangan kebawah

Property background-repeat digunakan pengulangan gambar background

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 14

 CSS Image & Background
Properti background tanpa pengulangan

Property background-position digunakan untuk mengatur posisi background gambar

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 15

 Floating
Properti float

Property float digunakan untuk mengatur atur rata kiri atau rata kanan pada element HTML

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 16

 Positioning
Property position digunakan untuk mengatur posisi element

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 17

 Pseudo-Class
Pseudo-Class digunakan untuk memberikan efek-efek tertentu pada selector.

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 18

 Tugas
Buatlah layout seperti

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 19

 Tugas
Buatlah layout seperti

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 20

 Tugas
Buatlah layout seperti

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 21

 Tugas
Buatlah layout seperti

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 22

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

23
 +62 857 21 2109 92

punten@tintapuccino.com

http://tintapuccino.com Thank You

For Your Attention!
PT Oryza Sativa Abadi
Jl. Reog no 6a OSA Building Lt.1
24