Top Interview CSS Questions For TCS
Top Basic CSS Interview Questions and Answers for TCS
Introduction
Are you preparing for a CSS interview at TCS? CSS (Cascading Style Sheets) is a fundamental technology for web development, used to style HTML elements and create visually appealing user interfaces. TCS, being a leading IT services company, evaluates candidates on core CSS concepts, responsive design, selectors, box model, flexbox, grid system, animations, and performance optimization.
This blog provides a comprehensive list of frequently asked CSS interview questions at TCS, suitable for both freshers and experienced professionals.
✔ Covers fundamental to advanced CSS topics
✔ Includes practical coding examples
✔ Useful for technical interviews at TCS
📌 Bookmark this page to revise the most important CSS interview questions before your TCS 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 of HTML documents. It helps in designing web pages by adding colors, layouts, and fonts.
2. What are the different types of CSS?
Answer:
- Inline CSS – Applied directly within an HTML tag.
<p style="color: blue;">This is a blue paragraph.</p> - Internal CSS – Defined inside a
<style>tag in the HTML document.<style> p { color: blue; } </style> - External CSS – Linked through a separate
.cssfile.<link rel="stylesheet" href="styles.css">
3. What is the difference between classes and IDs in CSS?
Answer:
| Feature | Class (.) | ID (#) |
|---|---|---|
| Syntax | .classname {} | #idname {} |
| Usage | Can be used multiple times | Unique for each element |
| Example | .button { color: red; } | #header { background: blue; } |
4. What is the Box Model in CSS?
Answer: The CSS Box Model consists of:
- Content – The actual text or image
- Padding – Space inside the border
- Border – The surrounding frame
- Margin – Space outside the border
Example:
div {
width: 100px;
padding: 10px;
border: 5px solid black;
margin: 20px;
}
5. 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 position |
Example:
div {
position: absolute;
top: 50px;
left: 100px;
}
6. What is Flexbox in CSS?
Answer: Flexbox is a layout model used to design responsive layouts.
Example:
.container {
display: flex;
justify-content: center;
align-items: center;
}
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 help create responsive designs by applying different styles based on screen size.
Example:
@media (max-width: 768px) {
body {
background-color: lightgray;
}
}
9. What is the difference between min-width, max-width, and width in CSS?
Answer:
| Property | Description |
|---|---|
| width | Sets a fixed width |
| min-width | Ensures the element is at least a certain width |
| max-width | Ensures the element does not exceed a certain width |
10. What is Grid Layout in CSS?
Answer: CSS Grid Layout is a two-dimensional layout system for creating complex web designs.
Example:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
11. What is the difference between inline, block, and inline-block elements?
Answer:
| Display Type | Description |
|---|---|
| Inline | Does not start on a new line, only takes necessary width (<span>) |
| Block | Starts on a new line and takes full width (<div>) |
| Inline-block | Similar to inline but allows setting width and height |
12. How do you create animations in CSS?
Answer:
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.box {
animation: slide 2s linear infinite;
}
13. 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 |
14. How do you create a CSS gradient background?
Answer:
background: linear-gradient(to right, red, blue);
15. What is z-index in CSS?
Answer: z-index controls the stacking order of elements. Higher values appear on top.
Example:
div {
position: absolute;
z-index: 10;
}
16. What is pseudo-class in CSS?
Answer: A pseudo-class applies styles based on an element’s state.
Example:
button:hover {
background-color: yellow;
}
17. What is overflow in CSS?
Answer: It controls content overflow behavior.
Example:
div {
overflow: scroll;
}
18. What is clip-path in CSS?
Answer: It creates custom shapes.
Example:
div {
clip-path: circle(50%);
}
19. What is the difference between opacity and visibility?
Answer:
| Property | Effect |
|---|---|
| opacity: 0; | Hides element but still takes space |
| visibility: hidden; | Hides element but keeps its space |
20. What is the use of object-fit in CSS?
Answer: It controls how an image fits within a container.
Example:
img {
object-fit: cover;
}
This list of CSS interview questions for TCS covers fundamental and advanced topics to help you ace your interview. 🚀