NEW
Font size
WorksheetsCSS and JavaScript Quiz
Total questions: 60
Worksheet time: 30mins
What does the 'contain' property in CSS do?
It clips the content to the container size
It enables containment for performance optimizations
It sets up a new stacking context
It disables CSS inheritance
What is the default stacking context in CSS?
The root HTML element
The body tag
The first positioned element
The first child element
What happens if a flex container has `flex-wrap: wrap` and `align-content: stretch`?
Lines stretch to fill the cross-axis
Items stretch to fill the main axis
Items collapse to fit the container
All flex items stack vertically
What does `isolation: isolate` do in CSS?
Hides an element from the DOM
Detaches from CSS inheritance
Creates a new stacking context
Applies a separate box model
What is the specificity of the selector `div#app.container > p.text::first-letter`?
1, 1, 2
1, 1, 3
0, 2, 3
1, 2, 3
Which pseudo-class only applies to form elements that have been modified?
:valid
:checked
:target
:dirty
What does `all: unset` do?
Resets all inheritable and non-inheritable properties
Removes only inherited styles
Removes inline styles
Applies default browser styles
In CSS Grid, what does `grid-auto-flow: dense` do?
Packs grid items tightly to fill gaps
Prevents item overlap
Aligns items in rows
Enables responsive layouts
What is the difference between `em` and `rem` units?
`em` is relative to parent, `rem` to root
`rem` is always larger
`em` only works in body
They are always equal
What does `clip-path: polygon(...)` allow?
Crops images into rectangles
Applies a mask
Creates custom shapes
Applies a border-radius
What will `position: sticky` require to work?
`top` must be set and `overflow: hidden` on parent
The element must be inside a table
A defined `top` and scrollable ancestor
A z-index value
What is the effect of `pointer-events: none`?
Disables hover styles
Makes element not clickable
Applies only to SVGs
Element ignores all mouse interactions
What happens when you use `calc(100% - 10px)` in width?
Throws a syntax error
Calculates at runtime based on parent size
Sets the width to 90px
Works only in Chrome
Which media feature allows checking if user prefers reduced motion?
(device-width: 1000px)
(prefers-color-scheme)
(prefers-reduced-motion)
(update-frequency)
What is `backdrop-filter` used for?
To add gradients
To render shadows
To apply filters behind an element
To mask images
What is the `overscroll-behavior` property used for?
To control scroll chaining
To disable scrolling
To detect scroll velocity
To set smooth scrolling
Which CSS feature allows styling based on light/dark mode?
`@style-mode`
`@media theme`
`@media (prefers-color-scheme)`
`@media (theme-color)`
What is `accent-color` in CSS?
Applies to backgrounds
Controls animation colors
Applies to form elements like checkboxes
Used in media queries
What will `aspect-ratio: 1 / 1` do?
Forces a square box
Makes height twice the width
Applies only to images
Applies only to flex items
What does `:has()` pseudo-class allow?
Selecting parents of elements
Style based on hover
Select parent if it contains a specific child
Apply styles after transition
What is the output of this code? console.log(typeof NaN);
number
"number"
"NaN"
undefined
Which method converts a JSON string into a JavaScript object?
JSON.stringify()
JSON.parse()
JSON.objectify()
JSON.toObject()
What will this output? console.log("5" + 2);
"52"
7
NaN
Error
What does the === operator check?
Only value
Value and type
Only type
Nothing, it's assignment
What is the result of: console.log(Boolean(""));
true
false
"false"
Error
Which of the following is a correct way to declare a function?
function = myFunc() {}
def myFunc() {}
function myFunc() {}
let myFunc: function {}
What is the correct way to write an arrow function with one parameter x that returns x * 2?
(x) => { return x * 2; }
x => x * 2
(x) -> x * 2
function(x) => x * 2
Which array method adds an element to the end?
shift()
push()
pop()
unshift()
What is the result of this? [1, 2, 3].length
3
2
1
undefined
What keyword is used to declare a constant in JavaScript?
static
const
let
final
What is the default return value of a function that doesn't return anything?
undefined
null
""
0
How can you stop a loop immediately?
stop;
break;
return;
exit();
What will this print? console.log(typeof []);
"object"
"array"
"list"
"undefined"
Which method removes the first element of an array?
shift()
pop()
slice()
splice()
Which of these is NOT a primitive type in JavaScript?
string
boolean
array
number
What does the setTimeout function do?
Delays a function call forever
Calls a function after a set time
Repeats a function forever
Stops code execution
How do you create a JavaScript object?
let obj = { name: "John", age: 30 };
let obj = (name: "John", age: 30);
let obj = [name = "John", age = 30];
let obj = ;
Which of the following is falsy?
""
"false"
[]
{}
What will this return? typeof undefined
"undefined"
"null"
"object"
Error
How can you check if a variable x is not equal to 5?
x !== 5
x =! 5
x = 5
x !=== 5
What does `display: flex` do?
Hides the element
Enables flexbox layout
Creates grid columns
Floats the element
Which property changes the text color of an element?
background-color
border-color
color
font-color
What is the result of `margin: 10px 20px;`?
10px top & bottom, 20px left & right
10px all sides
20px top & bottom, 10px left & right
Only top margin is 10px
Which unit is relative to the font size of the root element?
em
rem
%
px
What does `position: relative` do?
Positions the element relative to its normal position
Fixes it to the screen
Removes it from the document flow
Makes it stack behind all elements
Which value of `z-index` will make an element appear on top?
0
-1
1
A higher positive number
How do you center an element horizontally using flexbox?
text-align: center;
justify-content: center;
align-items: center;
margin: auto;
What does `overflow: hidden` do?
Hides content that overflows the box
Scrolls content automatically
Makes box invisible
Disables overflow detection
What is the correct syntax for a class selector in CSS?
#classname
.classname
classname
:classname
What does the `:hover` pseudo-class do?
Applies styles when the user hovers over an element
Animates the element
Detects clicks
Applies style to visited links
Which CSS property changes the background image of an element?
image
src
background-image
content
How do you make text bold in CSS?
font-weight: normal;
font-weight: bold;
font-style: bold;
text-style: bold;
Which property controls the space between lines of text?
A. letter-spacing
B. line-height
C. word-spacing
D. text-indent
What does `box-sizing: border-box;` do?
A. Includes padding and border in the total width and height
Ignores padding
Removes border
Sets default box model
Which of these properties sets the size of the text?
A. font-style
B. font-weight
C. font-size
D. font-family
How can you apply the same style to multiple classes?
A. .class1, .class2 { ... }
B. .class1 .class2 { ... }
C. #class1.class2 { ... }
D. .class1 & .class2 { ... }
What does `max-width: 100%` do?
A. Forces image to always be 100px wide
B. Prevents element from exceeding container width
Breaks layout
Centers element
What will `visibility: hidden` do?
A. Removes the element
B. Hides and disables the element
C. Hides it but still takes up space
D. Collapses the layout
Which property adds space inside the border of an element?
A. margin
B. spacing
C. padding
D. indent
Which of these creates a media query for screens smaller than 600px?
A. @media screen > 600px
B. @media screen and (min-width: 600px)
C. @media screen and (max-width: 600px)
D. @media (width: <600px)
