Top 50 CSS-interviewvragen en antwoorden (2025)

Hier zijn CSS (CSS3) interviewvragen en antwoorden voor zowel eerstejaars als ervaren kandidaten om hun droombaan te krijgen.

Gratis pdf-download: CSS-interviewvragen

1. Wat is CSS?

De volledige vorm van CSS is Cascading Style Sheets. Het is een stijltaal die er eenvoudig genoeg voor is HTML elementen. Het is populair bij webontwerp en de toepassing ervan is ook gebruikelijk in XHTML.

---

2. Wat is de oorsprong van CSS?

Standard Generalized Markup Language markeerde het begin van stylesheets in de jaren tachtig.

---

3. Wat zijn de verschillende varianten van CSS?

De variaties voor CSS zijn:

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

---

4. Wat zijn de beperkingen van CSS?

Beperkingen zijn:

•  Oplopen via selectors is niet mogelijk
• Beperkingen van verticale controle
• Geen uitdrukkingen
• Geen kolomdeclaratie
• Pseudoklasse die niet wordt beheerst door dynamisch gedrag
• Regels, stijlen, targeting van specifieke tekst niet mogelijk

---

5. Wat zijn de voordelen van CSS?

Voordelen zijn:

• bandbreedte
• Consistentie op de hele site
• Pagina opnieuw formatteren
• Toegankelijkheid
• Inhoud gescheiden van presentatie

---

6. Wat zijn CSS-frameworks?

Het zijn vooraf geplande bibliotheken, die een eenvoudigere en meer aan de standaarden voldoende webpagina-stijl mogelijk maken, met behulp van CSS-taal.

---

7. Hoe kunnen blokelementen worden gecentreerd met CSS1?

Blokniveau-elementen kunnen worden gecentreerd door:

De eigenschappen margin-left en margin-right kunnen op een expliciete waarde worden ingesteld:

BODY {

width: 40em;

background: fluorescent;

}

P {

width: 30em;

margin-right: auto;

margin-left: auto

}

In dit geval zijn de linker- en rechtermarge elk vijf ems breed, omdat ze de tien resterende ems van (40em-30em) opsplitsen. Het was niet nodig om een ​​expliciete breedte in te stellen voor het BODY-element; het is hier gedaan voor de eenvoud.

---

8. Wie onderhoudt de CSS-specificaties?

World Wide Web Consortium handhaaft de CSS-specificaties.

---

9. Op hoeveel manieren kan een CSS als webpagina worden geïntegreerd?

CSS kan op drie manieren worden geïntegreerd:

• Inline: Stijlattribuut kan worden gebruikt om HTML-elementen op CSS toe te passen.
• Embedded: Het Head-element kan een Style-element bevatten waarin de code kan worden geplaatst.
• Gekoppeld/geïmporteerd: CSS kan in een extern bestand worden geplaatst en via een linkelement worden gekoppeld.

---

10. Welke voor- en nadelen hebben externe stylesheets?

Voordelen:

• Eén bestand kan worden gebruikt om meerdere documenten met verschillende stijlen te beheren.
• Meerdere HTML-elementen kunnen veel documenten bevatten, die klassen kunnen hebben.
• Om stijlen in samengestelde situaties te groeperen, worden methoden als selector en groepering gebruikt.

minpunten:

• Er is een extra download nodig om documenten met stijlinformatie te importeren.
• Om het document weer te geven, moet het externe stijlblad worden geladen.
• Niet praktisch voor kleine stijldefinities.

---

11. Bespreek de voor- en nadelen van ingebedde stylesheets?

Voordelen van ingebedde stijlbladen:

• Er kunnen meerdere tagtypen in één document worden gemaakt.
• Stijlen kunnen in complexe situaties worden toegepast met behulp van Selector- en Groeperingsmethoden.
• Extra download is niet nodig.

Nadelen van ingebedde stijlbladen:

• Meerdere documenten kunnen niet worden beheerd.

---

12. Wat betekent CSS-selector?

Een string-equivalent van HTML-elementen waarmee declaraties of een set daarvan worden gedeclareerd en een link is waarnaar kan worden verwezen voor het koppelen van HTML en een stijlblad is een CSS-selector.

---

