CSS INTERVIEW
QUESTIONS & ANSWERS
Important CSS questions and answers for
front-end developer technical interview
DEVELOPER UPDATES
CSS INTERVIEW QUESTIONS AND ANSWERS
What is z-index and why it is used?
z-index is a CSS property that controls the vertical stacking
order of elements on a web page.
It specifies the order in which elements are stacked on top of
each other, with higher values appearing on top of lower values.
z-index: 2
z-index: 3
z-index: 2
z-index: 3
z-index: 4
DEVELOPER UPDATES [Link] 13
CSS INTERVIEW QUESTIONS AND ANSWERS
What is responsive design and how do you create it?
Responsive web design is a way to make websites that look
good and work well on many different devices and screen sizes.
This is done by designing and coding the site so that its layout,
images, and other parts change automatically to fit the size of
the screen being used to view it.
This method improves the user experience and makes it easier
for everyone to interact with the content, no matter what device
they are using.
Important steps to create responsive web design:
1. Define the viewport: Start by adding a meta tag to the HTML
head to set the viewport, ensuring that the page is displayed
correctly on different devices. Use <meta name="viewport"
content="width=device-width, initial-scale=1.0">.
2. Use flexbox and CSS Grid: Use layout techniques like flexbox
and CSS Grid to make more complex responsive layouts, as
they give you more flexibility and control than traditional
float-based layouts.
3. Use CSS media queries: to use different styles depending on
the size of the screen, the device's resolution, or other factors.
This gives you the ability to change the design for certain
breakpoints.
4. Use fluid grids: Instead of fixed pixel widths, make layouts
with relative units like percentages or viewport units (vw, vh).
This will make the layout change itself depending on the size
of the screen.
5. Choose a desktop-first or mobile-first strategy: You can
start designing for smaller screens (called "mobile-first") or
bigger screens (desktop-first). Mobile-first is usually
recommended because it makes layouts simpler and puts
the most important content first.
DEVELOPER UPDATES [Link] 14
CSS INTERVIEW QUESTIONS AND ANSWERS
Explain about overflow property.
With CSS's "overflow" property, you can control how content
acts when it goes outside of its container.
In other words, the overflow property tells how the content
inside an element should be shown when the content is bigger
than the element itself.
There are four common values for the overflow property:
1. visible: This is the default value. When content exceeds the
limits of its container, it still remains visible and does not
disappear.
2. hidden: Any content that exceeds the container's boundaries
is hidden and inaccessible to the user when this value is set.
3. scroll: This value adds scrollbars to the container, allowing the
user to scroll through the content even if it does not overflow.
4. auto: This value provides a more dynamic approach by adding
scrollbars to the container only if the content overflows its
boundaries.
DEVELOPER UPDATES [Link] 15
CSS INTERVIEW QUESTIONS AND ANSWERS
How to animate the element using CSS?
Animating an element using CSS involves changing the
element's properties over time, such as its position, size, or
opacity.
There are two main ways to do this: using keyframes and using
transitions.
Keyframes allow you to define specific points in time in an
animation and specify how the element should look at each
point.
Each keyframe is defined as a percentage of the total animation
time, from 0% (the starting point) to 100% (the ending point).
You can then specify which CSS properties should be changed
at each keyframe, as in the following example:
the animation changes the element's opacity and position
over 2 seconds
keyframe name
The animation repeats infinitely, alternating between forward and
backward directions.
DEVELOPER UPDATES [Link] 16
CSS INTERVIEW QUESTIONS AND ANSWERS
Transitions, on the other hand, allow you to specify which
properties of an element should change, as well as the duration
and timing of the animation.
They work on the principle of changing a property from one
state to another state over time, as in the following example:
Animation changes width, height and
color over 2 seconds on hover
What is the difference between em and rem?
Both em and rem are units of measurement in CSS. They are
used to define the size of the typographic elements like font-size
or padding.
[Link]:
The percentage of em is relative to the font-size of the parent
element.
For example, if the font-size of the parent element is 16px, and
the font-size of the child element is set to 1.5em, then the child
element font-size will be calculated as 24px. EM is more
commonly used in typography.
DEVELOPER UPDATES [Link] 17
CSS INTERVIEW QUESTIONS AND ANSWERS
2. REM:
REM stands for Root EM, meaning it's relative to the root
element of the page (usually HTML).
It takes the font-size of the root element as a reference and sets
the size accordingly. REM is typically used in layout and sizing.
For instance, let's say you want to create a container that will
occupy 50% width of the window. If you set the width to 50rem,
it will occupy 50% of the width of the viewport.
Key differences:
EM is relative to the parent element size, while REM is
relative to the root element size.
EM's value changes based on its parent element, and REM's
value changes only once, based on the root element.
When to use EM or REM?
EMs are more useful for relative font size scaling. They allow for
easier changes to fonts throughout a design.
On the other hand, REMs are a better option if you need to size-
up structural elements like margins or padding based on the
root font-size.
DEVELOPER UPDATES [Link] 18
CSS INTERVIEW QUESTIONS AND ANSWERS
What are pseudo classes and elements?
Pseudo-classes: These are special keywords added to selectors
in CSS, changing the element during specific states.
1. :hover: Activated when you place your cursor over an
element.
2. :active: Activated when you click an element.
3. :visited: Applied to links that the user has already visited.
4. :focus: Applied when an element is selected, like clicking an
input field.
Changes link color on hover
Changes background color on
button click
Changes visited link color
Outlines an input field when it's
selected
DEVELOPER UPDATES [Link] 19
Stay ahead with daily updates!
Follow us on social media for useful web
development content.
@richwebdeveloper
@new_javascript
@developerupdates
@developerupdates
@_chetanmahajan
Note: This kit is continuously updated. Please continue to
check Gumroad or our website (where you purchased this) for
updated questions and answers. You will receive all updates
for FREE
Download from our Website
Download on Gumroad
[Link]