50 Pertanyaan dan Jawaban Wawancara CSS Teratas (2025)

Berikut adalah pertanyaan dan jawaban wawancara CSS (CSS3) untuk kandidat baru dan berpengalaman untuk mendapatkan pekerjaan impian mereka.

Unduh PDF Gratis: Pertanyaan Wawancara CSS

1. Apa itu CSS?

Bentuk lengkap CSS adalah Cascading Style Sheets. Ini adalah bahasa gaya yang cukup sederhana HTML elemen. Ini populer dalam desain web, dan penerapannya juga umum di XHTML.

---

2. Apa asal usul CSS?

Bahasa Markup Umum Standar menandai dimulainya style sheet pada tahun 1980an.

---

3. Apa saja variasi CSS yang berbeda?

Variasi untuk CSS adalah:

• CSS 1
• CSS 2
• CSS 2.1
• CSS 3
• CSS 4

---

4. Apa saja batasan CSS?

Keterbatasannya adalah:

•  Menaikkan dengan penyeleksi tidak dimungkinkan
• Keterbatasan pengendalian vertikal
• Tidak ada ekspresi
• Tidak ada deklarasi kolom
• Kelas semu tidak dikendalikan oleh perilaku dinamis
• Aturan, gaya, penargetan teks tertentu tidak dimungkinkan

---

5. Apa kelebihan CSS?

Keuntungannya adalah:

• Bandwidth
• Konsistensi di seluruh situs
• Pemformatan ulang halaman
• Aksesibilitas
• Konten dipisahkan dari presentasi

---

6. Apa itu framework CSS?

Ini adalah perpustakaan yang telah direncanakan sebelumnya, yang memungkinkan penataan halaman web lebih mudah dan sesuai standar, menggunakan bahasa CSS.

---

7. Bagaimana elemen blok dapat dipusatkan dengan CSS1?

Elemen level blok dapat dipusatkan dengan:

Properti margin-left dan margin-right dapat diatur ke beberapa nilai eksplisit:

BODY {

width: 40em;

background: fluorescent;

}

P {

width: 30em;

margin-right: auto;

margin-left: auto

}

Dalam hal ini, margin kiri dan kanan akan masing-masing selebar lima em karena keduanya membagi sepuluh em yang tersisa (40em-30em). Tidak perlu menyiapkan lebar eksplisit untuk elemen BODY; itu dilakukan di sini untuk kesederhanaan.

---

8. Siapa yang memelihara spesifikasi CSS?

Konsorsium World Wide Web mempertahankan spesifikasi CSS.

---

9. Berapa banyak cara CSS dapat diintegrasikan sebagai halaman web?

CSS dapat diintegrasikan dalam tiga cara:

• Inline: Atribut style dapat digunakan agar CSS menerapkan elemen HTML.
• Tertanam: Elemen Head dapat memiliki elemen Style di mana kode dapat ditempatkan.
• Tertaut/ Diimpor: CSS dapat ditempatkan di file eksternal dan ditautkan melalui elemen tautan.

---

10. Apa kelebihan dan kekurangan dari External Style Sheets?

Manfaat:

• Satu file dapat digunakan untuk mengontrol banyak dokumen yang memiliki gaya berbeda.
• Beberapa elemen HTML dapat memiliki banyak dokumen, yang dapat memiliki kelas.
• Untuk mengelompokkan gaya dalam situasi gabungan, metode seperti pemilih dan pengelompokan digunakan.

Demerits:

• Pengunduhan ekstra diperlukan untuk mengimpor dokumen yang memiliki informasi gaya.
• Untuk merender dokumen, style sheet eksternal harus dimuat.
• Tidak praktis untuk definisi gaya kecil.

---

11. Diskusikan kelebihan dan kekurangan Embedded Style Sheets?

Kelebihan Lembar Gaya Tersemat:

• Beberapa jenis tag dapat dibuat dalam satu dokumen.
• Gaya, dalam situasi kompleks, dapat diterapkan dengan menggunakan metode Selector dan Grouping.
• Pengunduhan ekstra tidak diperlukan.

Kekurangan dari Embedded Style Sheets:

• Banyak dokumen tidak dapat dikontrol.

---

12. Apa yang dimaksud dengan pemilih CSS?

