CSS BOX
MODEL
BACKGR
&
OUND
ANGGOTA
KELOMPOK
[Link] AZKA REZVAN
[Link] SETIAWAN
[Link] REYFA A
[Link] AFWA
PENGERTIA
N CSS BOX
MODEL
CSS box model adalah konsep dalam CSS
yang menggambarkan struktur dan
penataan elemen HTML di halaman web.
Box model menjelaskan bagaimana elemen
HTML ditampilkan sebagai kotak persegi
panjang. Box model terdiri dari empat
bagian utama, yaitu: Content, Padding,
Border, Margin.
PROPERTI
BOX
WIDTH MODEL
&
HEIGHT
Properti width dan height dalam CSS box
model mengatur lebar dan tinggi suatu
elemen HTML. Properti ini menentukan
ukuran area konten elemen. Properti width
dan height tidak memperhitungkan nilai
padding, border, atau margin.
BOX
PROPERTI
MODEL
OVERFLOW
Properti ini menentukan apakah
akan memotong konten,
menambahkan bilah gulir, atau
membiarkannya meluap keluar dari
kotak.
PROPERTI
BOX
PADDING &
MODEL
MARGIN
Properti padding CSS digunakan untuk
menghasilkan ruang di sekitar konten
elemen, di dalam batas yang ditentukan
(atas, kanan, bawah, dan kiri). Properti
margin dalam CSS box model adalah
properti yang mengatur jarak di sekitar
elemen HTML
PROPERTI atribut yang menentukan batas
BORDER
BOX
kotak dan pembungkus dari
setiap elemen HTML. Selain
memberi garis, fungsi border
juga dapat menghapus garis
MODEL jika terjadi kekeliruan.
PROPERTI
BOX
Properti border-radius dalam
CSS box model berfungsi untuk BORDER-
MODEL
RADIUS
membuat sudut membulat pada
elemen HTML.
Properti border-radius
menerima satuan panjang CSS
yang valid, seperti piksel, rem,
em, ch, vh, vw, dan sebagainya.
Properti border-radius dapat
digunakan untuk membuat
lingkaran atau elips
PENGERTIAN
CSS
BACKGROUN
CSS background adalah properti yang
mengatur latar belakang elemen di
D
sebuah halaman web. Latar belakang ini
dapat berupa warna, gambar, atau
keduanya
PROPERTI
BACKGRO
BACKGROUND
UND
-COLOR Properti background-
color dalam CSS
digunakan untuk
mengatur warna latar
belakang elemen
HTML
PROPERTI
BACKGRO
BACKGROUND-
UND
IMAGE
Properti background-image dalam
CSS adalah properti yang berfungsi
untuk menerapkan gambar latar
belakang pada elemen di halaman
web
PROPERTI
BACKGRO
BACKGROUND-
UND
REPEAT
digunakan untuk mengulang gambar latar
belakang baik secara horizontal maupun
vertikal. Properti ini juga menentukan
apakah gambar latar belakang akan diulang
atau tidak.
PROPERTI
BACKGRO
BACKGROUND-
UND
POSITION
background-position dalam CSS
berfungsi untuk mengatur posisi
gambar latar belakang. Properti ini
menerima dua nilai, yaitu
background- position-x dan
background-position-y.
BACKGRO
PROPERTI
UND
BACKGROUND-SIZE
background-size
untuk mengubah
digunakan
ukuran
gambar latar belakang suatu
elemen. Properti ini berguna
untuk mengontrol ukuran
gambar latar belakang tanpa
kehilangan kualitas gambar
THA
NK
YOU!