wayground logo

Free Printable Worksheets

Font size

S
M
L
XL
Worksheets

CSS Quiz

Total questions: 50

Worksheet time: 25mins

Name
Class
Date
1.

Apa kegunaan CSS?

a)

Untuk memproses skrip sisi server

b)

Untuk mengatur desain halaman web

c)

Untuk menyimpan data pengguna

d)

Untuk menjalankan program komputer

e)

Untuk membuat basis data otomatis

2.

Organisasi manakah yang merilis versi CSS 1 pada tahun 1996?

a)

Google

b)

Netscape

c)

W3C

d)

Microsoft

e)

Apple

3.

Apa sebutan CSS yang ditulis langsung di tag HTML?

a)

Embedded CSS

b)

Static CSS

c)

Inline CSS

d)

External CSS

e)

Internal CSS

4.

Dalam CSS, bagian yang memilih elemen HTML disebut?

a)

Value

b)

Selector

c)

Atribut

d)

Content

e)

Property

5.

Selector yang hanya untuk elemen tunggal adalah?

a)

Selector Kelas

b)

Selector Atribut

c)

Selector ID

d)

Selector Tag

e)

Selector Universal

6.

Selector [type="text"] adalah contoh dari?

a)

Selector Kelas

b)

Selector Atribut

c)

Selector Universal

d)

Selector Tag

e)

Selector ID

7.

Apa yang dimaksud dengan pseudo-class :hover?

a)

Ketika tautan telah dikunjungi

b)

Ketika elemen anak terakhir

c)

Ketika pointer mouse berada di atas elemen

d)

Ketika elemen diklik

e)

Ketika elemen anak pertama

8.

Apa fungsi dari pseudo-element ::first-letter?

a)

Baris pertama

b)

Semua huruf

c)

Setelah konten

d)

Huruf pertama

e)

Sebelum konten

9.

Apa warna #ff0000?

a)

Hijau

b)

Putih

c)

Merah

d)

Biru

e)

Hitam

10.

Apa yang dihasilkan oleh rgba(0,0,255,0.5)?

a)

Putih penuh

b)

Hijau solid

c)

Biru transparan

d)

Merah gelap

e)

Hitam solid

11.

Apa itu unit absolut dalam CSS?

a)

Relatif terhadap konteks

b)

Menyesuaikan dengan induk

c)

Relatif terhadap layar

d)

Selalu tetap dalam ukuran

e)

Relatif terhadap font

12.

Apa fungsi shorthand dalam CSS?

a)

Untuk menghapus kode

b)

Untuk menulis dengan ringkas

c)

Untuk menjalankan skrip

d)

Untuk menyimpan variabel

e)

Untuk membuat loop

13.

Apa tujuan dari spesifisitas CSS?

a)

Untuk mengubah warna teks secara otomatis

b)

Untuk menyembunyikan elemen halaman

c)

Untuk menentukan aturan mana yang menang

d)

Untuk menyesuaikan posisi font

e)

Untuk membuat animasi sederhana

14.

Untuk mengatur apa property font-family?

a)

Variasi font

b)

Ketebalan font

c)

Jenis font

d)

Tinggi garis

e)

Ukuran font

15.

Apa efek dari text-decoration: underline;

a)

Warna teks

b)

Garis bawah

c)

Perataan kiri

d)

Garis tengah

e)

Huruf kapital

16.

Apa saja bagian dari Model Kotak CSS?

a)

Font, text, background, color

b)

Content, padding, border, margin

c)

Selector, property, value, rule

d)

Float, overflow, display, position

e)

Header, footer, body, sidebar

17.

Apa yang dimaksud dengan min-width?

a)

Tinggi maksimum

b)

Lebar otomatis

c)

Lebar minimum

d)

Lebar maksimum

e)

Tinggi minimum

18.

Apa fungsi margin?

a)

Ruang dalam dari sebuah elemen

b)

Garis di sekitar sebuah elemen

c)