Sebuah string yang setara dengan elemen HTML yang mendeklarasikan atau sekumpulannya, dideklarasikan dan merupakan tautan yang dapat dirujuk untuk menghubungkan HTML dan Style sheet adalah pemilih CSS.

---

13. Sebutkan jenis media yang diizinkan CSS?

Desain dan penyesuaian dokumen diberikan oleh media. Dengan menerapkan kontrol media pada style sheet eksternal, style sheet tersebut dapat diambil dan digunakan dengan memuatnya dari jaringan.

---

14. Bedakan tag logis dari tag fisik?

• Meskipun tag fisik juga disebut sebagai mark-up presentasi, tag logis tidak berguna untuk penampilan.
• Tag fisik adalah versi yang lebih baru sedangkan tag logis adalah versi lama dan berkonsentrasi pada konten.

---

15. Membedakan konsep Style Sheet dari HTML?

Meskipun HTML menyediakan metode struktur yang mudah, HTML tidak memiliki gaya, tidak seperti Style sheet. Selain itu, style sheet memiliki kemampuan browser dan opsi pemformatan yang lebih baik.

---

16. Jelaskan 'peraturan'?

Ruleset : Selector dapat dilampirkan ke selector lain untuk diidentifikasi berdasarkan ruleset.

Ini memiliki dua bagian:

• Pemilih, misalnya R dan
• deklarasi {text-indent: 11pt}

---

17. Mengomentari sensitivitas huruf besar-kecil pada CSS?

Meskipun, tidak ada sensitivitas huruf besar-kecil pada CSS, namun jenis font, URL gambar, dll. Hanya bila XML deklarasi bersama dengan XHTML DOCTYPE digunakan pada halaman, CSS peka huruf besar-kecil.

---

18. Definisikan blok Deklarasi?

Katalog arah dalam kurung kurawal yang terdiri dari properti, titik dua, dan nilai disebut blok deklarasi.
misalnya: [properti 1: nilai 3]

---

19. Sebutkan berbagai atribut font?

Mereka adalah:

• Gaya tulisan
• Varian font
• berat font
• Ukuran font/tinggi garis
• Font-keluarga
• Keterangan
• Ikon

 

---

20. Mengapa memasukkan file dengan mengimpornya mudah?

Mengimpor memungkinkan penggabungan lembar eksternal untuk disisipkan dalam banyak lembar. File dan lembar yang berbeda dapat digunakan untuk memiliki fungsi yang berbeda. Sintaksis:

@notasi impor, digunakan dengan tag.

---

21. Apa kegunaan pemilih Kelas?

Selector yang unik untuk gaya tertentu, disebut selector CLASS. Deklarasi gaya dan keterkaitan dengan HTML dapat dilakukan melalui ini. Sintaksis:

Nama kelas
bisa berupa AZ, az atau angka.
.top {font: 14em ;}, pemilih kelas
kelas ini dikaitkan dengan elemen

---

22. Bedakan pemilih Kelas dari pemilih ID?

Meskipun blok keseluruhan diberikan kepada pemilih kelas, pemilih ID hanya memilih satu elemen yang berbeda dari elemen lainnya. Dengan kata lain, ID bersifat unik sedangkan kelas tidak. Mungkin saja suatu elemen memiliki kelas dan ID.

---

23. Bisakah lebih dari satu deklarasi ditambahkan di CSS?

Ya, itu bisa dicapai dengan menggunakan titik koma.

---

24. Apa yang dimaksud dengan elemen Pseudo?

Elemen semu digunakan untuk menambahkan efek khusus ke beberapa penyeleksi. CSS digunakan untuk menerapkan gaya dalam mark-up HTML. Dalam beberapa kasus ketika mark-up atau gaya tambahan tidak memungkinkan untuk dokumen, maka ada fitur yang tersedia di CSS yang dikenal sebagai elemen semu. Ini akan memungkinkan mark-up tambahan pada dokumen tanpa mengganggu dokumen sebenarnya.

---

25. Bagaimana cara mengesampingkan menggarisbawahi Hyperlink?

Pernyataan kontrol dan style sheet eksternal digunakan untuk mengesampingkan garis bawah Hyperlink.

Misalnya:

B {

text-decoration: none;

}

<B href="career.html" style="text-decoration: none">link text</B>

 

---

26. Apa yang terjadi jika lebar 100% digunakan bersama dengan float di seluruh halaman?

