Top Interview CSS Questions For Capgemini
Top Basic CSS Interview Questions and Answers for Capgemini
Introduction
Are you preparing for a CSS interview at Capgemini? CSS (Cascading Style Sheets) is a core technology for web development, responsible for the styling and layout of web pages. Capgemini assesses candidates on their understanding of CSS fundamentals, selectors, box model, flexbox, grid, animations, and performance optimization techniques.
This blog provides a comprehensive list of frequently asked CSS interview questions at Capgemini, covering essential topics for both freshers and experienced professionals.
✔ Covers fundamental to advanced CSS topics
✔ Includes practical coding examples
✔ Useful for technical interviews at Capgemini
📌 Bookmark this page to revise the most important CSS interview questions before your Capgemini interview! 🚀
Top Basic CSS Interview Questions and Answers
1. What is CSS?
Answer: CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation, layout, and design of HTML elements on a web page.
2. What are the different types of CSS?
Answer:
- Inline CSS – Applied directly to an element.
<p style="color: blue;">This is a blue paragraph.</p> - Internal CSS – Defined within a
<style>tag inside the HTML document.<style> p { color: blue; } </style> - External CSS – Linked using a separate stylesheet.
<link rel="stylesheet" href="styles.css">
3. What is the Box Model in CSS?
Answer: The CSS Box Model consists of:
- Content – The actual text or image inside the box
- Padding – Space between the content and border
- Border – The frame around the element
- Margin – Space outside the border
Example:
div {
width: 100px;
padding: 10px;
border: 5px solid black;
margin: 20px;
}
4. What is the difference between classes and IDs in CSS?
Answer:
| Feature | Class (.) | ID (#) |
|---|---|---|
| Syntax | .classname {} | #idname {} |
| Usage | Can be used multiple times | Unique per element |
| Example | .button { color: red; } | #header { background: blue; } |
5. What is Flexbox in CSS?
Answer: Flexbox is a layout model that provides a way to distribute space efficiently between elements.
Example:
.container {
display: flex;
justify-content: center;
align-items: center;
}
6. What is the difference between relative, absolute, fixed, and sticky positioning?
Answer:
| Position | Description |
|---|---|
| Relative | Positions element relative to its normal position |
| Absolute | Positions element relative to the nearest positioned ancestor |
| Fixed | Positions element relative to the viewport |
| Sticky | Switches between relative and fixed based on scroll |
Example:
div {
position: absolute;
top: 50px;
left: 100px;
}
7. What is the difference between em, rem, px, and % in CSS?
Answer:
| Unit | Description |
|---|---|
| px | Absolute unit (fixed size) |
| em | Relative to parent element’s font-size |
| rem | Relative to root element’s font-size |
| % | Relative to the parent container |
8. What is a Media Query in CSS?
Answer: Media queries enable responsive designs by applying styles based on screen size.
Example:
@media (max-width: 768px) {
body {
background-color: lightgray;
}
}
9. What is Grid Layout in CSS?
Answer: CSS Grid Layout is a two-dimensional system for creating complex web layouts.
Example:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
10. What is the difference between inline, block, and inline-block elements?
Answer:
| Display Type | Description |
|---|---|
| Inline | Does not start on a new line (<span>) |
| Block | Starts on a new line and takes full width (<div>) |
| Inline-block | Similar to inline but allows width and height |
11. How do you create animations in CSS?
Answer:
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.box {
animation: slide 2s linear infinite;
}
12. What is z-index in CSS?
Answer: z-index controls the stacking order of elements.
Example:
div {
position: absolute;
z-index: 10;
}
13. What is pseudo-class in CSS?
Answer: A pseudo-class applies styles to elements based on their state.
Example:
button:hover {
background-color: yellow;
}
14. How do you create a CSS gradient background?
Answer:
background: linear-gradient(to right, red, blue);
15. What is the difference between visibility: hidden; and display: none;?
Answer:
| Property | Effect |
|---|---|
| visibility: hidden; | Hides the element but keeps its space |
| display: none; | Completely removes the element from the layout |
16. What is the use of object-fit in CSS?
Answer: It controls how an image fits within a container.
Example:
img {
object-fit: cover;
}
17. What is clip-path in CSS?
Answer: It is used to create custom shapes.
Example:
div {
clip-path: circle(50%);
}
18. What is the difference between opacity and visibility?
Answer:
| Property | Effect |
|---|---|
| opacity: 0; | Hides element but keeps space |
| visibility: hidden; | Hides element but keeps space |
19. What is overflow in CSS?
Answer: Controls content overflow behavior.
Example:
div {
overflow: scroll;
}
20. How do you center a div using CSS?
Answer:
.center {
display: flex;
justify-content: center;
align-items: center;
}
This list of CSS interview questions for Capgemini covers fundamental and advanced topics to help you prepare effectively. 🚀