wayground logo

Free Printable Worksheets

Font size

S
M
L
XL
Worksheets

Menerapkan CSS Lanjutan

Total questions: 10

Worksheet time: 50mins

Name
Class
Date
1.

Properti CSS yang digunakan

untuk mengatur elemen agar sejajar

secara horizontal menggunakan Flexbox...

a)

display: flex;

b)

display: inline;

c)

display: block;

d)

display: grid;

2.

Bagian .navbar menggunakan properti

display: flex;

Fungsi utama Flexbox disini adalah untuk...

a)

Mengatur poses elemen agar sejajar dan mudah diatur tata letaknya

b)

Menyusun elemen agar rapi ke bawah sesuai urutan HTML

c)

Mengatur posisi elemen agar sejajar tanpa mengubah ukurannya

d)

Menempatkan elemen agar rata di tengah halaman tanpa pengaturan lanjutan

3.

Fungsi utama :root adalah...

a)

Menentukan variabel hanya untuk elemen tertentu

b)

Menyimpan variabel yang bisa dipakai diseluruh dokumen

c)

Menghapus variabel CSS

d)

Membuat warna menjadi transparan

4.

display: grid;

grid-template-columns: repeat(3, 1fr);

artinya:

a)

Membagi halaman menjadi 3 baris vertikal

b)

Membuat 3 kolom dengan lebar sama rata

c)

Mengatur elemen menjadi 3 baris horizontal

d)

Mengatur jarak antar elemen ke 3 piksel

5.

transition: background-color 0,3s ease,

Efek ini akan aktif ketika...

a)

Halaman dimuat pertama kali

b)

Elemen di klik oleh pengguna

c)

Elemen di-hover atau diubah tampilannya

d)

Browser diperbesar atau ukuran layar diubah

6.

Selector manakah yang digunakan untuk

memberi gaya pada tautan

ketika kursor diarahkan ke atasnya?

a)

a: focus

b)

a: visited

c)

a: hover

d)

a: active

7.

Apa yang digunakan untuk membuat efek transisi pada item grid?

a)

Animation

b)

Filter

c)

Transform

d)

Transition

8.

Apa yang terjadi lika kursor diarahkan ke .grid-item?

a)

Warna background berubah sedikit tanpa efek transisi

b)

Tidak terjadi perubahan apapun

c)

Teks berubah warna, tapi tanpa perubahan latar belakang

d)

Warna background dan teks berubah dengan efek transisi halus

9.

Fungsi dari pseudo-element : :after pada .navbar a adalah...

a)

Menambahkan teks tambahan didepan elemen

b)

Menambahkan tanda panah (>) di belakang setiap link navbar

c)

Mengubah warna link menjadi hijau

d)

Menghapus dekorasi link

10.

Apa fokus utama CSS Lanjutan?

a)

Layout tetap, desain warna, dan animasi sederhana

b)

Layout fleksibel, kecepatan loading, dan tampilan menarik

c)

Layout responsif, performa, dan fitur modern untuk pengembangan web profesional

d)

Mengatur struktur dasar dan konten halaman web