Saat membuat deklarasi float, 1 piksel ditambahkan setiap kali digunakan dalam bentuk batas, dan lebih banyak lagi float yang diperbolehkan setelahnya.

---

27. Bisakah nilai properti default dikembalikan melalui CSS? Jika ya, bagaimana caranya?

Di CSS, Anda tidak dapat kembali ke nilai lama karena kurangnya nilai default. Properti dapat dideklarasikan ulang untuk mendapatkan properti default.

---

28. Sebutkan berbagai jenis media yang digunakan?

Media yang berbeda memiliki sifat yang berbeda karena tidak peka huruf besar-kecil.

Mereka adalah:

• Aural – untuk penyintesis suara dan ucapan
• Cetak – memberikan pratinjau konten saat dicetak
• Proyeksi- memproyeksikan CSS pada proyektor.
• Genggam- menggunakan perangkat genggam.
• Layar- layar komputer dan laptop.

---

29. Apa itu Model Kotak CSS dan apa saja elemennya?

Kotak ini mendefinisikan desain dan tata letak elemen CSS. Unsur-unsurnya adalah:

Margin: lapisan paling atas, struktur keseluruhan ditampilkan
Batas: opsi padding dan konten dengan batas di sekelilingnya ditampilkan. Warna latar belakang mempengaruhi batas.
Lapisan: Spasi ditampilkan. Warna latar belakang mempengaruhi batas.
Konten: Konten sebenarnya ditampilkan.

---

30. Apa yang dimaksud dengan pemilih kontekstual?

Selektor yang digunakan untuk memilih kejadian khusus suatu elemen disebut pemilih kontekstual. Sebuah spasi memisahkan masing-masing penyeleksi. Hanya elemen terakhir dari pola yang ditangani dalam pemilih jenis ini. Misalnya: TD P TEKS {warna: biru}

---

31. Bandingkan nilai RGB dengan kode warna Heksadesimal?

Suatu warna dapat ditentukan dengan dua cara:

• Suatu warna diwakili oleh 6 karakter yaitu kode warna heksadesimal. Merupakan kombinasi angka dan huruf dan diawali dengan #. misalnya: g {warna: #00cjfi}
• Suatu warna diwakili oleh campuran merah, hijau dan biru. Nilai suatu warna juga dapat ditentukan. misal: rgb(r,g,b): Dalam tipe ini nilainya bisa berada di antara bilangan bulat 0 dan 255. rgb(r%,g%,b%): persentase merah, hijau dan biru ditampilkan.

---

32. Definisikan sprite Gambar dengan konteks ke CSS?

Ketika sekumpulan gambar dikolaborasikan menjadi satu gambar, ini dikenal sebagai 'Image Sprite'. Karena memuat setiap gambar di halaman web memakan waktu, penggunaan sprite gambar mengurangi waktu yang dibutuhkan dan memberikan informasi dengan cepat.

Pengkodean CSS:

img.add { width: 60px; height: 55px; background: url (image.god) 0 0; }

 

Dalam hal ini, hanya bagian yang diperlukan saja yang digunakan. Pengguna dapat menghemat banyak margin dan waktu melalui ini.

---

33. Bandingkan Pengelompokan dan Penyusunan di CSS?

Pengelompokan: Penyeleksi dapat dikelompokkan dengan nilai properti yang sama dan kodenya dikurangi.
Misalnya :

h1 {

color: blue;

}

h2 {

color: blue;

}

p {

color: blue;

}

 

Dapat dilihat dari kode bahwa setiap elemen memiliki properti yang sama. Penulisan ulang dapat dihindari dengan menulis setiap pemilih dipisahkan dengan koma.

Bersarang: Menentukan pemilih di dalam pemilih disebut bersarang.

P

{

color: red;

text-align: left;

}

.marked

{

background-color: blue;

}

.marked p

{

color: green;

}

 

---

34. Bagaimana cara menentukan dimensi suatu unsur?

Properti dimensi dapat ditentukan dengan:

• Tinggi
• Tinggi maksimal
• Lebar maksimal
• Tinggi minimal
• Lebar minimum
• Lebar

---

35. Definisikan properti float dari CSS?

Dengan properti float, gambar dapat dipindahkan ke kanan atau ke kiri beserta teks yang akan dibungkus di sekitarnya. Elemen sebelum properti ini diterapkan tidak mengubah propertinya.

