Scribd
Upload
3 views12 pages

TCS CSS Interview Questions

Uploaded by

Shanmukh NCC 331
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views12 pages

TCS CSS Interview Questions

Uploaded by

Shanmukh NCC 331
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

CSS — TCS DIGITAL INTERVIEW

Complete Q&A; Preparation | TCS NQT 2025–26 | Adibatla, Hyderabad

Why CSS is critical for TCS Digital: CSS questions are asked alongside HTML and JavaScript whenever web
projects appear on your resume. Interviewers go from basics to practical scenarios. This PDF covers ALL 50+
expected CSS questions — basic to advanced — with 3–4 line answers, code examples, comparison tables,
scenario questions, and interview tips tailored for TCS Digital Adibatla.

SECTION 1 — CSS FUNDAMENTALS (Most Asked in TCS)

Q1. What is CSS?


■ Answer:
CSS (Cascading Style Sheets) is a stylesheet language used to control the visual presentation of HTML
elements. It handles colours, fonts, spacing, layouts, animations, and responsive design. CSS separates content
(HTML) from presentation (styling), making code cleaner and maintainable. Without CSS, all webpages would
look like plain unstyled text documents.
■ Tip: Always end with 'CSS separates content from presentation' — this phrase shows conceptual clarity to TCS
interviewers.

Q2. Why do we use CSS?


■ Answer:
CSS improves webpage appearance and user experience by adding visual design. It enables responsive layouts
that work across mobile, tablet, and desktop. It reduces repetition — one CSS rule can style hundreds of
elements at once. It maintains consistent design across multiple pages through a single external stylesheet.
■ Tip: Four benefits — Appearance, Responsiveness, Reusability, Consistency. Use these four words in your answer.

Q3. What are the three types of CSS and how do they differ?
■ Answer:
Inline CSS: written directly inside an HTML element using the style attribute. Internal CSS: written inside a
<style> tag in the <head> section of the same HTML file. External CSS: written in a separate .css file and linked
using <link> tag — best practice for real projects.
/* Inline */ <p style='color:red'>Text</p>
/* Internal */ <style> p { color: red; } </style>
/* External */ <link rel='stylesheet' href='[Link]'>
■ Tip: TCS interviewers always follow up with 'Which is best practice?' — External CSS. And 'Which has highest
priority?' — Inline CSS.

Inline CSS Internal CSS External CSS

Inside HTML element tag Inside <style> in <head> Separate .css file

Highest specificity priority Medium priority Lower priority (but best practice)

Hard to maintain, no reuse Moderate — applies to one page Reusable across all pages

Use for quick one-off fixes Use for single-page styles Use for all production projects

Q4. What does Cascading mean in CSS?


■ Answer:
Cascading means when multiple CSS rules target the same element, the browser determines which rule wins
based on three factors: specificity (how specific the selector is), importance (!important flag), and source order
(rule declared later wins if specificity is equal). This cascade allows CSS to be layered — browser defaults, then
library styles, then your custom styles.
■ Tip: Cascade = Specificity + Importance + Source Order. Memorise these three factors.

Q5. What is CSS Specificity and how is it calculated?