13. De mediatypen inschakelen die CSS toestaat?

Het ontwerp en de aanpassing van documenten worden door media verzorgd. Door mediacontrole toe te passen op de externe stylesheets kunnen deze worden opgehaald en gebruikt door deze vanuit het netwerk te laden.

---

14. Onderscheid logische tags van fysieke tags?

• Hoewel fysieke tags ook wel presentatiemarkeringen worden genoemd, zijn logische tags nutteloos voor de schijn.
• Fysieke tags zijn nieuwere versies, terwijl logische tags oud zijn en zich concentreren op inhoud.

---

15. Stijlbladconcept onderscheiden van HTML?

Hoewel HTML een eenvoudige structuurmethode biedt, mist het stijl, in tegenstelling tot stijlbladen. Bovendien hebben stylesheets betere browsermogelijkheden en opmaakopties.

---

16. Beschrijf 'regelset'?

Regelset: Selectors kunnen aan andere selectors worden gekoppeld om door de regelset te worden geïdentificeerd.

Het bestaat uit twee delen:

• Keuzeschakelaar, bijv. R en
• declaratie {text-indent: 11pt}

---

17. Commentaar op de hoofdlettergevoeligheid van CSS?

Hoewel CSS geen hoofdlettergevoeligheid kent, zijn lettertypefamilies, URL's van afbeeldingen, enz. dat wel. Alleen wanneer XML declaraties samen met XHTML DOCTYPE worden gebruikt op de pagina, CSS is hoofdlettergevoelig.

---

18. Definieer het aangifteblok?

Een catalogus van richtingen binnen accolades, bestaande uit eigenschap, dubbele punt en waarde, wordt declaratieblok genoemd.
bijv.: [eigenschap 1: waarde 3]

---

19. De attributen van de verschillende lettertypen vermelden?

Dat zijn:

• Lettertype
• Lettertype-variant
• Lettertype dikte
• Lettergrootte/regelhoogte
• Font-familie
• Onderschrift
• icon

 

---

20. Waarom is het gemakkelijk om een ​​bestand in te voegen door het te importeren?

Door te importeren kunt u externe bladen combineren en in veel bladen invoegen. Verschillende bestanden en bladen kunnen worden gebruikt om verschillende functies te hebben. Syntaxis:

@import notatie, gebruikt met tag.

---

21. Wat is het gebruik van Class selector?

Selectors die uniek zijn voor een specifieke stijl, worden CLASS-selectors genoemd. Hiermee kan de stijl en associatie met HTML worden verklaard. Syntaxis:

Naam van de klasse
het kan AZ, az of cijfers zijn.
.top {font: 14em ;}, klassenkiezer
deze klasse is geassocieerd met element

---

22. Klassekiezer onderscheiden van ID-kiezer?

Hoewel een algemeen blok wordt gegeven aan de klassenkiezer, geeft de ID-kiezer de voorkeur aan slechts één enkel element dat verschilt van andere elementen. Met andere woorden: ID's zijn uniek, terwijl klassen dat niet zijn. Het is mogelijk dat een element zowel klasse als ID heeft.

---

23. Kan er meer dan één declaratie worden toegevoegd in CSS?

Ja, dit kan worden bereikt door een puntkomma te gebruiken.

---

24. Wat zijn pseudo-elementen?

Pseudo-elementen worden gebruikt om speciale effecten aan sommige selectors toe te voegen. CSS wordt gebruikt om stijlen toe te passen in HTML-opmaak. In sommige gevallen waarin extra opmaak of stijl niet mogelijk is voor het document, is er een functie beschikbaar in CSS die bekend staat als pseudo-elementen. Het maakt extra markeringen aan het document mogelijk zonder het eigenlijke document te verstoren.

---

25. Hoe onderstreepte hyperlinks overrulen?

Controle-instructies en externe stijlbladen worden gebruikt om onderstreepte hyperlinks te overrulen.

bv:

B {

text-decoration: none;

}

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

 

---

26. Wat gebeurt er als 100% breedte wordt gebruikt, samen met floats over de hele pagina?

Bij het maken van de float-declaratie wordt elke keer dat deze wordt gebruikt 1 pixel toegevoegd in de vorm van de rand, en daarna is nog meer float toegestaan.

