JUNIOR WEB PROGRAMMING

(CSS)
BY:

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 1

 Materi 1

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 2

 Cascading Style Sheet
CSS adalah bahasa Cascading Style Sheet dan biasanya digunakan untuk mengatur
tampilan elemen yang tertulis dalam bahasa markup, seperti HTML. CSS berfungsi untuk
memisahkan konten dari tampilan visualnya di situs.
Cascading = Kaskade → Mengatur tampilan komputer
Style = Gaya
Sheet = Lembar

• HTML lebih pada kerangka pada situs web, sedangkan CSS yang mengatur urusan tampilan
Jenis Penempatan CSS
•

•
 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 5
 Jenis-jenis Penempatannya
• Inline

Inline CSS adalah penempatan CSS yang langsung dilakukan didalam konten HTML. Penempatan CSS
secara inline hanya akan mempengaruhi satu bagian baris kode. Berikut adalah contohnya.

CSS diatas berarti hanya akan mempengaruhi paragraph yang spesifik didalam satu file .html dan muncul
dengan warna biru (blue).
6
 Jenis-jenis Penempatannya
• Internal

Penggunaan CSS secara internal , baris kode HTML

dituliskan dibagian atas (header) file HTML. Cara ini
akan sangat cocok dipakai untuk menciptakan
halaman web dengan tampilan yang berbeda.
Dengan kata lain, CSS ini bisa dipakai untuk
menciptakan tampilan yang unik. Baris kode CSS
secara internal contoh nya seperti dibawah ini.

CSS disamping berarti hanya akan mempengaruhi

tag h1 yang ada di dalam satu file .html dan muncul
dengan warna biru (blue).

7
 Jenis-jenis Penempatannya
• External

External CSS adalah penempatan baris kode CSS menggunakan file .css. Cara ini dapat digunakan untuk
mendeklarasikan Sebagian besar pengaturan tampilan website secara keseluruhan. Cara ini lebih
sederhana dan simple dari pada menambahkan baris kode disetiap elemen HTML yang ingin Anda atur
tampilannya. Jika menggunakan penempatan secara eksternal, Anda harus menambahkan header untuk
memanggil file .css didalam file HTML seperti contoh dibawah ini.

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

9
 +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
10