Scribd
Upload
12 views

CSS Interview Questions

Uploaded by

Aswini Veluchamy
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
12 views

CSS Interview Questions

Uploaded by

Aswini Veluchamy
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

Basic CSS Questions

1. What is CSS and what is its purpose?


o CSS (Cascading Style Sheets) is used to style and layout web pages, including
the design, look, and formatting of HTML elements.
2. What are the different ways to apply CSS to a web page?
o Inline CSS
o Internal CSS (within <style> tags in the HTML)
o External CSS (linking to an external .css file)
3. What is the difference between class selectors and ID selectors in CSS?
o Class selectors are denoted with a . and can be used multiple times within a
document.
o ID selectors are denoted with a # and should be unique within a document.

Intermediate CSS Questions

4. What is the box model in CSS?


o The CSS box model describes the rectangular boxes generated for elements in
the document tree and consists of margins, borders, padding, and the content
itself.
5. Explain the difference between margin and padding.
o Margin is the space outside the border of an element, while padding is the
space inside the border of an element.
6. What is the difference between relative, absolute, fixed, and sticky
positioning in CSS?
o relative: Positioned relative to its normal position.
o absolute: Positioned relative to the nearest positioned ancestor.
o fixed: Positioned relative to the viewport.
o sticky: Toggles between relative and fixed based on scroll position.

Advanced CSS Questions

7. Explain the CSS flexbox layout model.


o Flexbox is a layout model that allows elements to align and distribute space
within a container. It offers easy alignment, spacing, and distribution of
elements, even when their size is unknown or dynamic.
8. What are CSS Grid Layouts and how do they differ from Flexbox?
o CSS Grid Layout is a two-dimensional layout system for the web, allowing
you to layout items in rows and columns. Flexbox is one-dimensional,
focusing on either rows or columns, while Grid can handle both
simultaneously.
9. How do CSS preprocessors like SASS or LESS improve the workflow?
o CSS preprocessors add functionality such as variables, nested rules, and
functions to CSS, making it more maintainable and easier to write complex
styles.

Responsive Design Questions

10. What is responsive web design, and why is it important?


o Responsive web design ensures that web pages render well on various devices
and window or screen sizes. It is important for providing a good user
experience across different devices.
11. How do media queries work in CSS?
o Media queries allow you to apply styles based on the conditions such as screen
size, resolution, and orientation. They are used to create responsive designs.
12. What is the viewport meta tag, and why is it used?
o The viewport meta tag gives the browser instructions on how to control the
page's dimensions and scaling. It's essential for responsive web design to
ensure the layout is correctly scaled on different devices.

Performance and Optimization Questions

13. What techniques can you use to improve CSS performance?


o Minimize the use of complex selectors.
o Use shorthand properties.
o Minify and combine CSS files.
o Use external stylesheets to cache CSS.
14. What are the benefits of using CSS variables (custom properties)?
o CSS variables allow for easier management and reuse of values throughout a
stylesheet, improving maintainability and reducing redundancy.
15. Explain the concept of Critical CSS.
o Critical CSS refers to the CSS required to render the above-the-fold content of
a web page. It helps to improve the initial load performance by inlining this
critical CSS directly in the HTML.

These questions should help gauge a candidate's knowledge and understanding of CSS and its
various features and applications.

You might also like