---

36. Bagaimana fungsi indeks Z?

Tumpang tindih mungkin terjadi saat menggunakan CSS untuk memposisikan elemen HTML. Indeks Z membantu dalam menentukan elemen yang tumpang tindih. Ini adalah angka yang bisa positif atau negatif, nilai defaultnya adalah nol.

---

37. Apakah degradasi yang anggun itu?

Jika komponen gagal, komponen akan terus berfungsi dengan baik meskipun terjadi degradasi yang baik. Aplikasi browser terbaru digunakan saat halaman web dirancang. Karena tidak tersedia untuk semua orang, terdapat fungsi dasar yang memungkinkan penggunaannya untuk khalayak yang lebih luas. Jika gambar tidak tersedia untuk dilihat, teks ditampilkan dengan tag alt.

---

38. Apa yang dimaksud dengan peningkatan progresif?

Ini adalah alternatif dari degradasi yang anggun, yang berkonsentrasi pada masalah web. Fungsionalitasnya sama, namun memberikan keunggulan ekstra bagi pengguna yang memiliki bandwidth terbaru. Ini telah menjadi penggunaan yang menonjol baru-baru ini dengan koneksi internet seluler yang memperluas basisnya.

---

39. Bagaimana kompatibilitas mundur dirancang dalam CSS?

Metode lembar HTML dikolaborasikan dengan CSS dan digunakan sesuai dengan itu.

---

40. Bagaimana cara menghilangkan celah di bawah gambar?

Karena gambar yang merupakan elemen sebaris diperlakukan sama seperti teks, maka terdapat celah yang tersisa, yang dapat dihilangkan dengan:

CSS

img { display: block ; }

 

---

41. Mengapa @import hanya di atas?

@import lebih disukai hanya di bagian atas, untuk menghindari aturan utama. Secara umum, urutan peringkat diikuti di sebagian besar bahasa pemrograman seperti Java, Modula, dll. Di C, # adalah contoh menonjol dari @import yang berada di atas.

---

42. Manakah di antara berikut ini yang lebih preseden: properti CSS atau prosedur HTML?

CSS lebih preseden dibandingkan prosedur HTML. Browser yang tidak memiliki dukungan CSS akan menampilkan atribut HTML.

---

43. Apa itu gaya Inline?

Gaya Inline dalam CSS digunakan untuk menambahkan gaya pada elemen HTML individual.

---

44. Bagaimana komentar dapat ditambahkan di CSS?

Komentar di CSS dapat ditambahkan dengan /* dan */.

---

45. Tentukan Pemilih Atribut?

Itu ditentukan oleh sekumpulan elemen, nilai, dan bagian-bagiannya.

---

46. ​​Definisikan properti?

Sebuah gaya, yang membantu dalam mempengaruhi CSS. Misalnya FONT. Mereka memiliki nilai atau properti yang sesuai di dalamnya, seperti FONT memiliki gaya berbeda seperti tebal, miring, dll.

---

47. Apa itu Lembar Gaya Alternatif?

Alternate Style Sheets memungkinkan pengguna untuk memilih gaya tampilan halaman menggunakan menu tampilan>gaya halaman. Melalui Alternate Style Sheet, pengguna dapat melihat beberapa versi halaman sesuai kebutuhan dan preferensi mereka.

---

48. Apakah kutipan wajib ada di URL?

Kutipan bersifat opsional di URL, dan bisa tunggal atau ganda.

---

49. Apa yang dimaksud dengan aturan?

Aturan yang berlaku pada seluruh lembar dan tidak sebagian disebut at-rule. Didahului dengan @ diikuti oleh AZ, az atau 0-9.

---

50. Bagaimana cara CSS mengalir agar tercampur dengan sheet pribadi pengguna?

Properti dapat berupa kumpulan di tempat yang direkomendasikan dan dokumen yang dimodifikasi agar CSS dapat digabungkan dengan lembar pribadi pengguna.

Pertanyaan wawancara ini juga akan membantu dalam viva (lisan) Anda. Di setiap industri, penggunaan situs web dan aplikasi web meningkat dari hari ke hari, dan CSS merupakan bagian penting untuk membangun situs web yang menarik. Jadi, ada permintaan besar bagi desainer UI/UX dan Web yang memiliki pengetahuan yang baik tentang CSS dengan HTML.