---

27. Kan de standaardeigenschapswaarde worden hersteld via CSS? Zo ja, hoe?

In CSS kun je niet terugkeren naar oude waarden vanwege het ontbreken van standaardwaarden. De eigenschap kan opnieuw worden gedeclareerd om de standaardeigenschap te verkrijgen.

---

28. De verschillende gebruikte mediatypen vermelden?

Verschillende media hebben verschillende eigenschappen omdat ze niet hoofdlettergevoelig zijn.

Dat zijn:

• Auditief – voor geluidssynthesizers en spraak
• Afdrukken – geeft een voorbeeld van de inhoud wanneer deze wordt afgedrukt
• Projectie - projecteert de CSS op projectoren.
• Handheld- maakt gebruik van draagbare apparaten.
• Scherm-computers en laptopschermen.

---

29. Wat is CSS Box Model en wat zijn de elementen ervan?

Dit vak definieert het ontwerp en de lay-out van elementen van CSS. De elementen zijn:

Marge: de bovenste laag, de algehele structuur wordt getoond
Grens: de optie voor opvulling en inhoud met een rand eromheen wordt weergegeven. De achtergrondkleur beïnvloedt de rand.
Vulling: Spatie wordt weergegeven. De achtergrondkleur beïnvloedt de rand.
Content: Actuele inhoud wordt getoond.

---

30. Wat is contextuele selector?

De selector die wordt gebruikt om speciale exemplaren van een element te selecteren, wordt contextuele selector genoemd. Een spatie scheidt de individuele selectors. Alleen het laatste element van het patroon wordt in dit soort selector aangepakt. Voor bijvoorbeeld: TD P TEXT {kleur: blauw}

---

31. RGB-waarden vergelijken met hexadecimale kleurcodes?

Een kleur kan op twee manieren worden opgegeven:

• Een kleur wordt weergegeven door 6 tekens, dwz hexadecimale kleurcodering. Het is een combinatie van cijfers en letters en wordt voorafgegaan door #. bijv.: g {kleur: #00cjfi}
• Een kleur wordt weergegeven door een mengsel van rood, groen en blauw. Ook kan de waarde van een kleur worden opgegeven. bijv.: rgb(r,g,b): Bij dit type kunnen de waarden tussen de gehele getallen 0 en 255 liggen. rgb(r%,g%,b%): rood, groen en blauw percentage wordt getoond.

---

32. Definieer afbeeldingsprites met context voor CSS?

Wanneer een reeks afbeeldingen wordt samengevoegd tot één afbeelding, staat dit bekend als 'Image Sprites'. Omdat het laden van elke afbeelding op een webpagina tijd kost, verkort het gebruik van afbeeldingssprites de benodigde tijd en geeft het snel informatie.

CSS-codering:

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

 

In dit geval wordt alleen het benodigde onderdeel gebruikt. De gebruiker kan hierdoor aanzienlijke marge en tijd besparen.

---

33. Vergelijk groeperen en nesten in CSS?

Groeperen: Selectors kunnen worden gegroepeerd met dezelfde eigenschapswaarden en de code kan worden verminderd.
Bijv.:

h1 {

color: blue;

}

h2 {

color: blue;

}

p {

color: blue;

}

 

Uit de code blijkt dat elk element dezelfde eigenschap heeft. Herschrijven kan worden vermeden door elke selector gescheiden door een komma te schrijven.

Nesten: Het specificeren van een selector binnen een selector wordt nesten genoemd.

P

{

color: red;

text-align: left;

}

.marked

{

background-color: blue;

}

.marked p

{

color: green;

}

 

---

34. Hoe kan de dimensie van een element worden gedefinieerd?

Dimensie-eigenschappen kunnen worden gedefinieerd door:

• Lengte
• Maximale hoogte
• Maximale wijdte
• Minimale hoogte
• Min-breedte
• Breedte

---

35. Definieer de float-eigenschap van CSS?

Met de eigenschap float kan de afbeelding naar rechts of links worden verplaatst, samen met de tekst die eromheen moet worden gewikkeld. Elementen voordat deze eigenschap wordt toegepast, veranderen hun eigenschappen niet.

---

36. Hoe werkt de Z-index?

