wayground logo

Free Printable Worksheets

Font size

S
M
L
XL
Worksheets

Worksheet : Layout CSS

Total questions: 25

Worksheet time: 13mins

Name
Class
Date
1.

Urutan Box Model dari paling dalam ke luar yang benar adalah …

a)

Margin → Border → Padding → Content

b)

Content → Padding → Border → Margin

c)

Padding → Content → Border → Margin

d)

Content → Border → Padding → Margin

2.

Bagian box model yang berisi teks atau gambar disebut …

a)

Padding

b)

Margin

c)

Border

d)

Content

3.

Properti CSS yang memberi jarak antara border dan konten adalah …

a)

margin

b)

padding

c)

width

d)

height

4.

Fungsi utama margin adalah …

a)

Mengatur ukuran teks

b)

Memberi jarak antar elemen

c)

Memberi warna elemen

d)

Mengatur posisi teks

5.

Jika sebuah elemen memiliki width: 200px, maka lebar tersebut berlaku untuk bagian …

a)

Margin

b)

Border

c)

Padding

d)

Content

6.

Properti CSS untuk mengatur garis tepi elemen adalah …

a)

outline

b)

padding

c)

border

d)

margin

7.

Jika ingin memberi jarak hanya di sisi atas elemen, properti yang tepat adalah …

a)

padding-left

b)

margin-top

c)

border-top

d)

width-top

8.

Box model sangat penting dalam desain web karena …

a)

Membuat warna lebih menarik

b)

Mengatur struktur dan jarak antar elemen

c)

Menambah animasi

d)

Mengatur font website

9.

Nilai default dari properti position adalah …

a)

relative

b)

absolute

c)

static

d)

fixed

10.

Elemen dengan position: static …

a)

Bisa diatur dengan top dan left

b)

Mengikuti alur normal dokumen

c)

Selalu berada di atas elemen lain

d)

Tetap saat di-scroll

11.

position: relative berarti …

a)

Elemen bergerak mengikuti viewport

b)

Elemen bergerak dari posisi aslinya

c)

Elemen keluar dari alur dokumen

d)

Elemen menempel di layar

12.

Properti top, left, right, dan bottom berfungsi untuk …

a)

Mengatur ukuran elemen

b)

Mengatur warna elemen

c)

Mengatur posisi elemen

d)

Mengatur font

13.

Elemen yang tetap terlihat meskipun halaman di-scroll menggunakan …

a)

static

b)

relative

c)

absolute

d)

fixed

14.

position: sticky biasanya digunakan untuk …

a)

Footer

b)

Gambar galeri

c)

Navigasi atau header

d)

Paragraf teks

15.

Perbedaan utama fixed dan sticky adalah …

a)

Sticky tidak bisa diatur posisinya

b)

Fixed mengikuti elemen induk

c)

Sticky menempel setelah titik scroll tertentu

d)

Fixed hanya berlaku di container

16.

Jika sebuah elemen ingin diposisikan relatif terhadap browser, maka digunakan …

a)

static

b)

relative

c)

absolute

d)

fixed

17.

CSS Grid digunakan untuk …

a)

Mengatur warna teks

b)

Mengatur animasi

c)

Mengatur tata letak halaman

d)

Mengatur font

18.

Elemen utama yang membungkus grid disebut …

a)

grid-item

b)

grid-cell

c)

grid-container

d)

grid-area

19.

Semua elemen langsung di dalam grid container disebut …

a)

grid-line

b)

grid-gap

c)

grid-item

d)

grid-track

20.

Pertemuan antara satu baris dan satu kolom disebut …

a)

grid-area

b)

grid-track

c)

grid-cell

d)

grid-line

21.

Ruang kosong antar baris dan kolom grid disebut …

a)

grid-track

b)

grid-gap

c)

grid-area

d)

grid-cell

22.

Garis pembatas horizontal dan vertikal pada grid disebut …

a)

grid-gap

b)

grid-cell

c)

grid-line

d)

grid-item

23.

Area persegi panjang yang bisa mencakup beberapa sel disebut …

a)

grid-cell

b)

grid-area

c)

grid-gap

d)

grid-track

24.

Properti CSS untuk mengaktifkan grid pada sebuah elemen adalah …

a)

display: block

b)

display: flex

c)

display: inline

d)

display: grid

25.

CSS Grid cocok digunakan untuk …

a)

Website satu paragraf

b)

Website dengan layout kompleks

c)

Mengatur ukuran font

d)

Mengatur warna background