Infosys CSS Technical Interview Questions and Answers

Front-end developers play a crucial role in ensuring that applications are not only functional but also visually appealing and user-friendly. At Infosys, CSS-related interview questions are often designed to test your knowledge of styling concepts, layout techniques, browser compatibility, and real-world problem solving.

Below is a comprehensive list of Infosys CSS technical interview questions and answers, structured from basic to advanced.

---

1. Basic CSS Questions

Q1. What is CSS, and why is it used?
CSS (Cascading Style Sheets) is used to style and format HTML elements. It separates design from structure, making websites easier to maintain and more visually consistent.

Q2. What are the different types of CSS?

• Inline CSS – Applied directly to an element using the style attribute.

• Internal CSS – Defined inside a <style> tag within an HTML file.

• External CSS – Defined in a separate .css file and linked to HTML.

Q3. What is the difference between relative, absolute, fixed, and sticky positioning in CSS?

• Relative: Positioned relative to its normal position.

• Absolute: Positioned relative to the nearest positioned ancestor.

• Fixed: Stays fixed relative to the viewport, even when scrolling.

• Sticky: Behaves like relative until a scroll threshold is reached, then sticks like fixed.

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

• ID: Unique for a single element (#id).

• Class: Can be applied to multiple elements (.classname).

Q5. Explain the difference between em, rem, px, and % units.

• px: Absolute pixel value.

• em: Relative to the font size of the parent element.

• rem: Relative to the root element’s font size.

• %: Relative to the parent element’s dimensions.

---

2. Intermediate CSS Questions

Q6. What are pseudo-classes and pseudo-elements?

• Pseudo-classes: Define special states of elements (e.g., :hover, :first-child).

• Pseudo-elements: Style specific parts of an element (e.g., ::before, ::after).

Q7. What is the difference between inline, block, and inline-block elements?

• Inline: Do not start on a new line, only occupy as much width as needed (<span>, <a>).

• Block: Start on a new line and take full width (<div>, <p>).

• Inline-block: Behaves like inline but allows setting height and width.

Q8. What is the difference between absolute, relative, and fixed units in CSS?

• Absolute Units: Fixed values (px, pt, cm).

• Relative Units: Based on context (em, rem, %).

Q9. Explain the difference between Flexbox and CSS Grid.

• Flexbox: One-dimensional layout system (row or column). Best for alignment.

• Grid: Two-dimensional layout system. Best for creating full page or section layouts.

Q10. How do you center a div horizontally and vertically?
Using Flexbox:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

---

3. Advanced CSS Questions

Q11. What are CSS variables, and how do you use them?
CSS variables (custom properties) allow reusability of values.

:root {
  --main-color: #007bff;
}

button {
  background-color: var(--main-color);
}

Q12. What is the difference between relative, absolute, and inherit values in CSS position?

• Relative: Element moves relative to its normal position.

• Absolute: Positioned relative to parent with position: relative.

• Inherit: Takes the position value from its parent.

Q13. How do you handle CSS browser compatibility issues?

• Use vendor prefixes (-webkit-, -moz-).

• Use feature detection tools like Modernizr.

• Apply CSS resets or normalize.css for consistency.

Q14. What are CSS transitions and animations?

• Transitions: Smoothly change property values over time.

• Animations: More complex sequences using @keyframes.

Example:

div {
  transition: background-color 0.5s;
}

div:hover {
  background-color: red;
}

Q15. Explain z-index in CSS.
z-index controls the stacking order of elements. Higher values appear in front of lower values. Only works on positioned elements (relative, absolute, fixed).

---

4. Real-Time Scenario Questions

Q16. If a CSS rule is not applying to an element, how would you debug it?

• Check for specificity conflicts.

• Ensure correct selector targeting.

• Check if inline styles are overriding external CSS.

• Use browser developer tools for inspection.

Q17. How do you make a website responsive using CSS?

• Use media queries.

• Apply flexbox or grid layouts.

• Use fluid units like % or rem.

• Apply responsive images (max-width: 100%).

Q18. How do you hide an element in CSS?

• display: none; → Removes from layout.

• visibility: hidden; → Hides but keeps space.

• opacity: 0; → Makes invisible but clickable.

Q19. How do you improve CSS performance on a large-scale project?

• Minify CSS files.

• Combine multiple CSS files into one.

• Use shorthand properties.

• Avoid excessive nesting.

• Use modern frameworks like TailwindCSS or Bootstrap if allowed.

Q20. How would you implement dark mode using CSS?

• Define light and dark themes using CSS variables.

• Toggle classes dynamically with JavaScript.

Example:

:root {
  --bg: #fff;
  --text: #000;
}

.dark-mode {
  --bg: #000;
  --text: #fff;
}

body {
  background: var(--bg);
  color: var(--text);
}

---

Final Thoughts

Infosys CSS technical interviews focus on both theory and practical implementation. You should be comfortable with selectors, layout systems (Flexbox & Grid), responsiveness, animations, and debugging techniques.

If you can explain why you chose a particular CSS approach and back it with real-world examples, you’ll stand out in Infosys interviews.