■ Answer:
Specificity is a score that determines which CSS rule takes priority when multiple rules apply to the same
element. Calculation: Inline styles = 1000 points. ID selectors (#id) = 100 points. Class/pseudo-class/attribute
selectors = 10 points. Element/pseudo-element selectors = 1 point. The rule with the highest total score wins.
!important overrides all specificity.
/* Specificity scores: */
style='color:red' /* 1000 - inline */
#header { color: red; } /* 100 - ID */
.nav { color: red; } /* 10 - class */
p { color: red; } /* 1 - element */
■ Tip: Very commonly asked in TCS Digital. Remember the scores: 1000, 100, 10, 1.

Q6. What is !important in CSS?


■ Answer:
!important is a CSS declaration that forces a rule to override ALL other rules including inline styles, regardless of
specificity. It is the highest priority in CSS. Use it sparingly — overusing !important makes debugging extremely
difficult as it breaks the natural cascade. Best used only for utility classes or to override third-party library styles.
color: red !important; /* Overrides everything */
■ Tip: 'Use sparingly — it breaks the cascade and makes debugging difficult.' This shows professional maturity.

SECTION 2 — CSS SELECTORS (Frequently Asked)

Q7. What are CSS Selectors?


■ Answer:
CSS selectors are patterns that target specific HTML elements to apply styles. They are the foundation of CSS
— without selectors you cannot apply any styling. The most common types are element, class, ID, universal,
group, descendant, and attribute selectors. Choosing the right selector affects both specificity and performance.
■ Tip: Know all 7 selector types. TCS may ask you to write a selector for a specific scenario.

Q8. List all types of CSS Selectors with examples.


■ Answer:
Element selector (p) — targets all paragraph elements. Class selector (.card) — targets all elements with
class='card'. ID selector (#header) — targets the unique element with id='header'. Universal selector (*) —
targets ALL elements on the page. Group selector (h1, h2, p) — applies same style to multiple selectors.
Descendant selector (div p) — targets p inside div. Attribute selector (input[type='text']) — targets by attribute
value.
p { color: blue; } /* element */
.card { padding: 10px; } /* class */
#header { font-size: 24px; } /* ID */
* { margin: 0; padding: 0; } /* universal */
h1, h2, h3 { font-weight: bold; } /* group */
div p { color: red; } /* descendant */
input[type='text'] { border: 1px solid; } /* attribute */

ID Selector Class Selector

Unique — only one per page Reusable — multiple elements can share it

Selected with # symbol Selected with . (dot) symbol

Specificity: 100 points Specificity: 10 points

Use for unique page sections Use for styling groups of elements

Q9. What are Pseudo-Classes?


■ Answer:
Pseudo-classes select elements based on their state or position rather than their markup. They are written with a
single colon (:) prefix. Common ones: :hover (mouse over), :focus (input active), :first-child (first sibling),
:last-child, :nth-child(n), :checked, :disabled, :visited (links already visited).
:hover { background: lightblue; } /* mouse over */
:focus { outline: 2px solid blue; } /* keyboard/input active */
:first-child { font-weight: bold; } /* first sibling */
:nth-child(2n) { color: grey; } /* every even element */
■ Tip: :hover and :focus are the most asked. Know the difference — hover is mouse, focus is keyboard/input.

Q10. What are Pseudo-Elements?


■ Answer:
Pseudo-elements style a specific part of an element's content rather than the whole element. They use double
colon (::) prefix in modern CSS. Most used: ::before (inserts content before element), ::after (inserts content
after), ::first-letter (styles first letter), ::first-line (styles first line), ::selection (styles highlighted text).
p::before { content: '★ '; color: gold; } /* adds star before p */
p::after { content: ' ©'; } /* adds text after p */
p::first-letter { font-size: 200%; } /* drop cap effect */
■ Tip: Key difference — pseudo-class targets element STATE; pseudo-element targets part of element CONTENT.

SECTION 3 — CSS BOX MODEL (Critical for TCS)

Q11. What is the CSS Box Model?


■ Answer:
Every HTML element is treated as a rectangular box consisting of four layers from inside to outside: Content (the
actual text/image), Padding (space between content and border), Border (the visible line around the element),
and Margin (space outside the border separating elements). Understanding the box model is essential for
controlling layout and spacing in CSS.
■ Tip: Draw it mentally — Content → Padding → Border → Margin. This is asked in almost every TCS frontend
interview.

Margin Padding

Space OUTSIDE the border Space INSIDE the border (between content and border)

Transparent — shows parent background Takes the element's background colour

Pushes other elements away Expands the element's clickable/visible area

margin: 20px; collapses with adjacent padding: 20px; never collapses

Q12. What is box-sizing and why is it important?


■ Answer:
box-sizing determines how the total width and height of an element is calculated. Default (content-box): width
applies to content only — padding and border are ADDED on top, making the element larger. border-box: width
includes padding and border — what you set is the TOTAL size of the element. Most developers use * {
box-sizing: border-box; } globally to avoid layout surprises.
/* Best practice reset */
* { box-sizing: border-box; }
/* With border-box: */
.box { width: 200px; padding: 20px; } /* total = 200px */
/* Without border-box: */
.box { width: 200px; padding: 20px; } /* total = 240px! */
■ Tip: 'border-box makes layout predictable' — this is exactly why it is considered best practice. TCS may ask this.

SECTION 4 — DISPLAY & POSITION PROPERTIES (Very Important)


Q13. What is the CSS display property?
■ Answer:
The display property controls how an element participates in the document layout flow. block: element starts on
new line, takes full width (div, p, h1). inline: element stays in line, only takes content width, cannot set
width/height (span, a). inline-block: stays in line but accepts width/height (best of both). flex: activates flexbox
layout on children. grid: activates grid layout on children. none: removes element completely from layout (hidden
AND no space taken).
display: block; /* new line, full width */
display: inline; /* same line, content width */
display: inline-block; /* same line + width/height allowed */
display: flex; /* flexbox container */
display: grid; /* grid container */
display: none; /* removed from layout */
■ Tip: Know all 6 display values. The difference between inline, block, and inline-block is a classic TCS question.

display: none visibility: hidden

Element is REMOVED from layout completely Element is HIDDEN but still occupies space

No space left behind — other elements fill in Empty space remains where element was

Removed from document flow entirely Still part of document flow

Use when you want to toggle element in/out Use when you want to hide but preserve layout

Q14. What is the CSS position property and its types?


■ Answer:
The position property controls how an element is placed in the document. static (default): normal document flow,
top/left/right/bottom have no effect. relative: positioned relative to its OWN normal position. absolute: positioned
relative to nearest positioned ancestor (non-static parent). fixed: positioned relative to the viewport — stays in
place during scroll. sticky: behaves like relative until scroll threshold, then acts like fixed.
■ Tip: This is one of the top 5 CSS questions in TCS interviews. Know all 5 values with use cases.

Position Type Relative To Stays on scroll? Real-world use

static Normal flow (default) Scrolls Default HTML elements

relative Its own original position Scrolls Slight repositioning, parent


for absolute children

absolute Nearest positioned parent Scrolls with parent Dropdowns, tooltips,


badges

fixed Viewport (browser window) Stays fixed! Sticky nav bars, floating
buttons

sticky Normal flow until threshold Sticks at threshold Section headers that stick
on scroll

Q15. What is z-index?


■ Answer:
z-index controls the stacking order of overlapping positioned elements along the Z-axis (depth). Higher z-index
value = element appears ON TOP. Lower value = appears behind. z-index only works on elements with position
set to relative, absolute, fixed, or sticky (not static). Default z-index is auto (same as 0). Negative values push
elements behind normal content.
position: absolute;
z-index: 10; /* appears above elements with z-index < 10 */
■ Tip: 'z-index only works on positioned elements' — many developers forget this. Mentioning it impresses
interviewers.
Q16. What is the overflow property?
■ Answer:
The overflow property controls what happens when content is too large to fit inside its container. visible (default):
content spills outside the container. hidden: content outside is clipped (invisible). scroll: always shows scrollbars.
auto: scrollbars appear only when needed (best for most use cases).
overflow: visible; /* default - spills out */
overflow: hidden; /* clips content outside */
overflow: scroll; /* always shows scrollbar */
overflow: auto; /* scrollbar only when needed */

SECTION 5 — FLEXBOX (Extremely Important for TCS Digital)

Q17. What is Flexbox?


■ Answer:
Flexbox (Flexible Box Layout) is a one-dimensional CSS layout system designed to arrange items in a single row
or column with powerful alignment and spacing control. Applied to the parent container with display:flex — all
direct children automatically become flex items. Flexbox solves the classic challenge of centering elements and
distributing space responsively.
display: flex; /* activates flexbox on parent container */
■ Tip: 'One-dimensional' is the key phrase — Flexbox handles one direction at a time (row OR column). This
differentiates it from Grid.

Q18. What are the main Flexbox concepts — Main Axis and Cross Axis?
■ Answer:
Main Axis: the primary direction flex items are laid out. Default is horizontal (row). Cross Axis: perpendicular to
the main axis. If main axis is horizontal, cross axis is vertical. flex-direction changes the main axis: row (default),
row-reverse, column, column-reverse. This axis concept is why justify-content and align-items work differently —
each targets a different axis.
■ Tip: Always visualise: flex-direction:row → main axis is horizontal. flex-direction:column → main axis is vertical.

Q19. What is the difference between justify-content and align-items?


■ Answer:
justify-content aligns flex items along the MAIN axis (horizontal in default row layout). align-items aligns flex items
along the CROSS axis (vertical in default row layout). Common values: flex-start, flex-end, center,
space-between, space-around, space-evenly. To perfectly centre an element both horizontally AND vertically —
use both together.
/* Perfect centring */
.container {
display: flex;
justify-content: center; /* horizontal centre */
align-items: center; /* vertical centre */
height: 100vh;
}
■ Tip: Memory trick — justify = main axis = J shape (horizontal). align = cross axis = A (vertical).

Q20. List the most important Flexbox properties.


■ Answer:
Container properties: display:flex (activate), flex-direction (row/column), justify-content (main axis align),
align-items (cross axis align), flex-wrap (wrap items or not), gap (space between items). Item properties:
flex-grow (how much item grows), flex-shrink (how much it shrinks), flex-basis (starting size), align-self (override
align-items for one item), order (rearrange order).
display: flex;
flex-direction: row; /* or column */
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
■ Tip: Know at least the 6 container properties cold. TCS scenario questions often involve centering and spacing.

SECTION 6 — CSS GRID (Important for TCS Digital)

Q21. What is CSS Grid?


■ Answer:
CSS Grid is a two-dimensional layout system that allows elements to be arranged in rows AND columns
simultaneously. Applied to the container with display:grid. grid-template-columns defines column structure;
grid-template-rows defines row structure. Grid is ideal for full-page layouts, dashboards, and complex designs
that require control in both directions.
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
grid-template-columns: 200px auto; /* fixed + flexible */
gap: 20px;
■ Tip: 'Two-dimensional' is the key phrase that differentiates Grid from Flexbox (one-dimensional).

CSS Grid Flexbox

2D layout — rows AND columns simultaneously 1D layout — row OR column at a time

Best for page-level structure and complex layouts Best for component-level and navigation layouts

Items placed in defined grid cells Items flow naturally in one direction

Example: Full page dashboard, photo gallery Example: Navbar, card row, centred content

Q22. When to use Flexbox vs Grid?


■ Answer:
Use Flexbox when: you need to align items in ONE direction (a row of buttons, a nav bar, a card list). Use Grid
when: you need to control layout in TWO directions (full page layout, image gallery, dashboard). They work
perfectly together — Grid for the page structure, Flexbox for individual components inside grid areas. The choice
depends on whether your layout is one-directional or two-directional.
■ Tip: Real TCS scenario question — 'How would you build a 3-column layout?' Answer: CSS Grid. 'How to centre a
button?' Answer: Flexbox.

SECTION 7 — RESPONSIVE DESIGN & MEDIA QUERIES (Very Important)

Q23. What is Responsive Web Design?


■ Answer:
Responsive web design ensures that a website looks and functions correctly on all screen sizes — mobile
phones, tablets, and desktops — using flexible layouts, images, and CSS media queries. The key tools are: fluid
grids (percentage-based widths), flexible images (max-width:100%), and media queries (apply styles at specific
screen widths). Responsive design is now mandatory — over 60% of web traffic comes from mobile devices.
■ Tip: Three pillars — Fluid Grids + Flexible Images + Media Queries. Memorise these three.

Q24. What are Media Queries?


■ Answer:
Media queries apply different CSS styles based on device characteristics like screen width, height, or orientation.
They are the core tool for making websites responsive. The most common use is max-width (apply styles when
screen is SMALLER than X) and min-width (apply styles when screen is LARGER than X — used in mobile-first
design).
/* Desktop-first approach */
@media (max-width: 768px) {
.container { flex-direction: column; }
}
/* Mobile-first approach */
@media (min-width: 768px) {
.container { flex-direction: row; }
}
■ Tip: Know both max-width (desktop-first) and min-width (mobile-first) approaches and when to use each.

Q25. What is Mobile-First Design?


■ Answer:
Mobile-first design is the approach of writing CSS for the smallest screens first, then adding media queries with
min-width breakpoints to progressively enhance for larger screens. Benefits: faster mobile performance (mobile
devices download less CSS), forces designers to prioritise essential content, and aligns with Google's
mobile-first indexing for SEO.
■ Tip: 'Google uses mobile-first indexing' — mentioning this connects CSS to real-world SEO impact. Impressive
answer.

Q26. What is the viewport meta tag?


■ Answer:
The viewport meta tag controls how the browser scales and displays the page on mobile devices. Without it,
mobile browsers render the page at desktop width and zoom out — making text tiny. width=device-width sets the
viewport width to the device's screen width. initial-scale=1 sets the default zoom level to 100%.
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
■ Tip: This tag is REQUIRED for responsive design to work. Without it, media queries won't behave correctly on
mobile.

SECTION 8 — CSS UNITS, COLOURS & VARIABLES

Unit What it's relative to Use case

px Fixed pixels — not relative to anything Borders, shadows, fixed-size


elements

em Parent element's font-size Component-level spacing and font


sizes

rem Root element (<html>) font-size Consistent typography across the


page

vh 1% of viewport HEIGHT Full-screen sections, hero areas

vw 1% of viewport WIDTH Fluid widths relative to screen size

% Parent element's size Fluid widths in responsive layouts

Q27. What is the difference between px, em, and rem?


■ Answer:
px (pixels): absolute unit — same size regardless of parent or screen. Simple but not responsive. em: relative to
the PARENT element's font-size. If parent is 16px and element is 1.5em = 24px. Compounds when nested —
child of child calculations can get complex. rem (root em): relative to the ROOT <html> font-size — consistent
throughout the page. rem is the recommended choice for font-sizes in responsive design.
html { font-size: 16px; }
h1 { font-size: 2rem; } /* = 32px, always */
p { font-size: 1em; } /* = parent's font-size */
■ Tip: 'rem is preferred over em because it's predictable — no compounding.' This is a professional-level answer.

Q28. What are CSS Variables (Custom Properties)?


■ Answer:
CSS variables store reusable values defined with -- prefix, typically in :root for global access. They improve
maintainability — change one variable and the update applies everywhere it is used. Unlike SASS variables,
CSS variables are native browser features that work at runtime and can be updated dynamically with JavaScript.
:root {
--primary-color: #00695c;
--font-size-base: 16px;
--spacing: 8px;
}
.button { background: var(--primary-color); padding: var(--spacing); }
■ Tip: 'CSS variables work at runtime and can be changed with JavaScript' — this shows depth beyond basic CSS
knowledge.

Q29. What are the different colour formats in CSS?


■ Answer:
Named colours: red, blue, teal — easy to read but limited options. Hex: #ff0000 — most common, 6-digit
hexadecimal. Short form: #f00. RGB: rgb(255, 0, 0) — red, green, blue values 0–255. RGBA: rgba(255, 0, 0, 0.5)
— adds alpha (opacity) channel 0–1. HSL: hsl(0, 100%, 50%) — Hue (0-360°), Saturation (%), Lightness (%) —
most intuitive for designers.
color: red; /* named */
color: #ff0000; /* hex */
color: rgb(255, 0, 0); /* rgb */
color: rgba(255, 0, 0, 0.5); /* rgba with 50% opacity */
color: hsl(0, 100%, 50%); /* hsl */

SECTION 9 — TRANSITIONS & ANIMATIONS

Q30. What is CSS Transition?


■ Answer:
CSS transitions create smooth animated changes between two states of an element. They require a trigger to
start — typically :hover, :focus, or a class change via JavaScript. The transition property specifies: which property
to animate, duration, timing function, and delay. Transitions are simpler than animations and used for hover
effects, button states, and UI feedback.
.button {
background: teal;
transition: background 0.3s ease, transform 0.2s;
}
.button:hover {
background: darkslategray;
transform: scale(1.05);
}
■ Tip: 'Transitions require a trigger' is the key difference from animations. TCS always asks this.

Q31. What is CSS Animation?


■ Answer:
CSS animations create complex multi-step movements using @keyframes rules. Unlike transitions, animations
can run automatically without any trigger, loop indefinitely, and have multiple intermediate steps (not just start
and end). The animation property links the @keyframes to an element with duration, timing, delay, and iteration
count.
@keyframes slideIn {
0% { transform: translateX(-100%); opacity: 0; }
100% { transform: translateX(0); opacity: 1; }
}
.box { animation: slideIn 1s ease-in-out; }
.loader { animation: spin 2s linear infinite; }
■ Tip: 'Animations can run automatically and have multiple steps' — these are the two key advantages over transitions.
CSS Transition CSS Animation

Requires a trigger (:hover, :focus, JS class) Runs automatically — no trigger needed

Only start and end state Multiple intermediate keyframe steps

Simpler — one property definition More complex — @keyframes + animation property

Best for hover effects, button states Best for loaders, carousels, intro animations

Cannot loop on its own Can loop indefinitely with iteration-count: infinite

Q32. What is CSS Transform?


■ Answer:
The transform property applies visual transformations to elements without affecting document flow. translate()
moves element position. scale() resizes. rotate() rotates. skew() tilts. Multiple transforms can be combined in one
declaration. Transforms are GPU-accelerated — much more performant than changing top/left for animations.
transform: translateX(50px); /* move right 50px */
transform: scale(1.5); /* 150% size */
transform: rotate(45deg); /* rotate 45 degrees */
transform: translate(-50%, -50%); /* common centring trick */
■ Tip: 'Transforms are GPU-accelerated' — this shows performance awareness, which TCS Digital interviews value.

SECTION 10 — INHERITANCE, ADVANCED CONCEPTS & TOOLS

Q33. What is CSS Inheritance?


■ Answer:
Inheritance means certain CSS properties automatically pass down from parent to child elements. Inherited
properties (mostly typography-related): color, font-family, font-size, font-weight, line-height, text-align.
Non-inherited properties: margin, padding, border, background, width, height, display. You can force inheritance
with inherit keyword or reset with initial.
body { color: #333; font-family: Arial; } /* children inherit these */
body { margin: 0; } /* children do NOT inherit margin */
p { color: inherit; } /* force inherit */
■ Tip: Quick rule — text/font properties inherit, box/layout properties do not.

Q34. What is opacity and how is it different from rgba alpha?


■ Answer:
opacity: 0.5 makes the entire element (including all children and text) 50% transparent. rgba(0,0,0,0.5) makes
only the BACKGROUND colour transparent — content inside remains fully opaque. Use rgba when you want a
transparent background but readable text. Use opacity when you want the whole element (including content) to
fade.
/* Entire element + children become transparent */
.box { opacity: 0.5; }
/* Only background transparent, text stays opaque */
.box { background: rgba(0, 0, 0, 0.5); }
■ Tip: Classic TCS interview distinction. 'opacity affects the whole element; rgba affects only that colour.'

Q35. What is a CSS Preprocessor?


■ Answer:
A CSS preprocessor extends CSS with programming features like variables, nesting, mixins, loops, and
functions. The code is then compiled into standard CSS that browsers understand. Popular preprocessors:
SASS/SCSS (most popular), LESS, Stylus. Benefits: more maintainable code, reusable components, easier
theming, and reduced repetition.
/* SCSS example */
$primary: teal;
.nav { background: $primary;
a { color: white; &:hover { opacity: 0.8; } }
}
■ Tip: TCS Digital may ask 'Have you used SASS?' If yes — mention variables, nesting, and mixins as key features.

Q36. What is Bootstrap?


■ Answer:
Bootstrap is a popular open-source CSS framework that provides a responsive grid system, pre-built UI
components (buttons, modals, navbars, cards), and utility classes. It uses a 12-column grid system with
breakpoints for mobile, tablet, and desktop. Bootstrap significantly speeds up frontend development but adds file
size overhead.
/* Bootstrap grid example */
<div class='container'>
<div class='row'>
<div class='col-md-6'>Left Column</div>
<div class='col-md-6'>Right Column</div>
</div>
</div>
■ Tip: If Bootstrap is on your resume — know the 12-column grid, col-md-6 class system, and at least 3 components.

SECTION 11 — SCENARIO-BASED QUESTIONS (TCS Digital MR/TR)

Q37. How do you centre a div horizontally and vertically?


■ Answer:
Best modern approach: use Flexbox on the parent container. Set display:flex, justify-content:center (horizontal),
align-items:center (vertical), height:100vh. Alternative with Grid: display:grid; place-items:center; height:100vh.
Old approach (absolute positioning): position:absolute; top:50%; left:50%; transform:translate(-50%,-50%).
/* Method 1: Flexbox (recommended) */
.parent { display:flex; justify-content:center; align-items:center; height:100vh; }
/* Method 2: Grid */
.parent { display:grid; place-items:center; height:100vh; }
/* Method 3: Absolute + Transform */
.child { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
■ Tip: This is THE most asked CSS scenario question in TCS interviews. Know all three methods.

Q38. CSS styles are not applying — how will you debug?
■ Answer:
Step 1: Open browser DevTools (F12) and inspect the element — check the Styles panel for the rule. Step 2:
Look for strikethrough rules — they are being overridden by higher specificity. Step 3: Check if the CSS file is
properly linked — look at the Network tab for 404 errors on the CSS file. Step 4: Check for typos in selector
names, class names, or property values. Step 5: Check specificity — a more specific selector might be winning.
Try adding !important temporarily to confirm.
■ Tip: Always mention DevTools first — it shows professional debugging approach. TCS interviewers respect this
answer.

Q39. How do you make a navbar stay at the top of the page while scrolling?
■ Answer:
Use position:fixed with top:0 and width:100%. This removes the navbar from document flow so it stays anchored
to the viewport regardless of scrolling. Add z-index (e.g., z-index:1000) to ensure it stays above all other content.
Add padding-top to the body equal to the navbar height to prevent content from hiding behind it.
.navbar {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
body { padding-top: 60px; } /* prevent content hiding behind navbar */
■ Tip: Very practical scenario — connect to real projects. 'I implemented this in my [project name]' if true.

Q40. How do you build a 3-column responsive layout?


■ Answer:
Use CSS Grid for the desktop 3-column structure, then switch to single column on mobile using media queries.
The 1fr unit distributes space equally. gap adds spacing between columns. On mobile (max-width:768px),
override to grid-template-columns:1fr to stack columns.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
@media (max-width: 768px) {
.container { grid-template-columns: 1fr; }
}
■ Tip: This combines Grid + Media Queries — showing you can integrate multiple CSS concepts.

Q41. Flexbox or Grid — which would you use and when?


■ Answer:
Use Flexbox for one-directional component layouts: navigation bars, button groups, centring elements, card
rows. Use Grid for two-directional page layouts: full-page layouts, dashboards, image galleries, complex grids.
They are complementary — use Grid for the overall page structure, then use Flexbox inside each Grid area for
component-level alignment. Neither is universally 'better' — the right choice depends on whether you need 1D or
2D control.
■ Tip: 'They are complementary, not competing' — this mature answer shows you understand both tools deeply.

SECTION 12 — RAPID FIRE REVISION TABLE (Last Night Before Monday)

Top 30 Must-Know CSS Topics for TCS Digital


# Topic One-Line Key Point

1 CSS Style language — separates content from presentation

2 3 Types of CSS Inline (highest priority) > Internal > External (best practice)

3 Cascading Specificity + Importance + Source order determine winning rule

4 Specificity Inline=1000, ID=100, Class=10, Element=1

5 !important Overrides all — use sparingly, breaks cascade

6 Selectors Element, Class, ID, Universal, Group, Descendant, Attribute

7 Box Model Content → Padding → Border → Margin

8 Margin vs Padding Margin = outside border; Padding = inside border

9 box-sizing border-box: width includes padding+border (best practice)

10 Display block, inline, inline-block, flex, grid, none

11 display:none vs visibility:hidden none removes from layout; hidden keeps space

12 Position static, relative, absolute, fixed, sticky

13 Relative vs Absolute Relative = own position; Absolute = nearest positioned parent

14 Fixed vs Sticky Fixed = viewport always; Sticky = normal until scroll threshold

15 z-index Stacking order — higher = on top — only for positioned elements

16 Flexbox 1D layout — display:flex — justify-content + align-items

17 justify-content Main axis alignment (horizontal in row)


18 align-items Cross axis alignment (vertical in row)

19 CSS Grid 2D layout — display:grid — rows AND columns simultaneously

20 Flex vs Grid Flex = 1D component layout; Grid = 2D page layout

21 Media Queries @media (max-width:768px) — apply styles at breakpoints

22 Mobile-First Write mobile CSS first, add min-width media queries for desktop

23 Viewport meta Required for responsive design — width=device-width

24 px vs em vs rem px=fixed; em=parent; rem=root (best for fonts)

25 CSS Variables --name:value in :root; use with var(--name)

26 Pseudo-class :hover, :focus, :first-child — target element STATE

27 Pseudo-element ::before, ::after — target part of element CONTENT

28 Transition Smooth change between states — needs a trigger

29 Animation @keyframes — auto-runs, multiple steps, can loop

30 Bootstrap CSS framework — 12-column grid, pre-built components

■ CSS INTERVIEW TIPS FOR TCS DIGITAL — MONDAY


■ If web projects are on your resume — expect CSS + HTML + JS questions together. Know all three.
■ Box Model is asked in almost every TCS frontend interview — draw it mentally:
Content→Padding→Border→Margin.
■ Specificity scores must be memorised: Inline=1000, ID=100, Class=10, Element=1.
■ Flexbox centring is THE most asked scenario — display:flex; justify-content:center; align-items:center;
height:100vh.
■ Transition vs Animation key difference: Transition needs a trigger; Animation runs automatically.
■ Always connect responsive design to real usage — 'over 60% of web traffic is mobile' shows industry
awareness.
■ Mention CSS Variables (:root, var()) — it shows modern CSS knowledge beyond just selectors.
■■ When debugging CSS — always say 'browser DevTools' first. It shows professional mindset.
■ display:none vs visibility:hidden — 'none removes from layout; hidden keeps space.' Know this cold.
■ End answers with a real-world example from your project whenever possible — TCS values practical
experience.

CSS makes the web beautiful — and your preparation makes YOU unstoppable! ALL THE
BEST FOR MONDAY! ■

You might also like