Ruang luar dari sebuah elemen

d)

Posisi sebuah elemen relatif

e)

Membuat gulir halaman

19.

Apa perbedaan antara border dan outline?

a)

Border tidak berwarna, outline selalu berwarna

b)

Border hanya horizontal, outline hanya vertikal

c)

Border melekat pada padding, outline berada di luar border

d)

Border tidak dapat dihapus, outline dapat dihapus

e)

Border statis, outline dinamis

20.

Apa arti dari nilai position: fixed;?

a)

Relatif normal

b)

Berubah saat scroll

c)

Tetap saat scroll

d)

Menurut dokumen

e)

Relatif terhadap induk

21.

Apa arti dari nilai display: inline-block;?

a)

Ditampilkan dalam satu baris

b)

Inline tetapi dapat memiliki lebar dan tinggi

c)

Tidak ditampilkan sama sekali

22.

Apa arti dari display: inline-block;?

a)

Tersembunyi dari layar

b)

Inline tetapi memiliki lebar dan tinggi

c)

Menampilkan satu baris penuh

d)

Hanya inline tanpa ukuran

e)

Tidak ditampilkan sama sekali

23.

Apa perbedaan antara visibility: hidden; dan display: none;?

a)

Hidden untuk teks, none untuk gambar

b)

Keduanya sama

c)

Hidden masih mengambil ruang, none menghilangkan ruang

d)

Hidden untuk blok, none untuk inline

e)

None masih mengambil ruang, hidden menghilangkan ruang

24.

Apa fungsi float dalam CSS?

a)

Buat gulir

b)

Melayang ke kiri atau kanan

c)

Buat animasi

d)

Sembunyikan elemen

e)

Sesuaikan warna

25.

Apa yang digunakan overflow: auto;?

a)

Sembunyikan konten yang berlebihan

b)

Hapus konten tambahan

c)

Gulir secara otomatis jika konten lebih

d)

Tampilkan semua konten meskipun berlebihan

e)

Sesuaikan ukuran induk

26.

Apa yang digunakan border-radius?

a)

Membuat bayangan tepi

b)

Membuat sudut melengkung

c)

Menambahkan warna gradasi

d)

Membuat teks melingkar

e)

Menyesuaikan margin

27.

Apa nilai dari border-radius: 50% biasanya digunakan untuk membuat?

a)

Persegi Panjang

b)

Lingkaran

c)

Bayangan

d)

Tabel

e)

Segitiga

28.

Apa yang dilakukan box-shadow?

a)

Menentukan ukuran font

b)

Memberikan bayangan pada elemen

c)

Menambahkan transisi animasi

d)

Menyesuaikan warna latar belakang

e)

Membuat sudut elemen menjadi bulat

29.

Apa yang dihasilkan oleh box-shadow: 0px 0px 15px gray;

a)

Bayangan hitam padat di bawah elemen

b)

Warna latar belakang menjadi abu-abu

c)

Bayangan abu-abu di sekitar elemen

d)

Batas melengkung 15px

e)

Elemen bergerak 15px ke kanan

30.

Apa fungsi dari property transition?

a)

Untuk membuat bayangan teks

b)

Untuk membuat perubahan properti yang halus di CSS

c)

Untuk menyesuaikan posisi flexbox

d)

Untuk membuat batas yang membulat

e)

Untuk membuat grid responsif

31.

Apa yang ditunjukkan oleh transition: background-color 0.5s ease;

a)

Font, warna, ukuran

b)

Animasi keyframe

c)

Properti, durasi, fungsi waktu

d)

Posisi horizontal

e)

Margin, padding, border

32.

Apa perbedaan antara transisi dan animasi?

a)

Transisi selalu linier, animasi tidak

b)

Transisi hanya terjadi selama perubahan status, animasi dapat diulang secara otomatis

c)

Tidak ada perbedaan

d)

Transisi memerlukan keyframe, animasi tidak

e)

Transisi lebih kompleks daripada animasi

33.