Overlapping kan optreden bij het gebruik van CSS voor het positioneren van HTML-elementen. Z-index helpt bij het specificeren van het overlappende element. Het is een getal dat positief of negatief kan zijn, waarbij de standaardwaarde nul is.

---

37. Wat is sierlijke degradatie?

In het geval dat het onderdeel defect raakt, blijft het goed werken ondanks een sierlijke degradatie. Bij het ontwerpen van een webpagina wordt gebruik gemaakt van de nieuwste browserapplicatie. Omdat het niet voor iedereen beschikbaar is, is er een basisfunctionaliteit die het gebruik ervan voor een breder publiek mogelijk maakt. Als de afbeelding niet kan worden bekeken, wordt tekst weergegeven met de alt-tag.

---

38. Wat is progressieve verbetering?

Het is een alternatief voor sierlijke degradatie, dat zich concentreert op de kwestie van het web. De functionaliteit is hetzelfde, maar biedt een extra voordeel voor gebruikers die over de nieuwste bandbreedte beschikken. Het wordt de laatste tijd prominent gebruikt, waarbij mobiele internetverbindingen hun basis uitbreiden.

---

39. Hoe kan achterwaartse compatibiliteit in CSS worden ontworpen?

HTML-bladmethoden werken samen met CSS en worden dienovereenkomstig gebruikt.

---

40. Hoe kan de opening onder de afbeelding worden verwijderd?

Omdat afbeeldingen als inline-elementen op dezelfde manier worden behandeld als teksten, blijft er een opening over die kan worden verwijderd door:

CSS

img { display: block ; }

 

---

41. Waarom staat @import alleen bovenaan?

@import heeft alleen bovenaan de voorkeur, om overheersende regels te voorkomen. Over het algemeen wordt de rangorde gevolgd in de meeste programmeertalen, zoals Java, Modula, enz. In C is de # een prominent voorbeeld van een @import bovenaan.

---

42. Welke van de volgende is meer precedent: CSS-eigenschappen of HTML-procedures?

CSS heeft meer precedent dan HTML-procedures. Browsers die geen CSS-ondersteuning hebben, geven HTML-attributen weer.

---

43. Wat is inlinestijl?

De Inline-stijl in een CSS wordt gebruikt om stijl toe te voegen aan individuele HTML-elementen.

---

44. Hoe kunnen opmerkingen worden toegevoegd in CSS?

Het commentaar in CSS kan toegevoegd worden met /* en */.

---

45. Attribuutkiezer definiëren?

Het wordt gedefinieerd door een reeks elementen, waarde en zijn onderdelen.

---

46. ​​Definieer eigendom?

Een stijl die helpt bij het beïnvloeden van CSS. Bijvoorbeeld lettertype. Ze hebben overeenkomstige waarden of eigenschappen, zoals FONT een andere stijl heeft, zoals vet, cursief enz.

---

47. Wat is een alternatief stijlblad?

Met Alternatieve stijlbladen kan de gebruiker de stijl selecteren waarin de pagina wordt weergegeven via het menu Beeld>Paginastijl. Via Alternatief stijlblad kan de gebruiker meerdere versies van de pagina bekijken op basis van zijn behoeften en voorkeuren.

---

48. Zijn aanhalingstekens verplicht in URL's?

Aanhalingstekens zijn optioneel in URL's en kunnen enkel of dubbel zijn.

---

49. Wat is regeren?

Regel, die van toepassing is op het hele blad en niet gedeeltelijk, staat bekend als at-rule. Het wordt voorafgegaan door @ gevolgd door AZ, az of 0-9.

---

50. Hoe kan CSS worden gecascadeerd om te worden gecombineerd met het persoonlijke blad van de gebruiker?

Eigenschappen kunnen op aanbevolen plaatsen worden ingesteld en het document kan worden aangepast zodat CSS kan worden gecombineerd met het persoonlijke blad van de gebruiker.

Deze interviewvragen zullen ook helpen bij uw viva (mondeling). In elke branche neemt het gebruik van websites en webapplicaties met de dag toe, en CSS is een essentieel onderdeel om aantrekkelijke websites te bouwen. Er is dus een enorme vraag naar UI/UX- en webontwerpers met een goede kennis van CSS met HTML.