Scribd
Upload
5 views

CSS_Interview_Questions

Uploaded by

Dattatreya Chary Nagoju
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

CSS_Interview_Questions

Uploaded by

Dattatreya Chary Nagoju
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

CSS Interview Questions and Answers

Basic CSS Questions (Easy)

What is CSS?
CSS (Cascading Style Sheets) is a language used to style the appearance of HTML elements
on a web page. It controls layout, color, fonts, and more.

What is the difference between class and id selectors in CSS?


A class selector can be used on multiple elements, while an id is unique to one element. You
use `.` to select a class (e.g., `.example`) and `#` to select an id (e.g., `#example`).

What are the three ways to apply CSS to a web page?


Inline CSS (using the `style` attribute inside an HTML element), Internal CSS (using a
`<style>` tag in the `<head>` section), and External CSS (linking a separate `.css` file using
the `<link>` tag).

What is the purpose of the box-sizing property in CSS?


The `box-sizing` property controls how the width and height of an element are calculated,
including padding and borders. Common values are `content-box` and `border-box`.

What are pseudo-classes in CSS?


Pseudo-classes (like `:hover`, `:focus`, `:nth-child`) allow you to style elements based on
their state or position within the DOM.

Intermediate CSS Questions (Medium)

Explain the CSS Box Model.


The CSS Box Model consists of four areas: content, padding, border, and margin. It defines
how an element is rendered in terms of space it occupies on a page.

How does Flexbox work in CSS?


Flexbox is a layout model that allows you to design a flexible and responsive layout
structure without using floats or positioning. Flex items adjust and align according to the
container’s properties (`display: flex`, `justify-content`, `align-items`, etc.).

What is the difference between position: absolute, relative, fixed, and sticky?
absolute: Positioned relative to the nearest positioned ancestor. relative: Positioned relative
to its normal position. fixed: Positioned relative to the viewport. sticky: Switches between
relative and fixed positioning based on the scroll position.
What is the z-index property in CSS?
The `z-index` property controls the vertical stacking order of elements. Elements with a
higher `z-index` appear on top of elements with a lower `z-index`.

How can you create a responsive design using CSS?


Responsive design can be achieved using media queries, flexible grids, percentages for
layout, and responsive units like `em` or `rem`. Flexbox and CSS Grid are commonly used for
responsive layouts.

Advanced CSS Questions (Hard)

What are CSS preprocessors, and how do they differ from CSS?
CSS preprocessors like SASS, LESS, and Stylus extend CSS with features like variables,
nested rules, and functions. They require compilation into standard CSS.

What is the difference between display: none and visibility: hidden in CSS?
display: none removes the element from the document flow, while visibility: hidden hides
the element but maintains its space in the layout.

Explain CSS Grid and how it differs from Flexbox.


CSS Grid is a two-dimensional layout system, meaning you can control both rows and
columns. Flexbox is a one-dimensional layout system (either row or column). CSS Grid is
more suited for complex layouts, while Flexbox is ideal for simpler, one-axis alignment.

How do CSS animations work, and what are keyframes?


CSS animations use `@keyframes` to define the intermediate steps between start and end
states of an animation. You can apply the animation to elements using the `animation`
property.

How can you optimize CSS for better performance?


Optimizing CSS can involve minimizing the size of CSS files (e.g., through minification),
reducing the use of complex selectors, deferring non-critical CSS, and limiting the number of
style recalculations.

Responsive Design & Performance Questions

How does the min-width and max-width properties help in responsive design?
min-width sets a minimum width for an element, ensuring it doesn’t shrink below a certain
size, while max-width limits how wide an element can grow. Both help in creating layouts
that adapt to various screen sizes.
What is the difference between rem and em units in CSS?
rem is relative to the root element’s font size, while em is relative to the font size of its
parent element. rem provides more consistency in sizing across elements.

What is the difference between transform: translate() and position: relative?


transform: translate() moves an element visually but does not affect the document flow or
neighboring elements, whereas position: relative shifts the element while keeping it in the
flow.

How can you create a CSS-only dropdown menu?


A CSS-only dropdown can be created using the `:hover` pseudo-class to display a submenu
when the user hovers over a parent menu item.

Explain what critical CSS is.


Critical CSS refers to the minimum amount of CSS required to render the visible portion of
the page. It helps to improve the page's loading time by deferring non-essential CSS until the
critical content has been rendered.

You might also like