Edu
Hub
Dashboard
Courses
My Progress
Leaderboard
AI Tools
AR
AR
Abdullah Rashid
abdullah@example.com
Navigation
🏠
Dashboard
📚
Courses
📈
My Progress
🏆
Leaderboard
✨
AI Tools
👤
Profile
🚪
Log Out
←
CSS Advance
⏱
15:00
Quit
0 / 20 answered
0%
CSS Advance
10 questions · Medium difficulty · 00:20:00 min
🔥 In Progress
Question 1
What is the difference between CSS Grid and Flexbox?
Grid is 2D, Flexbox is 1D
Flexbox is 2D, Grid is 1D
Same
Grid is older
Question 2
How do you create a keyframe animation?
@keyframes name { from {} to {} }
@animation keyframes
keyframes {}
@keyframe name {}
Question 3
What does "will-change" property do?
Hints to browser about which properties will change to optimize performance
Forces property change
Deprecated
Prevents changes
Question 4
What is CSS specificity and how is it calculated?
Weight that determines which rule applies; calculated as inline > ID > class > element
Order of styles
Importance flag
Browser specific
Question 5
How do you implement a responsive design without media queries?
Using flexbox or grid with auto-fill, minmax, and clamp()
Using JavaScript
Not possible
Using viewport meta only
Question 6
What is the purpose of "contain" property?
Improves performance by isolating a subtree from the rest of the page
Contains an element
Container queries
Holds content
Question 7
What is a CSS preprocessor and name two examples?
Sass, Less (or Stylus)
JavaScript, Python
jQuery, React
HTML, XML
Question 8
How do you create a parallax scrolling effect?
Using background-attachment: fixed on background images
Using transform: translateZ
Using perspective
Using scroll-snap
Question 9
What is the difference between "transform" and "translate"?
transform is a property, translate() is a function of transform
Same
translate is a property
transform moves, translate rotates
Question 10
What is "cascade" in CSS?
The order of styles combining and overriding based on origin, importance, specificity
Waterfall effect
Animation
Grid system
Question 11
How do you optimize CSS for performance?
Minify CSS, use fewer selectors, avoid @import, use CSS containment
Use more !important
Write all styles inline
Use only IDs
Question 12
What is "CSS Houdini"?
APIs that allow developers to extend CSS with JavaScript
A new framework
A CSS validator
A browser
Question 13
How do you create a sticky footer with CSS Grid?
Using grid with min-height: 100vh and footer in last row
Using position: fixed
Using margin-top: auto
Using flexbox only
Question 14
What is the difference between "rem" and "em"?
rem is relative to root font-size, em relative to parent
Same
rem is for margins
em is absolute
Question 15
How do you implement dark mode in CSS?
Using prefers-color-scheme media query
Using dark class
Using JavaScript only
Using @media light
Question 16
What is "isolation: isolate" used for?
Creates a new stacking context
Isolates from JS
Prevents click events
Hides element
Question 17
How can you create a CSS-only tooltip?
Using :hover on parent to show a pseudo-element
Using title attribute
Using JavaScript
Using <abbr>
Question 18
What is the "currentColor" keyword?
Refers to the current value of color property
Current time
Current window
Current border
Question 19
What does "backface-visibility: hidden" do?
Hides the back face of a 3D transformed element
Makes element invisible
Hides front face
Applies blur
Question 20
How do you debug CSS layout issues?
Use browser devtools, outline, or border
Guess
Restart browser
Delete CSS
✅ Answered:
0
⬜ Unanswered:
8
📊
20%
done
Submit Answers →