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
Wipro · CSS
Practice CSS questions specifically asked in Wipro interviews – ideal for online test preparation, technical rounds and final HR discussions.
Questions
84
Tagged for this company + subject
Company
Wipro
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 Wipro CSS round.
The element selector 'p' is used to target all paragraph elements in the document. It applies the defined style to every <p> tag on the page.
p { color: blue; }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.
Animate only opacity and transform when possible. Use `will-change` hints, avoid heavy shadows or large repaints, and prefer GPU-accelerated properties.
div { will-change: transform, opacity; }The child selector '>' selects only elements that are direct children of the specified parent. It does not apply to deeper nested elements.
div > p { color: green; }The universal selector '*' matches every element on the page. It’s often used to reset margins, padding, or apply base styles globally.
* { margin: 0; padding: 0; }Logical properties adapt layouts for left-to-right and right-to-left languages. `margin-inline-start` adjusts automatically with writing direction.
div { margin-inline-start: 20px; }The CSS box model consists of four main areas — content, padding, border, and margin. The outline is not part of the box model; it lies outside the margin and does not affect the box’s size.
/* Box model parts */
.box { margin:10px; border:2px solid; padding:8px; }`transition-duration` defines how long the transition lasts. Example: `transition-duration: 0.3s;` makes a property change animate over 0.3 seconds.
button { transition-duration: 0.3s; }`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; }Use browser DevTools device mode to simulate screen sizes. Test on real devices when possible. Check key breakpoints, text readability, and touch targets. Tools like ResponsivelyApp or BrowserStack help verify behavior.
Responsive testing: Chrome DevTools → Toggle Device Toolbar
The `rgba()` function defines colors with alpha transparency. Example: `rgba(255, 0, 0, 0.5)` creates a semi-transparent red background.
div { background-color: rgba(0, 0, 255, 0.2); }You can provide fallback values inside `var()`. For example, `color: var(--text-color, black);` ensures `black` is used if the variable isn’t set — preventing rendering issues.
p { color: var(--accent, #000); }Transitions occur when a property changes, like hover. Animations run automatically through keyframes. Transitions handle simple state changes; animations handle continuous or complex sequences.
div:hover { transition: background 0.3s; } @keyframes move { 0% { left:0; } 100% { left:100px; } }Check for typos, rule order, specificity, and file linking. Use browser dev tools to inspect applied styles. Showing a structured approach like this in interviews demonstrates practical experience.
/* Example: Using DevTools to check active CSS rules */
Flexbox (Flexible Box Layout) is a CSS layout model specialized for distributing space along a single axis (row or column). It allows flexible alignment, resizing, and ordering of items in that axis. :contentReference[oaicite:1]{index=1}
.container { display: flex; }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 Grid is a two-dimensional layout module allowing control of both rows and columns simultaneously. It simplifies building complex responsive designs without floats or positioning hacks.
.container { display: grid; grid-template-columns: 1fr 1fr; }The `transition` property lets you animate changes to CSS properties smoothly when they change. For example, changing background-color or transform values over a set duration.
button { transition: background-color 0.3s ease; }The period (.) symbol targets class names. '.btn' selects all elements having the class 'btn'. '#' is used for IDs, and '*' selects all elements.
.btn { color: white; background: blue; }`transition` shorthand includes property, duration, timing-function, and delay. `iteration-count` belongs to animations, not transitions.
div { transition: all 0.5s ease-in-out; }CSS provides different types of selectors such as element selectors, class selectors, ID selectors, attribute selectors, and pseudo-class selectors. For example, 'p' selects all paragraphs, '.intro' selects all elements with the class intro, and '#main' selects the element with ID main. Each type helps target elements efficiently for styling.
p, .intro, #main, input[type='text']
The `flex-wrap` property allows flex items to move to the next line when space runs out — crucial for responsive rows of elements like cards or buttons.
.container { display: flex; flex-wrap: wrap; }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; } }`vh` and `vw` scale elements according to the viewport size, making designs automatically adjust to different screen sizes without needing breakpoints. For example, hero sections often use height: 100vh.
header { height: 100vh; background-size: cover; }Use `max-width: 100%` and `height: auto` to resize images fluidly. Combine with `srcset` or `<picture>` for device-specific resolutions to reduce load time on smaller devices.
<img srcset='small.jpg 600w, large.jpg 1200w' src='large.jpg' alt='example'>
CSS stands for Cascading Style Sheets. It is used to style HTML elements — controlling layout, colors, and fonts. In interviews, explaining that CSS separates design from content shows understanding of modern web practices.
body { background-color: lightblue; }A class selector begins with a dot. The selector '.intro' selects all elements that have class='intro'. Classes are reusable for multiple elements.
.intro { font-size: 18px; }CSS has five main position values: static, relative, absolute, fixed, and sticky. Static is default and doesn’t move. Relative moves an element based on its normal position. Absolute positions relative to the nearest positioned ancestor. Fixed stays in place during scroll. Sticky combines relative and fixed behaviors depending on scroll offset.
div { position: absolute; top: 0; }You can fix it by setting a higher z-index and ensuring the tooltip’s parent has a proper stacking context. Often the issue arises because a parent element has a lower z-index or overflow set to hidden, preventing proper layering.
.tooltip { position: absolute; z-index: 9999; }When no explicit row/column placement is defined, the browser automatically places items in available cells following document order. This is called auto-placement.
.grid { display: grid; grid-template-columns: 1fr 1fr; }Cascading means the order of style application. When multiple rules affect the same element, the one with higher specificity or later in the code wins. Explaining this clearly impresses interviewers — it shows real debugging skill.
p { color: blue; }
p.special { color: red; }CSS specificity decides which rule will be applied when multiple rules target the same element. Inline styles have the highest priority, followed by ID selectors, class selectors, and element selectors. Understanding specificity is important to control style conflicts and maintain consistent design.
#id > .class > p
The '!important' rule forces a CSS property to override all others, regardless of specificity. It should be used rarely because it makes the code harder to maintain. Instead, write clean and specific selectors to control priority.
p { color: blue !important; }In the standard box model, total width equals content width plus padding and border. So 100 + (10 + 10) + (5 + 5) = 130px. Margin adds space outside and doesn’t affect element size.
Total = 100 + 10 + 10 + 5 + 5 = 130px
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; }Inline elements cannot have width or height applied directly. To control their size, you can change their display type to inline-block or block.
span { display: inline-block; width:100px; }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; }The box-sizing property controls how the total size of an element is calculated. In content-box, padding and border are added to width and height. In border-box, padding and border are included inside the total width and height. border-box makes layout management easier and is widely used in modern CSS resets.
* { box-sizing: border-box; }display: none completely removes the element from the layout, as if it doesn’t exist, while visibility: hidden hides the element but keeps its original space reserved. This is useful for animations, toggles, and accessibility control in UI design.
.box { visibility:hidden; }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; }By default, all elements have a static position. Static elements are positioned according to the normal document flow and do not respond to top, right, bottom, or left offsets.
div { position: static; }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%; }The `fixed` position keeps an element pinned to the viewport, unaffected by scrolling. Commonly used for headers, navbars, or floating buttons.
.navbar { position: fixed; top: 0; width: 100%; }The float property moves an element to the left or right, allowing inline content like text or images to wrap around it. It was commonly used for layouts before Flexbox and Grid.
img { float: right; margin: 10px; }In Flexbox, `justify-content` controls how items are distributed along the **main axis** (row or column). `align-items` (or `align-self`) control alignment along the **cross axis**. :contentReference[oaicite:3]{index=3}
.container { display:flex; justify-content: center; }`flex` is shorthand for `flex-grow`, `flex-shrink`, and `flex-basis`. Here it means the item can grow to fill space (1), will not shrink (0), and has initial basis 200px. :contentReference[oaicite:5]{index=5}
.box { flex: 1 0 200px; }Flexbox simplifies alignment, distribution, and spacing along an axis without hacks. You can center items easily (vertically & horizontally), reorder without changing HTML, manage dynamic spacing, and handle different screen sizes more cleanly. It reduces reliance on floats, clears, and complex calculations. :contentReference[oaicite:8]{index=8}
.container { display: flex; justify-content: center; align-items: center; }`gap` (formerly grid-gap) defines the spacing between rows and columns inside the grid, without affecting the content of grid items.
.grid { gap: 20px; }Flexbox is one-dimensional, controlling layout along a single axis (row or column). CSS Grid is two-dimensional, handling both rows and columns simultaneously. Flexbox is great for aligning items within a component, while Grid is better for entire page or section layouts.
.container { display: grid; grid-template-columns: 1fr 2fr; }An explicit grid is defined by properties like `grid-template-rows` and `grid-template-columns`. Any item outside this defined structure goes into the implicit grid, automatically created by the browser to hold overflow items. You can control their sizing using `grid-auto-rows` or `grid-auto-columns`.
.grid { grid-template-columns: 200px 1fr; grid-auto-rows: 100px; }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; } }The `perspective` property defines the distance between the viewer and the 3D element, allowing elements to appear with depth. Used alongside transform-style: preserve-3d.
.scene { perspective: 600px; }CSS animations are defined using the `@keyframes` rule, which specifies property changes at different points in time using percentages or keywords (from/to).
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }By default, all elements are positioned `static`. This means they follow the normal document flow and are not affected by top, left, right, or bottom properties.
div { position: static; }Transitions are triggered when a property changes (like hover). Animations run continuously using keyframes. Transitions are simpler and event-based; animations are timeline-based.
div:hover { background: red; transition: background 0.3s; }You can define a `transition` on the property you want to animate, such as color or transform. Then when the property changes (like on hover), it transitions smoothly over the defined duration and easing. Example: `.btn { transition: background 0.3s ease; } .btn:hover { background: #007BFF; }`.
.btn { transition: background 0.3s ease; } .btn:hover { background:#007BFF; }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; }Viewport height (vh) and viewport width (vw) are relative to the visible screen size. `1vh` = 1% of viewport height; `1vw` = 1% of viewport width.
section { height: 100vh; width: 100vw; }The child selector (>) matches only the **direct** children of an element, not deeper descendants.
.menu > li { padding: 10px; }Specificity is calculated as ID > Class > Element. '#main p' includes an ID, giving it higher specificity than class or element selectors.
#main p { color: red; }`::before` is the correct modern syntax (double colon) for inserting generated content before an element. It requires `content:` property to work.
h1::before { content: '👉 '; color: orange; }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 */The browser applies the rule with higher specificity. If equal, the later one in the CSS file wins. You can inspect elements in DevTools to see which rules are crossed out or overridden.
/* Example */ #title {color:red;} .heading {color:blue;} /* red wins */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; }`static` (default, normal flow), `relative` (offset from normal flow), `absolute` (removed from flow, relative to ancestor), `fixed` (relative to viewport), and `sticky` (hybrid between relative and fixed). Each serves a layout purpose for control and alignment.
div { position: relative; top: 10px; }Because z-index works only within the same stacking context. If a parent creates its own stacking context (e.g., via position and z-index), child elements can’t overlap elements outside that context, no matter their z-index.
.parent { position: relative; z-index: 1; } .child { z-index: 9999; }Apply `position: sticky` with `top: 0`. This allows the header to scroll with the page until it reaches the top, then it sticks. Ensure parent containers do not have overflow hidden, or it won’t work.
header { position: sticky; top: 0; background: white; z-index: 100; }Media queries start with `@media` followed by conditions like `(max-width: 600px)`. Inside the braces, CSS rules apply only when the condition is true.
@media (max-width: 600px) { body { font-size: 14px; } }The viewport meta tag ensures the browser sets proper scaling for mobile devices. Without it, pages appear zoomed out. Example: `<meta name='viewport' content='width=device-width, initial-scale=1.0'>`
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
`align-content` controls how multiple rows (or columns) of flex items are spaced along the cross axis **only when the items wrap** and there is leftover space. It has no effect in a single line layout. :contentReference[oaicite:7]{index=7}
.container { flex-wrap: wrap; align-content: space-between; }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; }Inline CSS has the highest priority because it is applied directly to the element. Then internal, then external. Understanding priority helps in debugging style conflicts in real projects.
<p style="color: red;">This text is red</p>
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; }The CSS box model describes how every HTML element is structured as a rectangular box. It includes the content area, padding, border, and margin. Padding adds space inside the box, the border surrounds the padding, and the margin adds space outside the border. Understanding this helps control spacing and layout accurately.
div { margin:10px; border:2px solid; padding:5px; }You set the parent container as `display: flex`, then `justify-content: center` (horizontal centering on main axis) and `align-items: center` (vertical on cross axis). If the container is full height, this centers the child. Example: ```css .parent { display: flex; justify-content: center; align-items: center; height: 100vh; } .child { /* content */ } ```
.parent { display:flex; justify-content:center; align-items:center; height:100vh; }By default, flex items can shrink (`flex-shrink: 1`). To prevent shrinking, set `flex-shrink: 0` or use shorthand like `flex: 1 0 auto` or `flex: 0 0 auto` depending on desired behavior. You can also set a `min-width` to constrain shrinkage. Ensure you understand the combined effect of grow, shrink, and basis. :contentReference[oaicite:11]{index=11}
.item { flex-shrink: 0; }The `grid-auto-flow` property controls how auto-placed items are inserted into the grid — row by row (`row` default) or column by column (`column`). Setting it to `dense` can fill holes left by larger items, improving packing but possibly reordering elements visually.
.grid { grid-auto-flow: row dense; }`animation-fill-mode: forwards` ensures the element retains the final keyframe’s styles after the animation completes instead of reverting to its initial state.
.fadeIn { animation-fill-mode: forwards; }Touch devices don’t have a traditional hover state. The first tap often triggers :hover but may not persist. Instead, use :active or JavaScript touch events for responsive feedback, or provide clear visual focus states.
button:active { background: #333; }Normal flow is the default way elements are laid out — block elements stack vertically, inline elements flow horizontally. Understanding it is crucial because most layout problems arise from breaking or removing elements from flow (e.g., with absolute or float).
p { display: block; } span { display: inline; }CSS variables are defined with `--name` inside a selector (commonly `:root`) and accessed using `var(--name)`. They allow consistent theming and easier maintenance.
:root { --main-color: #007bff; } h1 { color: var(--main-color); }Use `calc()` for dynamic arithmetic layouts, `min()` or `max()` for responsive limits. For instance, `width: min(90vw, 1200px)` restricts width to 1200px maximum while remaining fluid below that.
main { width: min(90vw, 1200px); }`@keyframes` defines intermediate steps of an animation between `from` and `to` or percentages.
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }