WorksheetsCSS Quiz
Total questions: 50
Worksheet time: 25mins
Apa kegunaan CSS?
Untuk memproses skrip sisi server
Untuk mengatur desain halaman web
Untuk menyimpan data pengguna
Untuk menjalankan program komputer
Untuk membuat basis data otomatis
Organisasi manakah yang merilis versi CSS 1 pada tahun 1996?
Netscape
W3C
Microsoft
Apple
Apa sebutan CSS yang ditulis langsung di tag HTML?
Embedded CSS
Static CSS
Inline CSS
External CSS
Internal CSS
Dalam CSS, bagian yang memilih elemen HTML disebut?
Value
Selector
Atribut
Content
Property
Selector yang hanya untuk elemen tunggal adalah?
Selector Kelas
Selector Atribut
Selector ID
Selector Tag
Selector Universal
Selector [type="text"] adalah contoh dari?
Selector Kelas
Selector Atribut
Selector Universal
Selector Tag
Selector ID
Apa yang dimaksud dengan pseudo-class :hover?
Ketika tautan telah dikunjungi
Ketika elemen anak terakhir
Ketika pointer mouse berada di atas elemen
Ketika elemen diklik
Ketika elemen anak pertama
Apa fungsi dari pseudo-element ::first-letter?
Baris pertama
Semua huruf
Setelah konten
Huruf pertama
Sebelum konten
Apa warna #ff0000?
Hijau
Putih
Merah
Biru
Hitam
Apa yang dihasilkan oleh rgba(0,0,255,0.5)?
Putih penuh
Hijau solid
Biru transparan
Merah gelap
Hitam solid
Apa itu unit absolut dalam CSS?
Relatif terhadap konteks
Menyesuaikan dengan induk
Relatif terhadap layar
Selalu tetap dalam ukuran
Relatif terhadap font
Apa fungsi shorthand dalam CSS?
Untuk menghapus kode
Untuk menulis dengan ringkas
Untuk menjalankan skrip
Untuk menyimpan variabel
Untuk membuat loop
Apa tujuan dari spesifisitas CSS?
Untuk mengubah warna teks secara otomatis
Untuk menyembunyikan elemen halaman
Untuk menentukan aturan mana yang menang
Untuk menyesuaikan posisi font
Untuk membuat animasi sederhana
Untuk mengatur apa property font-family?
Variasi font
Ketebalan font
Jenis font
Tinggi garis
Ukuran font
Apa efek dari text-decoration: underline;
Warna teks
Garis bawah
Perataan kiri
Garis tengah
Huruf kapital
Apa saja bagian dari Model Kotak CSS?
Font, text, background, color
Content, padding, border, margin
Selector, property, value, rule
Float, overflow, display, position
Header, footer, body, sidebar
Apa yang dimaksud dengan min-width?
Tinggi maksimum
Lebar otomatis
Lebar minimum
Lebar maksimum
Tinggi minimum
Apa fungsi margin?
Ruang dalam dari sebuah elemen
Garis di sekitar sebuah elemen
Ruang luar dari sebuah elemen
Posisi sebuah elemen relatif
Membuat gulir halaman
Apa perbedaan antara border dan outline?
Border tidak berwarna, outline selalu berwarna
Border hanya horizontal, outline hanya vertikal
Border melekat pada padding, outline berada di luar border
Border tidak dapat dihapus, outline dapat dihapus
Border statis, outline dinamis
Apa arti dari nilai position: fixed;?
Relatif normal
Berubah saat scroll
Tetap saat scroll
Menurut dokumen
Relatif terhadap induk
Apa arti dari nilai display: inline-block;?
Ditampilkan dalam satu baris
Inline tetapi dapat memiliki lebar dan tinggi
Tidak ditampilkan sama sekali
Apa arti dari display: inline-block;?
Tersembunyi dari layar
Inline tetapi memiliki lebar dan tinggi
Menampilkan satu baris penuh
Hanya inline tanpa ukuran
Tidak ditampilkan sama sekali
Apa perbedaan antara visibility: hidden; dan display: none;?
Hidden untuk teks, none untuk gambar
Keduanya sama
Hidden masih mengambil ruang, none menghilangkan ruang
Hidden untuk blok, none untuk inline
None masih mengambil ruang, hidden menghilangkan ruang
Apa fungsi float dalam CSS?
Buat gulir
Melayang ke kiri atau kanan
Buat animasi
Sembunyikan elemen
Sesuaikan warna
Apa yang digunakan overflow: auto;?
Sembunyikan konten yang berlebihan
Hapus konten tambahan
Gulir secara otomatis jika konten lebih
Tampilkan semua konten meskipun berlebihan
Sesuaikan ukuran induk
Apa yang digunakan border-radius?
Membuat bayangan tepi
Membuat sudut melengkung
Menambahkan warna gradasi
Membuat teks melingkar
Menyesuaikan margin
Apa nilai dari border-radius: 50% biasanya digunakan untuk membuat?
Persegi Panjang
Lingkaran
Bayangan
Tabel
Segitiga
Apa yang dilakukan box-shadow?
Menentukan ukuran font
Memberikan bayangan pada elemen
Menambahkan transisi animasi
Menyesuaikan warna latar belakang
Membuat sudut elemen menjadi bulat
Apa yang dihasilkan oleh box-shadow: 0px 0px 15px gray;
Bayangan hitam padat di bawah elemen
Warna latar belakang menjadi abu-abu
Bayangan abu-abu di sekitar elemen
Batas melengkung 15px
Elemen bergerak 15px ke kanan
Apa fungsi dari property transition?
Untuk membuat bayangan teks
Untuk membuat perubahan properti yang halus di CSS
Untuk menyesuaikan posisi flexbox
Untuk membuat batas yang membulat
Untuk membuat grid responsif
Apa yang ditunjukkan oleh transition: background-color 0.5s ease;
Font, warna, ukuran
Animasi keyframe
Properti, durasi, fungsi waktu
Posisi horizontal
Margin, padding, border
Apa perbedaan antara transisi dan animasi?
Transisi selalu linier, animasi tidak
Transisi hanya terjadi selama perubahan status, animasi dapat diulang secara otomatis
Tidak ada perbedaan
Transisi memerlukan keyframe, animasi tidak
Transisi lebih kompleks daripada animasi
Apa yang dilakukan oleh @keyframes?
Membuat border melengkung
Menentukan tahap animasi
Memberikan bayangan
Membuat gradien
Menyesuaikan flexbox
Media Query pada CSS digunakan untuk?
Menyimpan variabel CSS
Menyesuaikan gaya sesuai dengan kondisi perangkat
Membuat bayangan kotak pada elemen
Menyisipkan font kustom
Membuat animasi berjalan terus-menerus
Contoh media query untuk layar kecil:
@resize 600
@media (max-width: 600px)
@view <= 600
@query (600px)
@screen small
Bagaimana mengaktifkan flexbox pada elemen?
display: block;
display: flex;
display: inline;
display: grid;
display: box;
Apa arti dari justify-content: space-between;?
Item-item dipisahkan dengan jarak tertentu
Semua item ke kiri
Semua item ke kanan
Item-item ditumpuk ke bawah
Item-item terpusat
Apa yang dilakukan oleh align-items: center;?
Memusatkan item secara vertikal
Membuat item mengapung
Meningkatkan jarak antara item
Menyesuaikan ukuran item
Mengatur item secara horizontal
Apa arti dari flex-wrap: wrap;
Item akan pindah ke baris baru jika tidak muat
Item tetap dalam satu baris
Item berubah menjadi kolom
Item menghilang secara otomatis
Item diulang
Bagaimana cara mengaktifkan Grid?
display: grid;
display: flex;
display: inline-grid;
display: block;
grid: active;
Apa fungsi dari gap dalam grid?
Ruang antara baris dan kolom
Ruang antara margin dan padding
Ruang antara huruf dalam teks
Lebar batas grid
Warna latar belakang grid
Apa itu font-face digunakan untuk?
Menggunakan font kustom di situs web
Menyesuaikan berat font
Menyesuaikan ukuran font
Membuat font miring
Menentukan warna teks
Apa layanan populer untuk font CSS?
Google Fonts
MySQL
Oracle
MongoDB
Firebase
Apa yang digunakan calc()?
Perhitungan langsung dalam CSS
Menyimpan data numerik dalam database
Menentukan ukuran font default
Membuat animasi
Membuat warna
Contoh penggunaan calc:
lebar: calc(100% - 50px);
warna: calc(red, blue);
ukuran-font: calc(12pt);
latar-belakang: calc(linear);
tinggi: auto-calc;
Variabel CSS didefinisikan dengan awalan?
--
$
#
@
%
Variabel CSS disebut dengan fungsi?
var()
use()
call()
ref()
css()
Apa arti dari transform translate(30px, 20px)?
Pindah 30px ke kanan, 20px ke bawah
Memperbesar 30 kali
Memutar 30 derajat
Mencerminkan elemen
Membuat sudut 20%
Apa arti dari rotate(45deg)?
Putar elemen 45 derajat
Miringkan elemen 45%
Perbesar 45 kali
Pindahkan 45px
Ubah warna 45%
Apa yang dilakukan media query prefers-color-scheme: dark?
Mode gelap otomatis
Buat animasi
Tambahkan bayangan kotak
Jadikan grid responsif
Tentukan font