Apa yang dilakukan oleh @keyframes?

a)

Membuat border melengkung

b)

Menentukan tahap animasi

c)

Memberikan bayangan

d)

Membuat gradien

e)

Menyesuaikan flexbox

34.

Media Query pada CSS digunakan untuk?

a)

Menyimpan variabel CSS

b)

Menyesuaikan gaya sesuai dengan kondisi perangkat

c)

Membuat bayangan kotak pada elemen

d)

Menyisipkan font kustom

e)

Membuat animasi berjalan terus-menerus

35.

Contoh media query untuk layar kecil:

a)

@resize 600

b)

@media (max-width: 600px)

c)

@view <= 600

d)

@query (600px)

e)

@screen small

36.

Bagaimana mengaktifkan flexbox pada elemen?

a)

display: block;

b)

display: flex;

c)

display: inline;

d)

display: grid;

e)

display: box;

37.

Apa arti dari justify-content: space-between;?

a)

Item-item dipisahkan dengan jarak tertentu

b)

Semua item ke kiri

c)

Semua item ke kanan

d)

Item-item ditumpuk ke bawah

e)

Item-item terpusat

38.

Apa yang dilakukan oleh align-items: center;?

a)

Memusatkan item secara vertikal

b)

Membuat item mengapung

c)

Meningkatkan jarak antara item

d)

Menyesuaikan ukuran item

e)

Mengatur item secara horizontal

39.

Apa arti dari flex-wrap: wrap;

a)

Item akan pindah ke baris baru jika tidak muat

b)

Item tetap dalam satu baris

c)

Item berubah menjadi kolom

d)

Item menghilang secara otomatis

e)

Item diulang

40.

Bagaimana cara mengaktifkan Grid?

a)

display: grid;

b)

display: flex;

c)

display: inline-grid;

d)

display: block;

e)

grid: active;

41.

Apa fungsi dari gap dalam grid?

a)

Ruang antara baris dan kolom

b)

Ruang antara margin dan padding

c)

Ruang antara huruf dalam teks

d)

Lebar batas grid

e)

Warna latar belakang grid

42.

Apa itu font-face digunakan untuk?

a)

Menggunakan font kustom di situs web

b)

Menyesuaikan berat font

c)

Menyesuaikan ukuran font

d)

Membuat font miring

e)

Menentukan warna teks

43.

Apa layanan populer untuk font CSS?

a)

Google Fonts

b)

MySQL

c)

Oracle

d)

MongoDB

e)

Firebase

44.

Apa yang digunakan calc()?

a)

Perhitungan langsung dalam CSS

b)

Menyimpan data numerik dalam database

c)

Menentukan ukuran font default

d)

Membuat animasi

e)

Membuat warna

45.

Contoh penggunaan calc:

a)

lebar: calc(100% - 50px);

b)

warna: calc(red, blue);

c)

ukuran-font: calc(12pt);

d)

latar-belakang: calc(linear);

e)

tinggi: auto-calc;

46.

Variabel CSS didefinisikan dengan awalan?

a)

--

b)

$

c)

#

d)

@

e)

%

47.

Variabel CSS disebut dengan fungsi?

a)

var()

b)

use()

c)

call()

d)

ref()

e)

css()

48.

Apa arti dari transform translate(30px, 20px)?

a)

Pindah 30px ke kanan, 20px ke bawah

b)

Memperbesar 30 kali

c)

Memutar 30 derajat

d)

Mencerminkan elemen

e)

Membuat sudut 20%

49.

Apa arti dari rotate(45deg)?

a)

Putar elemen 45 derajat

b)

Miringkan elemen 45%

c)

Perbesar 45 kali

d)

Pindahkan 45px

e)

Ubah warna 45%

50.

Apa yang dilakukan media query prefers-color-scheme: dark?

a)

Mode gelap otomatis

b)

Buat animasi

c)

Tambahkan bayangan kotak

d)

Jadikan grid responsif

e)

Tentukan font