Scribd
Upload
5 views

CSS_Interview_Questions_Answers_Yogesh_Sabale

The document provides an overview of CSS, its applications in web development, and various concepts such as selectors, positioning, the Box Model, Flexbox, and CSS Grid. It also discusses responsive design techniques, animations, and performance optimization strategies. Additionally, it highlights the advantages of using external CSS and the preference for rem units over px in modern design.

Uploaded by

Yogesh Sabale
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

CSS_Interview_Questions_Answers_Yogesh_Sabale

The document provides an overview of CSS, its applications in web development, and various concepts such as selectors, positioning, the Box Model, Flexbox, and CSS Grid. It also discusses responsive design techniques, animations, and performance optimization strategies. Additionally, it highlights the advantages of using external CSS and the preference for rem units over px in modern design.

Uploaded by

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

CSS Interview Questions & Answers - Yogesh Punaji Sabale

What is CSS, and why is it used in web development?


CSS (Cascading Style Sheets) is used to style HTML elements. It controls layout, colors, fonts,
spacing, and responsiveness.

What are the different ways to apply CSS to a webpage?


Inline CSS (directly on elements), Internal CSS (within <style> in the <head>), External CSS
(separate .css file).

What are CSS selectors?


Selectors define which elements to style. Examples: Element selector, Class selector (.class), ID
selector (#id).

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


id is unique and applies to one element, while class can be used on multiple elements.

What is the difference between relative, absolute, and fixed positioning in CSS?
Relative: Positioned based on its normal position. Absolute: Positioned relative to the nearest
positioned ancestor. Fixed: Positioned relative to the viewport.

What is the CSS Box Model?


The Box Model consists of Margin, Border, Padding, and Content, controlling element spacing and
layout.

What is Flexbox in CSS?


Flexbox is a layout model used for responsive designs. It allows flexible item alignment using
justify-content and align-items.

What is CSS Grid, and how is it different from Flexbox?


CSS Grid is for two-dimensional layouts (rows & columns), while Flexbox is for one-dimensional
layouts (row OR column).

What are pseudo-classes and pseudo-elements in CSS?


Pseudo-classes (e.g., :hover) apply styles based on state. Pseudo-elements (e.g., ::first-letter) style
parts of elements.

How do you create a responsive design using CSS?


Use Media Queries, Flexbox, CSS Grid, and percentage-based widths instead of fixed pixel values.
How do you create an animation in CSS?
Use @keyframes and the animation property to animate elements.

What is the difference between CSS transitions and animations?


Transitions allow smooth changes between states. Animations provide more complex motion using
@keyframes.

What is the importance of using external CSS instead of inline styles?


External CSS improves performance, maintainability, and caching, reducing inline styles.

How do you optimize CSS for better performance?


Minify CSS files, use CSS sprites, and reduce excessive use of !important to avoid specificity
issues.

Why is rem preferred over px in modern web design?


rem is relative to root font size, making layouts more scalable and accessible compared to px.

How do you create a CSS-only dropdown menu?


Use hover effects and position: absolute to show/hide dropdown content.

Why did you choose CSS for frontend development?


CSS enables beautiful, responsive, and interactive web designs, working seamlessly with HTML and
JavaScript.

You might also like