JUNIOR WEB PROGRAMMING

(CSS)
BY:

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 1

 Materi Display

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 2

 CSS Display

Display adalah salah satu property dalam CSS yang berguna untuk
mengatur tambpilan suatu elemen. Disolay memiliki beberapa
value, dengan default value inline. Namun, pada masing-masing
elemen tag pada html memiliki default value yang berbeda, default
value yang paling sering digunakan adalah inline dan block
1. inline
• Elemen HTML yang secara default tidak menambahkan
baris baru Ketika dibuat

• lebar dan tinggi elemennya sebesar konten yang ada di

dalamnya

• Kita tidak dapat mengatur tinggi dan lebar dari elemen

inline (kecuali tag img)
elemen inline
b, i, a, input,
label, button,
select, textarea
…
2. inline-block
• Tidak ada elemen yang secara default memiliki property
display: inline-block;

• Kita harus ubah secara manual property tersebut

• Perilaku dasarnya sama dengan elemen inline

• Perbedaanya kita dapat atur lebar dan tinggi nya

3. block
• Elemen HTML yang secara default menambahkan baris
baru Ketika dibuat

• Jika tidak diatur lebar-nya, maka lebar default dari elemen

block akan memenuhi lebar dari browser

• Kita dapat mengatur tinggi dan lebar dari elemen block

• Di dalam elemen block, kita dapat menyimpan tag dengan

elemen inline, inline-block, atau bahkan elemen block lagi
elemen block
H1-h6, p, ol, ul, li
form, br,
div
…
4. none
Digunakan untuk menghilangkan sebuah elemen
 Materi Overflow

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 10

 Overflow

CSS Overflow adalah propoerti yang dapat digunakan untuk

menentukan suatu konten apakah nantinya konten akan
ditambahkan scrollbar Ketika konten yang terdapat pada elemen
tidak cukup muat. Terdapat 4 value dari properti overflow
diantaranya visible, hidden, scrollbar, dan auto.
1. Visible

Secara default overflow adalah visible, yang berarti bahwa

konten yang ada di dalam elemen "tidak dipotong" dan "melebihi"
ukuran elemen kotak yang ditentukan.
2. Hidden

Dengan value menggunakan hidden, yang berarti bahwa

konten yang ada di dalam elemen menjadi "terpotong" dan "tidak
melebihi" ukuran elemen kotak yang ditentukan.
3. Scroll

Menetapkan nilai scroll, yang berarti bahwa konten yang ada

di dalam elemen menjadi "terpotong" dan ditambahkan scroll
bar untuk menggulir konten yang ada di dalam kotak. Scroll bar
yang ditambahkan adalah scrollbar secara horizontal dan vertikal
(bahkan jika kita tidak membutuhkannya).
4. Auto

Value auto hampir sama dengan value scroll, perbedaannya

pada value auto hanya menambahkan scrollbar jika diperlukan.
 overflow-x dan overflow-y
Properti overflow-x dan overflow-y digunakan dalam
menentukan apakah untuk mengubah overflow konten hanya
horizontal atau vertikal (atau kedua-duanya).
• overflow-x menentukan apa yang harus dilakukan pada sisi kiri /
kanan konten.
• overflow-y menentukan apa yang harus dilakukan pada sisi bawah
/ atas konten.