Get the Preplance app for a seamless learning experience. Practice offline, get daily streaks, and stay ahead with real-time interview updates.
Get it on
Google Play
4.9/5 Rating on Store
Tech Mahindra · CSS
Practice CSS questions specifically asked in Tech Mahindra interviews – ideal for online test preparation, technical rounds and final HR discussions.
Questions
50
Tagged for this company + subject
Company
Tech Mahindra
View company-wise questions
Subject
CSS
Explore topic-wise practice
Go through each question and its explanation. Use this page for targeted revision just before your Tech Mahindra CSS round.
An ID selector starts with a hash symbol. '#main' selects the element whose id attribute is set to 'main'. Each ID must be unique on a web page.
#main { background-color: lightgray; }`animation-fill-mode` defines how an element looks before or after animation. Using `forwards` keeps the last keyframe state, useful for effects like slide-in that should stay visible.
div { animation: fadeIn 1s forwards; }The 'em' unit scales relative to the parent’s font size. If parent font size is 16px, then 1.5em equals 24px. Understanding units helps in responsive design and scaling text properly.
p { font-size: 1.5em; }Frequent mistakes include using too many breakpoints, defining overlapping rules, using `max-width` inconsistently, not testing portrait vs landscape, and ignoring the viewport meta tag.
Avoid: @media (max-width: 768px) and (min-width: 800px) { ... }Declaring variables inside `:root` makes them global, similar to defining them at the document level. Variables declared in other selectors are local to that scope.
:root { --font-size: 16px; }`clamp(min, preferred, max)` allows fluid, responsive values while preventing them from exceeding given limits — ideal for responsive font sizes.
h1 { font-size: clamp(1rem, 4vw, 2rem); }Interviewers look for fluency in CSS variables, grid/flexbox, clamp(), prefers-color-scheme for dark mode, container queries, and logical properties. These show you stay updated and write scalable, maintainable CSS.
@media (prefers-color-scheme: dark) { body { background: #121212; } }`transition-property` defines which CSS property changes should animate. Restricting it improves performance.
div { transition-property: background-color; transition-duration: 0.5s; }`animation-iteration-count` controls how many times an animation repeats. Setting it to `infinite` loops it endlessly.
div { animation: pulse 2s infinite; }`opacity` and `transform` are GPU-accelerated and don’t trigger layout or repaint, making them ideal for smooth animations.
div:hover { opacity: 0.8; transform: scale(1.05); }Use keyframes for multi-step animations like loading spinners or looping effects. Transitions are best for simple hover or focus changes.
@keyframes bounce { 0%,100% { top:0; } 50% { top:-20px; } }Selectors target elements for styling. They help apply consistent design to multiple elements without duplication. Good selector use means cleaner, maintainable code — a skill companies value in interviews.
button.primary { background-color: green; }CSS combinators define relationships between selectors. A space indicates descendant, '>' means direct child, '+' selects the next sibling, and '~' selects all following siblings. These help in selecting elements based on their hierarchy in HTML.
div + p { color: red; }An ID selector has higher specificity than class or element selectors. The priority order in CSS is inline styles, then IDs, then classes, then elements.
#box { color: red; } /* overrides */
.box { color: blue; }Sticky elements behave like relative elements until a certain scroll point, where they switch to fixed. It requires a top or bottom offset and only works inside a scrollable ancestor. It’s ideal for sticky headers and table headings.
header { position: sticky; top: 0; }Breakpoints are screen widths where layout adjustments occur. They are chosen based on common device widths (e.g., 480px, 768px, 1024px) and design changes like menu collapse or grid shifts.
@media (max-width: 1024px) { .sidebar { display: none; } }We use the <link> tag inside the head section to attach an external CSS file. Example: <link rel='stylesheet' href='style.css'>. This question checks if you understand how external styling works in real projects.
<head> <link rel="stylesheet" href="style.css"> </head>
Important form pseudo-classes include `:focus` (input active), `:required` (must be filled), `:valid` and `:invalid` (validation state). These allow styling feedback directly through CSS without JavaScript.
input:focus { border-color: blue; } input:invalid { border-color: red; }The box model starts with the content area, followed by padding, border, and then margin on the outermost layer. This determines how space is distributed around elements.
/* Inside to outside */ Content → Padding → Border → Margin
The <div> element is block-level by default, meaning it takes up the full width available and starts on a new line. Span and a are inline elements.
div { display: block; }display: none completely removes the element from the layout flow, while visibility: hidden makes the element invisible but keeps its occupied space intact.
/* Hidden but space reserved */
.box { visibility: hidden; }Block elements take full width and start on a new line, inline elements stay within text flow and cannot have width or height, and inline-block elements combine both — they stay inline but allow setting width and height. Knowing these differences helps structure responsive layouts properly.
div { display:block; } span { display:inline-block; }To fix overflowing, check padding, border, or box-sizing. Apply box-sizing: border-box to include borders inside total width or use overflow: hidden to clip excess content. Understanding the box model helps solve layout issues quickly.
.container { overflow:hidden; box-sizing:border-box; }The fixed position keeps an element locked relative to the viewport. It doesn’t move when the page is scrolled, making it useful for headers, menus, or floating buttons.
nav { position: fixed; top: 0; width: 100%; }z-index determines the stacking order of positioned elements. Elements with a higher z-index appear above those with a lower value, but it works only on elements with a position other than static.
.modal { position: absolute; z-index: 999; }When you mark an element as `display: flex`, its **direct children** become flex items. Nested deeper descendants do not automatically become flex items unless their parent is also a flex container. :contentReference[oaicite:2]{index=2}
<div class="container" style="display:flex;"> <div>A</div> <div>B</div> </div>
Valid values for `flex-direction` include `row`, `row-reverse`, `column`, and `column-reverse`. `baseline` is not a valid direction. `baseline` is used in alignment contexts (like align-items) but not for direction. :contentReference[oaicite:4]{index=4}
.container { flex-direction: column-reverse; }Using `flex-wrap: wrap` on a flex container permits items to wrap onto next lines if they overflow the container width. The default is `nowrap`. :contentReference[oaicite:6]{index=6}
.container { display:flex; flex-wrap: wrap; }`display: flex` makes the element a block-level flex container (takes full width, new line). `inline-flex` makes the container inline (flows within text) while still applying flex behavior to its children. So inline-flex does not break the line. :contentReference[oaicite:9]{index=9}
.menu { display: inline-flex; }The `order` property determines the visual order of a flex item relative to its siblings. Items with lower order values appear first. You can change layout order without altering HTML. The default `order` is 0. Negative or positive values shift placement. Example: `.item { order: -1; }` moves it to the front. :contentReference[oaicite:10]{index=10}
.item-1 { order: 2; } .item-2 { order: 1; }`repeat(3, 1fr)` defines three equal flexible columns, each taking one fraction of available space. It’s a concise way to create evenly distributed columns.
.grid { grid-template-columns: repeat(3, 1fr); }`minmax(200px, 1fr)` sets each column to be at least 200 pixels wide but flexible up to available free space. Combined with `auto-fit`, it creates fully responsive grids that adapt to viewport width.
.grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }Use flexible units like `fr`, `minmax()`, and auto-placement helpers like `repeat(auto-fit, minmax(200px, 1fr))`. Combine them with media queries for breakpoints. This way the grid adapts automatically to screen sizes without fixed pixel values.
@media (max-width:600px){ .grid { grid-template-columns:1fr; } }You can define a 3-column grid using `grid-template-columns: repeat(3, 1fr)` and then use a media query to switch to `1fr` below a breakpoint. This approach creates responsive columns without extra markup or frameworks.
.grid { grid-template-columns: repeat(3,1fr); } @media(max-width:768px){ .grid{ grid-template-columns:1fr; } }Transform functions include rotate(), scale(), translate(), and skew(). `color()` is not a transform but a color manipulation function in filters or CSS Color Module.
div { transform: rotate(45deg) scale(1.2); }`animation-iteration-count` defines how many times an animation should repeat. You can use numbers or `infinite` for continuous looping.
.box { animation-iteration-count: infinite; }Easing functions like `ease-in`, `ease-out`, and `cubic-bezier()` define acceleration and deceleration of animations for natural motion. They make movement look more realistic rather than linear, improving UX and feel of transitions.
.box { transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }Prefer GPU-accelerated properties like `transform` and `opacity` over layout-triggering ones like `width` or `top`. Avoid animating large box shadows, use `will-change` for hints, and limit the number of simultaneous animations to reduce reflow and repaints.
.card { will-change: transform; }Optimize by using hardware-accelerated properties like `transform` instead of `top` or `left`. Reduce repainting by avoiding box shadows and gradients. Consider `will-change: transform` and minimize animation duration for better mobile performance.
.btn { transition: transform 0.3s; will-change: transform; }An ID selector uses a hash (#). The rule '#header{}' styles the element with that specific ID. Each ID should be unique within a page.
#header { background-color: #333; }The child selector (>) matches only the **direct** children of an element, not deeper descendants.
.menu > li { padding: 10px; }Pseudo-classes represent a state (like :hover or :focus), while pseudo-elements create virtual elements (like ::before or ::after). Pseudo-classes modify existing elements based on interaction, pseudo-elements insert new content for styling.
a:hover{} /* state */ p::first-line{} /* virtual part */A relatively positioned element remains in the document flow but can be offset visually using top, left, bottom, or right properties.
div { position: relative; top: 10px; left: 20px; }A new stacking context forms when an element is positioned (other than static) and has a z-index. It isolates child z-index layers from the outer context.
.container { position: relative; z-index: 10; }Use absolute for elements that need to align relative to a container (like tooltips or badges). Use fixed when you want an element to stay visible during scroll, like sticky headers or chat widgets.
.tooltip { position: absolute; top: 100%; left: 0; } .navbar { position: fixed; top: 0; }Mobile-first design starts with base mobile styles and adds rules for larger devices using `min-width`. This ensures smaller screens load faster with fewer overrides.
@media (min-width: 768px) { .container { width: 80%; } }Position: relative keeps the element in the normal document flow but allows it to move relative to its original position using top, right, bottom, or left properties.
div { position: relative; top: 10px; }Both remove the element from normal flow, but absolute positions relative to the nearest positioned ancestor, while fixed positions relative to the viewport. Fixed elements don’t move when scrolling, whereas absolute elements scroll with their container.
.menu { position: fixed; top: 0; }
.tooltip { position: absolute; top: 20px; }Sticky combines relative and fixed behavior. It scrolls with content until a defined position (like top: 0) and then sticks to that position.
header { position: sticky; top: 0; background: white; }`clamp(min, preferred, max)` defines a range that scales with screen size but never goes below or above set limits. This creates fluid, balanced text across devices.
h1 { font-size: clamp(1.2rem, 5vw, 2.5rem); }For complete preparation, combine this company + subject page with full company-wise practice and subject-wise practice. You can also explore other companies and topics from the links below.