1. What is CSS and why is it used?
Difficulty: EASYType: SUBJECTIVETopic: CSS Basics
CSS stands for Cascading Style Sheets. It is used to control the look and layout of web pages. With CSS, you can define colors, fonts, spacing, and positioning of elements. It separates the design part from the structure, making web development cleaner and easier to maintain.
2. What does CSS stand for?
Difficulty: EASYType: MCQTopic: CSS Basics
- Computer Style Sheets
- Cascading Style Sheets
- Colorful Style System
- Creative Styling Syntax
CSS stands for Cascading Style Sheets, used to define the style of web pages written in HTML.
Correct Answer: Cascading Style Sheets
3. Explain the CSS Box Model
Difficulty: EASYType: SUBJECTIVETopic: CSS Basics
The Box Model describes how every element on a webpage is structured as a rectangular box. It consists of four parts — content, padding, border, and margin. The content is what you see, padding is the space inside the border, the border surrounds the content and padding, and the margin is the space outside the border separating elements.
4. What is Flexbox in CSS and why is it used?
Difficulty: MEDIUMType: SUBJECTIVETopic: CSS Basics
Flexbox, or the Flexible Box Layout, is a modern layout system in CSS that makes it easier to design flexible and responsive layout structures. It helps to align and distribute space among items inside a container, even when their size is unknown or dynamic. With Flexbox, elements can easily be centered, aligned, or spaced evenly.
5. What is the CSS box model?
Difficulty: MEDIUMType: SUBJECTIVETopic: CSS Basics
The CSS box model describes how every HTML element is a rectangular box made up of four parts content, padding, border, and margin.
The total element size equals content plus padding plus border plus margin.
If you use box-sizing: border-box, padding and border are included inside the width and height.
6. What is the difference between relative, absolute, fixed, and sticky positioning?
Difficulty: EASYType: SUBJECTIVETopic: CSS Basics
Relative: moves the element relative to its normal position.
Absolute: positions the element relative to the nearest positioned ancestor.
Fixed: positions the element relative to the viewport — it doesn’t move when you scroll.
Sticky: acts like relative until you scroll past a point, then it sticks in place.
7. What is the difference between inline, block, and inline-block elements?
Difficulty: EASYType: SUBJECTIVETopic: CSS Basics
Inline: only takes up as much width as needed and doesn’t start a new line.
Block: takes the full width and always starts on a new line.
Inline-block: acts like inline but allows setting width and height.
8. What is CSS specificity?
Difficulty: MEDIUMType: SUBJECTIVETopic: CSS Basics
Specificity determines which CSS rule wins when multiple rules target the same element.
Inline styles have the highest priority, then IDs, then classes or pseudo-classes, and finally element selectors.
9. Explain Flexbox briefly.
Difficulty: EASYType: SUBJECTIVETopic: CSS Basics
Flexbox is a one-dimensional layout system that makes it easy to align and distribute space among items in a container.
You can control direction, alignment, and spacing using properties like flex-direction, justify-content, and align-items
10. How is Cell Padding different from Cell Spacing?
Difficulty: EASYType: SUBJECTIVETopic: CSS Basics
Cell Spacing is the space or gap between two consecutive cells. Whereas, Cell Padding is the space or gap between the text/ content of the cell and the edge/ border of the cell. Please refer to the above figure example to find the difference
11. Which HTML tag is used to include an external CSS file?
Difficulty: EasyType: MCQTopic: Add CSS
- <style>
- <css>
- <link>
- <stylesheet>
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.
Correct Answer: <link>
Example Code
<head>
<link rel="stylesheet" href="style.css">
</head>
12. What is the correct CSS syntax for changing text color to red?
Difficulty: EasyType: MCQTopic: CSS Basics
- p { text-color: red; }
- p { color: red; }
- p: color(red);
- p.color = red;
The correct syntax is p { color: red; }. The property 'color' changes the text color. This tests basic CSS property knowledge — often asked in coding rounds.
Correct Answer: p { color: red; }
Example Code
p { color: red; }13. Which has the highest priority when multiple CSS rules apply to the same element?
Difficulty: MediumType: MCQTopic: Add CSS
- External CSS
- Internal CSS
- Inline CSS
- Browser default style
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.
Correct Answer: Inline CSS
Example Code
<p style="color: red;">This text is red</p>
14. Which selector targets all paragraph elements with class 'intro'?
Difficulty: MediumType: MCQTopic: CSS Selectors
- p.intro
- .intro p
- p#intro
- #p intro
The selector p.intro means: select all <p> elements that have the class 'intro'. This is basic CSS selector syntax — very common in interviews.
Correct Answer: p.intro
Example Code
p.intro { color: blue; }15. Which CSS unit is relative to the parent element’s font size?
Difficulty: EasyType: MCQTopic: CSS Units
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.
Correct Answer: em
Example Code
p { font-size: 1.5em; }16. How do you add comments in CSS?
Difficulty: EasyType: MCQTopic: CSS Basics
- // This is a comment
- <!-- This is a comment -->
- /* This is a comment */
- # This is a comment
CSS comments are written between /* and */. Comments are ignored by the browser and used to describe code sections — useful for teamwork and interviews about best practices.
Correct Answer: /* This is a comment */
Example Code
/* This is a CSS comment */
p { color: blue; }17. Which of the following is a valid CSS color value?
Difficulty: EasyType: MCQTopic: CSS Colors
- color: 255,0,0;
- color: rgb(255,0,0);
- color: (255,0,0);
- color = red;
The rgb(255,0,0) value represents red in RGB color format. CSS supports named colors, HEX, RGB, RGBA, and HSL. This is often asked in web styling interviews.
Correct Answer: color: rgb(255,0,0);
Example Code
h1 { color: rgb(255, 0, 0); }18. Explain in your own words what CSS is and why it is used in web development.
Difficulty: EasyType: SubjectiveTopic: CSS Basics
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.
Example Code
body { background-color: lightblue; }19. Describe the difference between inline, internal, and external CSS. Which one is best for large projects?
Difficulty: MediumType: SubjectiveTopic: Add CSS
Inline CSS applies directly to elements. Internal CSS is written in the head tag using <style>. External CSS is stored in a separate file linked with <link>. External is best for scalability and reusability — a frequent interview topic.
Example Code
<link rel="stylesheet" href="style.css">
20. What does 'cascading' mean in CSS?
Difficulty: MediumType: SubjectiveTopic: Specificity
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.
Example Code
p { color: blue; }
p.special { color: red; }21. Why are CSS selectors important, and how do they help in large applications?
Difficulty: MediumType: SubjectiveTopic: CSS Selectors
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.
Example Code
button.primary { background-color: green; }22. Compare px, em, and rem units. When should each be used?
Difficulty: MediumType: SubjectiveTopic: CSS Units
px is absolute, em and rem are relative. em depends on parent font-size, rem depends on root font-size. In interviews, emphasize that rem gives consistent scaling for responsive designs.
Example Code
h1 { font-size: 2rem; }23. If a style is not applying, what steps will you take to debug the issue?
Difficulty: MediumType: SubjectiveTopic: CSS Debugging
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 Code
/* Example: Using DevTools to check active CSS rules */
24. Which selector selects all <p> elements in a document?
Difficulty: EasyType: MCQTopic: CSS Selectors
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.
Correct Answer: p
Example Code
p { color: blue; }25. How do you select elements with class name 'intro'?
Difficulty: EasyType: MCQTopic: CSS Selectors
A class selector begins with a dot. The selector '.intro' selects all elements that have class='intro'. Classes are reusable for multiple elements.
Correct Answer: .intro
Example Code
.intro { font-size: 18px; }26. How do you select an element with ID 'main'?
Difficulty: EasyType: MCQTopic: CSS Selectors
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.
Correct Answer: #main
Example Code
#main { background-color: lightgray; }27. Which selector targets all <span> elements inside <div> elements?
Difficulty: MediumType: MCQTopic: CSS Combinators
- div + span
- div span
- div > span
- div#span
The selector 'div span' selects every span element that is nested anywhere inside a div, regardless of the depth. It helps style inner elements within containers.
Correct Answer: div span
Example Code
div span { color: red; }28. What does the '>' selector do in CSS?
Difficulty: MediumType: MCQTopic: CSS Combinators
- Selects all descendant elements
- Selects only direct child elements
- Selects parent elements
- Selects sibling elements
The child selector '>' selects only elements that are direct children of the specified parent. It does not apply to deeper nested elements.
Correct Answer: Selects only direct child elements
Example Code
div > p { color: green; }29. Which has higher specificity?
Difficulty: MediumType: MCQTopic: Specificity
- Element selector
- Class selector
- ID selector
- Universal selector
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.
Correct Answer: ID selector
Example Code
#box { color: red; } /* overrides */
.box { color: blue; }30. What does the universal selector (*) do?
Difficulty: EasyType: MCQTopic: CSS Selectors
- Selects only text nodes
- Selects all elements on the page
- Selects only div elements
- Selects no elements
The universal selector '*' matches every element on the page. It’s often used to reset margins, padding, or apply base styles globally.
Correct Answer: Selects all elements on the page
Example Code
* { margin: 0; padding: 0; }31. Which selector targets all input elements with type='text'?
Difficulty: MediumType: MCQTopic: CSS Selectors
- input.text
- input(type=text)
- input[type='text']
- input#text
The attribute selector input[type='text'] applies styles to input fields whose type is text. It’s useful for form-specific styling and improving UI consistency.
Correct Answer: input[type='text']
Example Code
input[type='text'] { border: 1px solid gray; }32. Explain different types of CSS selectors with examples.
Difficulty: EasyType: SubjectiveTopic: CSS Selectors
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.
Example Code
p, .intro, #main, input[type='text']
33. What is CSS specificity, and why is it important?
Difficulty: MediumType: SubjectiveTopic: Specificity
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.
Example Code
#id > .class > p
34. Explain how inheritance works in CSS.
Difficulty: MediumType: SubjectiveTopic: Inheritance
Inheritance in CSS means some properties are automatically passed from parent elements to their children. For example, text color and font family are inherited, but box-related properties like margin or padding are not. You can use the 'inherit' keyword to force a property to take its parent’s value.
Example Code
p { color: inherit; }35. Describe the different combinators in CSS.
Difficulty: MediumType: SubjectiveTopic: CSS Combinators
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.
Example Code
div + p { color: red; }36. What does the !important rule do, and when should it be avoided?
Difficulty: MediumType: SubjectiveTopic: Specificity
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.
Example Code
p { color: blue !important; }37. If two CSS rules conflict, how will you find which one is applied?
Difficulty: MediumType: SubjectiveTopic: CSS Debugging
When CSS rules conflict, you can open the browser’s Developer Tools and inspect the element. The 'Computed' tab shows the final applied styles. The browser uses specificity and the cascade order to determine which rule wins.
Example Code
/* Use browser DevTools > Computed Styles */
38. Which of the following is not part of the CSS box model?
Difficulty: EasyType: MCQTopic: Box Model
- Margin
- Padding
- Border
- Outline
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.
Correct Answer: Outline
Example Code
/* Box model parts */
.box { margin:10px; border:2px solid; padding:8px; }39. What is the correct order of the CSS box model from inside to outside?
Difficulty: EasyType: MCQTopic: Box Model
- Content → Border → Padding → Margin
- Content → Padding → Border → Margin
- Padding → Content → Margin → Border
- Border → Content → Padding → Margin
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.
Correct Answer: Content → Padding → Border → Margin
Example Code
/* Inside to outside */
Content → Padding → Border → Margin
40. If an element has width 100px, padding 10px, border 5px, and margin 10px, what is its total width in standard box model?
Difficulty: MediumType: MCQTopic: Box Model
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.
Correct Answer: 130px
Example Code
Total = 100 + 10 + 10 + 5 + 5 = 130px
41. Which box-sizing value includes padding and border inside the total width and height?
Difficulty: MediumType: MCQTopic: Box Model
- content-box
- border-box
- padding-box
- default-box
The 'border-box' value makes the browser include padding and border within the total width and height. This prevents layout shifts and is preferred in modern web design.
Correct Answer: border-box
Example Code
box-sizing: border-box;
42. Which of the following elements are block-level by default?
Difficulty: EasyType: MCQTopic: CSS Display
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.
Correct Answer: <div>
Example Code
div { display: block; }43. What happens when you apply width and height to an inline element?
Difficulty: EasyType: MCQTopic: CSS Display
- They are applied normally
- Only height works
- They are ignored
- Only width works
Inline elements cannot have width or height applied directly. To control their size, you can change their display type to inline-block or block.
Correct Answer: They are ignored
Example Code
span { display: inline-block; width:100px; }44. What is the main difference between inline-block and block elements?
Difficulty: MediumType: MCQTopic: CSS Display
- Inline-block elements break line after them
- Inline-block elements allow width and height but stay inline
- They behave identically
- Block elements cannot have padding
An inline-block element behaves like inline content but supports block properties such as width, height, and vertical margins, making it ideal for layouts like navigation menus.
Correct Answer: Inline-block elements allow width and height but stay inline
Example Code
span { display: inline-block; width:80px; }45. What is the difference between display: none and visibility: hidden?
Difficulty: MediumType: MCQTopic: CSS Display
- Both hide the element but visibility: hidden keeps its space
- Both remove the element completely
- display: none keeps the space reserved
- They are identical
display: none completely removes the element from the layout flow, while visibility: hidden makes the element invisible but keeps its occupied space intact.
Correct Answer: Both hide the element but visibility: hidden keeps its space
Example Code
/* Hidden but space reserved */
.box { visibility: hidden; }46. Explain the CSS box model in detail.
Difficulty: EasyType: SubjectiveTopic: Box Model
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.
Example Code
div { margin:10px; border:2px solid; padding:5px; }47. What is the purpose of the box-sizing property?
Difficulty: MediumType: SubjectiveTopic: Box Model
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.
Example Code
* { box-sizing: border-box; }48. Differentiate between block, inline, and inline-block display types.
Difficulty: MediumType: SubjectiveTopic: CSS Display
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.
Example Code
div { display:block; } span { display:inline-block; }49. Explain the difference between visibility: hidden and display: none.
Difficulty: MediumType: SubjectiveTopic: CSS Display
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.
Example Code
.box { visibility:hidden; }50. What is margin collapsing in CSS?
Difficulty: MediumType: SubjectiveTopic: Box Model
Margin collapsing occurs when the top and bottom margins of two adjacent elements combine into a single margin equal to the larger of the two. It usually happens in vertical stacking and helps maintain consistent spacing without doubling the gap.
Example Code
p + p { margin-top:20px; }51. A div is overflowing its container. How will you fix it?
Difficulty: MediumType: SubjectiveTopic: CSS Debugging
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.
Example Code
.container { overflow:hidden; box-sizing:border-box; }52. What is the default position value for HTML elements?
Difficulty: EasyType: MCQTopic: CSS Positioning
- relative
- absolute
- static
- fixed
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.
Correct Answer: static
Example Code
div { position: static; }53. Which statement about position: relative is true?
Difficulty: EasyType: MCQTopic: CSS Positioning
- It removes the element from the document flow
- It positions the element relative to its normal position
- It positions relative to the viewport
- It hides the element
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.
Correct Answer: It positions the element relative to its normal position
Example Code
div { position: relative; top: 10px; }54. An absolutely positioned element is positioned relative to:
Difficulty: MediumType: MCQTopic: CSS Positioning
- The viewport always
- The nearest positioned ancestor
- The <body> element
- The first inline element
An element with position: absolute is positioned relative to the nearest ancestor that has a position other than static. If no such ancestor exists, it positions relative to the document body.
Correct Answer: The nearest positioned ancestor
Example Code
.child { position: absolute; top: 0; left: 0; }55. Which position value keeps an element fixed even when scrolling?
Difficulty: MediumType: MCQTopic: CSS Positioning
- absolute
- relative
- sticky
- fixed
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.
Correct Answer: fixed
Example Code
nav { position: fixed; top: 0; width: 100%; }56. What best describes position: sticky?
Difficulty: MediumType: MCQTopic: CSS Positioning
- It behaves like static until a scroll threshold, then acts fixed
- It’s the same as relative
- It’s always fixed on the screen
- It hides the element
A sticky element toggles between relative and fixed positioning depending on the scroll position. It stays fixed only after crossing a defined offset.
Correct Answer: It behaves like static until a scroll threshold, then acts fixed
Example Code
header { position: sticky; top: 0; }57. What is the main purpose of the float property in CSS?
Difficulty: MediumType: MCQTopic: Floats
- To position elements absolutely
- To push an element to the left or right for wrapping text
- To make elements invisible
- To center align an element
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.
Correct Answer: To push an element to the left or right for wrapping text
Example Code
img { float: right; margin: 10px; }58. Which property is used to prevent elements from wrapping around floated elements?
Difficulty: MediumType: MCQTopic: Floats
- float
- clear
- overflow
- display
The clear property specifies which sides of an element floating elements are not allowed. For example, clear: both ensures the element appears below any floated elements.
Correct Answer: clear
Example Code
.footer { clear: both; }59. What does the z-index property control?
Difficulty: MediumType: MCQTopic: Z Index
- Element color
- Text alignment
- Stacking order of elements along the z-axis
- Transition duration
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.
Correct Answer: Stacking order of elements along the z-axis
Example Code
.modal { position: absolute; z-index: 999; }60. Explain different types of CSS positioning.
Difficulty: EasyType: SubjectiveTopic: CSS Positioning
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.
Example Code
div { position: absolute; top: 0; }61. What is the difference between position: fixed and position: absolute?
Difficulty: MediumType: SubjectiveTopic: CSS Positioning
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.
Example Code
.menu { position: fixed; top: 0; }
.tooltip { position: absolute; top: 20px; }62. Explain the float and clear properties with a practical example.
Difficulty: MediumType: SubjectiveTopic: Floats
Float is used to move elements like images or boxes to the left or right so that text wraps around them. The clear property is used to stop elements from wrapping around floated items. For example, after floating an image right, applying clear: both to the next section ensures it starts below.
Example Code
img { float: right; }
.footer { clear: both; }63. How does position: sticky work internally?
Difficulty: MediumType: SubjectiveTopic: CSS Positioning
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.
Example Code
header { position: sticky; top: 0; }64. Explain how z-index and stacking context work together.
Difficulty: MediumType: SubjectiveTopic: Z Index
z-index defines how elements overlap along the z-axis. It works only on positioned elements. Each positioned element can create a new stacking context, meaning its children are stacked independently from the rest of the page. Higher z-index values appear above lower ones within the same context.
Example Code
.popup { position: relative; z-index: 10; }65. A tooltip is appearing behind other elements. How will you fix it?
Difficulty: MediumType: SubjectiveTopic: CSS Debugging
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.
Example Code
.tooltip { position: absolute; z-index: 9999; }66. What is Flexbox in CSS?
Difficulty: EasyType: MCQTopic: CSS Flexbox
- A grid-based layout system
- A layout module for one-dimensional layouts
- A method for creating tables
- A CSS animation framework
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}
Correct Answer: A layout module for one-dimensional layouts
Example Code
.container { display: flex; }67. Which element becomes a flex item?
Difficulty: EasyType: MCQTopic: CSS Flexbox
- The flex container itself
- Immediate children of a flex container
- All descendants of a flex container
- Only elements with class .item
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}
Correct Answer: Immediate children of a flex container
Example Code
<div class="container" style="display:flex;"> <div>A</div> <div>B</div> </div>
68. Which property aligns flex items along the main axis?
Difficulty: MediumType: MCQTopic: CSS Flexbox
- align-items
- justify-content
- align-content
- flex-direction
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}
Correct Answer: justify-content
Example Code
.container { display:flex; justify-content: center; }69. Which is **not** a valid value of flex-direction?
Difficulty: MediumType: MCQTopic: CSS Flexbox
- row
- column
- baseline
- column-reverse
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}
Correct Answer: baseline
Example Code
.container { flex-direction: column-reverse; }70. What does `flex: 1 0 200px` mean?
Difficulty: MediumType: MCQTopic: CSS Flexbox
- grow=1, shrink=0, basis=200px
- grow=0, shrink=1, basis=200px
- grow=1, shrink=200, basis=0px
- It’s invalid
`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}
Correct Answer: grow=1, shrink=0, basis=200px
Example Code
.box { flex: 1 0 200px; }71. Which value allows flex items to wrap onto multiple lines?
Difficulty: MediumType: MCQTopic: CSS Flexbox
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}
Correct Answer: wrap
Example Code
.container { display:flex; flex-wrap: wrap; }72. When does `align-content` have an effect?
Difficulty: HardType: MCQTopic: CSS Flexbox
- With single-line flex containers
- When flex items wrap and there is extra cross-axis space
- Always
- Only in grid layout
`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}
Correct Answer: When flex items wrap and there is extra cross-axis space
Example Code
.container { flex-wrap: wrap; align-content: space-between; }73. What advantages does Flexbox offer over older layout methods (e.g. floats)?
Difficulty: MediumType: SubjectiveTopic: CSS Flexbox
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}
Example Code
.container { display: flex; justify-content: center; align-items: center; }74. What is the difference between `display: flex` and `display: inline-flex`?
Difficulty: MediumType: SubjectiveTopic: CSS Flexbox
`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}
Example Code
.menu { display: inline-flex; }75. How would you center a div both horizontally and vertically using Flexbox?
Difficulty: MediumType: SubjectiveTopic: CSS Flexbox
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 */ }
```
Example Code
.parent { display:flex; justify-content:center; align-items:center; height:100vh; }76. How does the `order` property affect flex item layout?
Difficulty: MediumType: SubjectiveTopic: CSS Flexbox
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}
Example Code
.item-1 { order: 2; } .item-2 { order: 1; }77. A flex item is shrinking undesirably. How will you prevent that?
Difficulty: MediumType: SubjectiveTopic: CSS Debugging
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}
Example Code
.item { flex-shrink: 0; }78. What is CSS Grid?
Difficulty: EasyType: MCQTopic: CSS Grid
- A one-dimensional layout system
- A two-dimensional layout system for rows and columns
- A CSS animation feature
- A table-layout replacement only for rows
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.
Correct Answer: A two-dimensional layout system for rows and columns
Example Code
.container { display: grid; grid-template-columns: 1fr 1fr; }79. When an element is set to display: grid, what happens to its children?
Difficulty: EasyType: MCQTopic: CSS Grid
- They become flex items
- They become grid items
- They stay in normal flow
- They become inline elements
When an element is set as a grid container, all its **direct children** become grid items that can be positioned within rows and columns defined by grid properties.
Correct Answer: They become grid items
Example Code
.grid { display: grid; }80. What does `grid-template-columns: repeat(3, 1fr)` do?
Difficulty: MediumType: MCQTopic: CSS Grid
- Creates one column
- Creates three equal-width columns
- Creates a 3×3 grid
- Repeats grid rows
`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.
Correct Answer: Creates three equal-width columns
Example Code
.grid { grid-template-columns: repeat(3, 1fr); }81. What does the `gap` property control in a grid layout?
Difficulty: MediumType: MCQTopic: CSS Grid
- Padding inside grid items
- Space between grid rows and columns
- Outer margin of the container
- Line height between text
`gap` (formerly grid-gap) defines the spacing between rows and columns inside the grid, without affecting the content of grid items.
Correct Answer: Space between grid rows and columns
Example Code
.grid { gap: 20px; }82. In CSS Grid, numbering of grid lines starts from:
Difficulty: MediumType: MCQTopic: CSS Grid
- 0
- 1
- top-left corner
- bottom-right corner
Grid lines are numbered starting from 1 at the top-left corner horizontally and vertically. You can place items using these line numbers.
Correct Answer: 1
Example Code
.item { grid-column: 1 / 3; }83. What happens if you don’t specify grid-row or grid-column for items?
Difficulty: MediumType: MCQTopic: CSS Grid
- Items overlap
- Browser auto-places them sequentially
- They are hidden
- They all go to the first cell
When no explicit row/column placement is defined, the browser automatically places items in available cells following document order. This is called auto-placement.
Correct Answer: Browser auto-places them sequentially
Example Code
.grid { display: grid; grid-template-columns: 1fr 1fr; }84. What does the `fr` unit represent in CSS Grid?
Difficulty: MediumType: MCQTopic: CSS Grid
- Fraction of total free space
- Fixed pixel size
- Percentage width
- Font-related unit
The `fr` (fraction) unit distributes remaining space among grid tracks proportionally. For example, `1fr 2fr` divides free space in 1:2 ratio.
Correct Answer: Fraction of total free space
Example Code
.grid { grid-template-columns: 1fr 2fr; }85. What does `grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))` achieve?
Difficulty: HardType: MCQTopic: CSS Grid
- Creates one fixed column
- Creates responsive columns between 200px and remaining space
- Fixes all columns to 200px
- Disables wrapping
`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.
Correct Answer: Creates responsive columns between 200px and remaining space
Example Code
.grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }86. Differentiate between CSS Grid and Flexbox.
Difficulty: MediumType: SubjectiveTopic: CSS Layout
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.
Example Code
.container { display: grid; grid-template-columns: 1fr 2fr; }87. Explain the difference between explicit and implicit grids.
Difficulty: MediumType: SubjectiveTopic: CSS Grid
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`.
Example Code
.grid { grid-template-columns: 200px 1fr; grid-auto-rows: 100px; }88. How do you make a CSS Grid layout responsive?
Difficulty: MediumType: SubjectiveTopic: CSS Grid
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.
Example Code
@media (max-width:600px){ .grid { grid-template-columns:1fr; } }89. What are grid areas and how do you use them?
Difficulty: MediumType: SubjectiveTopic: CSS Grid
Grid areas let you assign names to specific sections of a grid for easy placement. You define them in `grid-template-areas` and assign to items via `grid-area`. This makes large layouts more readable and maintainable.
Example Code
.grid { grid-template-areas: 'header header' 'sidebar main'; } .header { grid-area: header; }90. Explain the role of the grid-auto-flow property.
Difficulty: MediumType: SubjectiveTopic: CSS Grid
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.
Example Code
.grid { grid-auto-flow: row dense; }91. You need a 3-column layout that collapses to one column on mobile. How will you do it using CSS Grid?
Difficulty: HardType: SubjectiveTopic: CSS Debugging
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.
Example Code
.grid { grid-template-columns: repeat(3,1fr); } @media(max-width:768px){ .grid{ grid-template-columns:1fr; } }92. What does the CSS transition property do?
Difficulty: EasyType: MCQTopic: CSS Transitions
- Applies a keyframe animation automatically
- Smoothly changes property values over time
- Moves elements around the screen
- Defines the z-index order
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.
Correct Answer: Smoothly changes property values over time
Example Code
button { transition: background-color 0.3s ease; }93. Which of the following is NOT part of a transition shorthand?
Difficulty: EasyType: MCQTopic: CSS Transitions
- property
- duration
- timing-function
- iteration-count
`transition` shorthand includes property, duration, timing-function, and delay. `iteration-count` belongs to animations, not transitions.
Correct Answer: iteration-count
Example Code
div { transition: all 0.5s ease-in-out; }94. Which of the following is NOT a valid transform function?
Difficulty: MediumType: MCQTopic: CSS Transforms
- rotate()
- translate()
- skew()
- color()
Transform functions include rotate(), scale(), translate(), and skew(). `color()` is not a transform but a color manipulation function in filters or CSS Color Module.
Correct Answer: color()
Example Code
div { transform: rotate(45deg) scale(1.2); }95. Which CSS property enables 3D transform perspective?
Difficulty: MediumType: MCQTopic: CSS Transforms
- transform-origin
- perspective
- z-index
- translateZ
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.
Correct Answer: perspective
Example Code
.scene { perspective: 600px; }96. What is the correct syntax for defining a CSS keyframe animation?
Difficulty: MediumType: MCQTopic: CSS Animations
- @frames fadeIn { ... }
- @animation fadeIn { ... }
- @keyframes fadeIn { ... }
- @timeline fadeIn { ... }
CSS animations are defined using the `@keyframes` rule, which specifies property changes at different points in time using percentages or keywords (from/to).
Correct Answer: @keyframes fadeIn { ... }
Example Code
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }97. Which property controls how many times an animation repeats?
Difficulty: MediumType: MCQTopic: CSS Animations
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
`animation-iteration-count` defines how many times an animation should repeat. You can use numbers or `infinite` for continuous looping.
Correct Answer: animation-iteration-count
Example Code
.box { animation-iteration-count: infinite; }98. What does `animation-fill-mode: forwards` do?
Difficulty: MediumType: MCQTopic: CSS Animations
- Starts the animation halfway
- Keeps the final keyframe styles after animation ends
- Reverses the animation direction
- Plays animation twice
`animation-fill-mode: forwards` ensures the element retains the final keyframe’s styles after the animation completes instead of reverting to its initial state.
Correct Answer: Keeps the final keyframe styles after animation ends
Example Code
.fadeIn { animation-fill-mode: forwards; }99. How does a transition differ from an animation in CSS?
Difficulty: MediumType: MCQTopic: CSS Transitions
- Transitions require keyframes
- Animations occur automatically without user action
- Transitions only occur when property changes
- Animations cannot loop
Transitions are triggered when a property changes (like hover). Animations run continuously using keyframes. Transitions are simpler and event-based; animations are timeline-based.
Correct Answer: Transitions only occur when property changes
Example Code
div:hover { background: red; transition: background 0.3s; }100. Explain how you can add a smooth hover effect using transition.
Difficulty: EasyType: SubjectiveTopic: CSS Transitions
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; }`.
Example Code
.btn { transition: background 0.3s ease; } .btn:hover { background:#007BFF; }101. What are CSS easing functions and why are they used?
Difficulty: MediumType: SubjectiveTopic: CSS Animations
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.
Example Code
.box { transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }102. What does transform-origin control?
Difficulty: MediumType: SubjectiveTopic: CSS Transforms
`transform-origin` defines the point around which transforms like rotation or scaling occur. For example, `transform-origin: left top;` rotates around the top-left instead of the default center point.
Example Code
.icon { transform-origin: left top; transform: rotate(45deg); }103. How can you make CSS animations more performant?
Difficulty: HardType: SubjectiveTopic: Performance
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.
Example Code
.card { will-change: transform; }104. Explain how keyframes work with an example.
Difficulty: MediumType: SubjectiveTopic: CSS Animations
`@keyframes` define stages of an animation using percentages. Each stage sets different CSS properties. For example, a fade-in uses `from {opacity:0}` and `to {opacity:1}`. The animation plays over the defined duration and can loop or reverse based on configuration.
Example Code
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} } .box{ animation: fadeIn 2s ease; }105. Your hover animation is lagging on mobile. How would you fix it?
Difficulty: MediumType: SubjectiveTopic: CSS Debugging
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.
Example Code
.btn { transition: transform 0.3s; will-change: transform; }106. Which of the following selects all elements with class 'btn'?
Difficulty: EasyType: MCQTopic: CSS Selectors
The period (.) symbol targets class names. '.btn' selects all elements having the class 'btn'. '#' is used for IDs, and '*' selects all elements.
Correct Answer: .btn
Example Code
.btn { color: white; background: blue; }107. What is the correct syntax to select an element with ID 'header'?
Difficulty: EasyType: MCQTopic: CSS Selectors
- header{}
- #header{}
- .header{}
- *header{}
An ID selector uses a hash (#). The rule '#header{}' styles the element with that specific ID. Each ID should be unique within a page.
Correct Answer: #header{}
Example Code
#header { background-color: #333; }108. What does the selector '.card p' target?
Difficulty: MediumType: MCQTopic: CSS Combinators
- All p elements on the page
- Only p elements directly inside .card
- All p elements nested anywhere inside .card
- p elements that follow .card
A descendant selector selects all matching elements inside a parent, regardless of depth. '.card p' applies to all <p> within .card at any level.
Correct Answer: All p elements nested anywhere inside .card
Example Code
.card p { color: gray; }109. Which selector targets only direct child elements?
Difficulty: MediumType: MCQTopic: CSS Combinators
- .parent .child
- .parent > .child
- .parent + .child
- .parent ~ .child
The child selector (>) matches only the **direct** children of an element, not deeper descendants.
Correct Answer: .parent > .child
Example Code
.menu > li { padding: 10px; }110. Which selector has the highest specificity?
Difficulty: MediumType: MCQTopic: Specificity
Specificity is calculated as ID > Class > Element. '#main p' includes an ID, giving it higher specificity than class or element selectors.
Correct Answer: #main p
Example Code
#main p { color: red; }111. Which pseudo-class applies when a user hovers over an element?
Difficulty: MediumType: MCQTopic: Pseudo Selectors
- :focus
- :visited
- :hover
- :active
`:hover` triggers when the user points to an element (commonly used for interactive buttons). Example: `.btn:hover { background: #0066cc; }`.
Correct Answer: :hover
Example Code
.btn:hover { background-color: darkblue; }112. Which pseudo-element inserts content before an element?
Difficulty: MediumType: MCQTopic: Pseudo Selectors
- :before
- ::before
- :after
- ::insert
`::before` is the correct modern syntax (double colon) for inserting generated content before an element. It requires `content:` property to work.
Correct Answer: ::before
Example Code
h1::before { content: '👉 '; color: orange; }113. Explain how CSS specificity is calculated.
Difficulty: MediumType: SubjectiveTopic: Specificity
Specificity determines which CSS rule wins when multiple rules target the same element. The hierarchy is: Inline styles (highest), IDs, Classes/Attributes/Pseudo-classes, and then Elements/Pseudo-elements. A rule with an ID selector overrides one with only classes or tags.
Example Code
#id (100 points) > .class (10 points) > element (1 point)
114. Differentiate between pseudo-classes and pseudo-elements.
Difficulty: MediumType: SubjectiveTopic: Pseudo Selectors
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.
Example Code
a:hover{} /* state */ p::first-line{} /* virtual part */115. What are CSS combinators and how do they work?
Difficulty: MediumType: SubjectiveTopic: CSS Combinators
Combinators define relationships between selectors. The main ones are: space (descendant), '>' (child), '+' (adjacent sibling), and '~' (general sibling). They help target elements precisely based on their structural relation.
Example Code
.parent > .child, h2 + p, h2 ~ ul
116. If two CSS rules conflict, how can you determine which one applies?
Difficulty: MediumType: SubjectiveTopic: CSS Debugging
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 Code
/* Example */ #title {color:red;} .heading {color:blue;} /* red wins */117. List and explain useful pseudo-classes for form validation.
Difficulty: MediumType: SubjectiveTopic: Pseudo Selectors
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.
Example Code
input:focus { border-color: blue; } input:invalid { border-color: red; }118. Your hover effect isn’t applying on mobile devices. Why, and what’s the solution?
Difficulty: HardType: SubjectiveTopic: CSS Debugging
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.
Example Code
button:active { background: #333; }119. What is the default positioning for all HTML elements?
Difficulty: EasyType: MCQTopic: CSS Positioning
- relative
- absolute
- static
- fixed
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.
Correct Answer: static
Example Code
div { position: static; }120. What happens when you set an element’s position to relative?
Difficulty: EasyType: MCQTopic: CSS Positioning
- It is removed from the document flow
- It can be moved relative to its normal position
- It becomes fixed at the top
- It hides the element
A relatively positioned element remains in the document flow but can be offset visually using top, left, bottom, or right properties.
Correct Answer: It can be moved relative to its normal position
Example Code
div { position: relative; top: 10px; left: 20px; }121. When an element is positioned absolutely, its position is relative to:
Difficulty: MediumType: MCQTopic: CSS Positioning
- The entire document
- The nearest positioned ancestor
- The body element
- The viewport
An absolutely positioned element is taken out of the normal flow and positioned relative to its nearest ancestor with a position other than static. If none exists, it positions relative to the document body.
Correct Answer: The nearest positioned ancestor
Example Code
.child { position: absolute; top: 0; left: 0; }122. Which positioning keeps an element fixed relative to the viewport even when scrolling?
Difficulty: MediumType: MCQTopic: CSS Positioning
- relative
- absolute
- fixed
- sticky
The `fixed` position keeps an element pinned to the viewport, unaffected by scrolling. Commonly used for headers, navbars, or floating buttons.
Correct Answer: fixed
Example Code
.navbar { position: fixed; top: 0; width: 100%; }123. What is unique about position: sticky?
Difficulty: MediumType: MCQTopic: CSS Positioning
- It behaves like relative until a scroll threshold, then becomes fixed
- It always stays fixed
- It floats above all elements
- It disables scrolling
Sticky combines relative and fixed behavior. It scrolls with content until a defined position (like top: 0) and then sticks to that position.
Correct Answer: It behaves like relative until a scroll threshold, then becomes fixed
Example Code
header { position: sticky; top: 0; background: white; }124. Which property controls the stack order of positioned elements?
Difficulty: MediumType: MCQTopic: Z Index
`z-index` determines the stack order of positioned elements. Higher z-index values appear in front of lower ones, within the same stacking context.
Correct Answer: z-index
Example Code
.box1 { z-index: 2; } .box2 { z-index: 5; }125. A new stacking context is created when an element has:
Difficulty: HardType: MCQTopic: Z Index
- position: static
- z-index set with position: relative/absolute
- overflow: hidden only
- display: flex only
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.
Correct Answer: z-index set with position: relative/absolute
Example Code
.container { position: relative; z-index: 10; }126. Which position type removes the element from normal document flow?
Difficulty: MediumType: MCQTopic: CSS Layout
- relative
- absolute
- static
- sticky
Absolutely and fixed positioned elements are removed from normal document flow, meaning they do not affect the positioning of surrounding elements.
Correct Answer: absolute
Example Code
div { position: absolute; top: 50px; left: 50px; }127. Explain all position types in CSS.
Difficulty: MediumType: SubjectiveTopic: CSS Positioning
`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.
Example Code
div { position: relative; top: 10px; }128. Why might a higher z-index not bring an element to front?
Difficulty: MediumType: SubjectiveTopic: Z Index
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.
Example Code
.parent { position: relative; z-index: 1; } .child { z-index: 9999; }129. When would you use absolute vs fixed positioning?
Difficulty: MediumType: SubjectiveTopic: CSS Positioning
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.
Example Code
.tooltip { position: absolute; top: 100%; left: 0; } .navbar { position: fixed; top: 0; }130. How would you create a sticky header that remains at the top while scrolling?
Difficulty: MediumType: SubjectiveTopic: CSS Positioning
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.
Example Code
header { position: sticky; top: 0; background: white; z-index: 100; }131. You find two elements overlapping incorrectly. How would you debug it?
Difficulty: HardType: SubjectiveTopic: CSS Debugging
Inspect with DevTools to check stacking context, z-index values, and position types. Simplify by removing z-indexes step-by-step. Remember z-index only works on positioned elements. Check parent overflow and isolation too.
Example Code
div { position: relative; z-index: 5; }132. What is normal document flow and why is it important?
Difficulty: MediumType: SubjectiveTopic: CSS Layout
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).
Example Code
p { display: block; } span { display: inline; }133. Which is the correct syntax for a CSS media query?
Difficulty: EasyType: MCQTopic: Media Queries
- @query (max-width: 600px) { ... }
- @media (max-width: 600px) { ... }
- media(max-width:600){...}
- @responsive 600px { ... }
Media queries start with `@media` followed by conditions like `(max-width: 600px)`. Inside the braces, CSS rules apply only when the condition is true.
Correct Answer: @media (max-width: 600px) { ... }
Example Code
@media (max-width: 600px) { body { font-size: 14px; } }134. In a mobile-first approach, which condition should be used for responsive scaling?
Difficulty: MediumType: MCQTopic: Media Queries
- (max-width: ...)
- (min-width: ...)
- (device-width: ...)
- (screen-width: ...)
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.
Correct Answer: (min-width: ...)
Example Code
@media (min-width: 768px) { .container { width: 80%; } }135. Which of the following is a common tablet breakpoint?
Difficulty: EasyType: MCQTopic: Breakpoints
The 768px breakpoint typically targets tablets in portrait orientation. Other standard breakpoints include 480px (mobile) and 1024px (desktop).
Correct Answer: 768px
Example Code
@media (max-width: 768px) { nav { display: none; } }136. Why is the viewport meta tag important in responsive design?
Difficulty: EasyType: MCQTopic: Viewport Meta
- It sets the base font-size
- It tells browsers how to scale pages on different devices
- It defines media query ranges
- It adjusts animation speed
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'>`
Correct Answer: It tells browsers how to scale pages on different devices
Example Code
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
137. Which query targets devices held horizontally?
Difficulty: MediumType: MCQTopic: Media Queries
- (orientation: landscape)
- (direction: horizontal)
- (width > height)
- (mode: wide)
Orientation media features let you apply styles based on device orientation: `landscape` (width > height) or `portrait` (height > width).
Correct Answer: (orientation: landscape)
Example Code
@media (orientation: landscape) { img { height: 60vh; } }138. Which CSS units are relative to the viewport size?
Difficulty: MediumType: MCQTopic: CSS Units
Viewport height (vh) and viewport width (vw) are relative to the visible screen size. `1vh` = 1% of viewport height; `1vw` = 1% of viewport width.
Correct Answer: vh and vw
Example Code
section { height: 100vh; width: 100vw; }139. Which flexbox property helps wrap items on smaller screens?
Difficulty: MediumType: MCQTopic: CSS Flexbox
- justify-content
- flex-wrap
- align-items
- gap
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.
Correct Answer: flex-wrap
Example Code
.container { display: flex; flex-wrap: wrap; }140. Which CSS ensures images resize within their container?
Difficulty: MediumType: MCQTopic: Responsive Images
- width: fixed; height: auto;
- max-width: 100%; height: auto;
- object-fit: cover;
- width: 100vw;
Using `max-width: 100%` ensures images shrink to fit container width while maintaining aspect ratio. Essential for responsive web design.
Correct Answer: max-width: 100%; height: auto;
Example Code
img { max-width: 100%; height: auto; }141. Explain the mobile-first approach in responsive design.
Difficulty: MediumType: SubjectiveTopic: Mobile First
Mobile-first means designing and coding for smaller screens first, then progressively enhancing for larger screens using min-width media queries. This ensures performance, better UX, and scalability.
Example Code
@media (min-width: 768px) { .grid { grid-template-columns: 1fr 1fr; } }142. What are breakpoints and how are they chosen?
Difficulty: MediumType: SubjectiveTopic: Breakpoints
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.
Example Code
@media (max-width: 1024px) { .sidebar { display: none; } }143. How do vh and vw units help in responsive design?
Difficulty: MediumType: SubjectiveTopic: CSS Units
`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.
Example Code
header { height: 100vh; background-size: cover; }144. How can you make images responsive and optimized?
Difficulty: MediumType: SubjectiveTopic: Responsive Images
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.
Example Code
<img srcset='small.jpg 600w, large.jpg 1200w' src='large.jpg' alt='example'>
145. How do you test responsive design effectively?
Difficulty: MediumType: SubjectiveTopic: Responsive Test
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.
Example Code
Responsive testing: Chrome DevTools → Toggle Device Toolbar
146. What are common mistakes developers make with media queries?
Difficulty: HardType: SubjectiveTopic: Responsive Tips
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.
Example Code
Avoid: @media (max-width: 768px) and (min-width: 800px) { ... }147. Which is the correct syntax to define and use a CSS variable?
Difficulty: EasyType: MCQTopic: CSS Variables
- var(--primary-color: blue);
- --primary-color = blue;
- :root { --primary-color: blue; } and color: var(--primary-color);
- setColor(primary, blue);
CSS variables are defined with `--name` inside a selector (commonly `:root`) and accessed using `var(--name)`. They allow consistent theming and easier maintenance.
Correct Answer: :root { --primary-color: blue; } and color: var(--primary-color);
Example Code
:root { --main-color: #007bff; } h1 { color: var(--main-color); }148. Where should CSS variables be declared for global usage?
Difficulty: MediumType: MCQTopic: CSS Variables
- Inside body
- Inside * selector
- Inside :root
- Inside each element
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.
Correct Answer: Inside :root
Example Code
:root { --font-size: 16px; }149. What does the CSS calc() function allow you to do?
Difficulty: MediumType: MCQTopic: CSS Functions
- Perform math operations in CSS values
- Add colors together
- Concatenate strings
- Create animations
`calc()` lets you combine different units dynamically (%, px, rem) — for example: `width: calc(100% - 50px);`. Useful for fluid layouts and spacing adjustments.
Correct Answer: Perform math operations in CSS values
Example Code
section { width: calc(100% - 40px); }150. What does the CSS clamp() function do?
Difficulty: MediumType: MCQTopic: CSS Functions
- Clamps text to a single line
- Defines a value that scales between min and max limits
- Restricts animations within boundaries
- Creates gradient effects
`clamp(min, preferred, max)` allows fluid, responsive values while preventing them from exceeding given limits — ideal for responsive font sizes.
Correct Answer: Defines a value that scales between min and max limits
Example Code
h1 { font-size: clamp(1rem, 4vw, 2rem); }151. Which CSS function adjusts the transparency of a color?
Difficulty: MediumType: MCQTopic: CSS Colors
The `rgba()` function defines colors with alpha transparency. Example: `rgba(255, 0, 0, 0.5)` creates a semi-transparent red background.
Correct Answer: rgba()
Example Code
div { background-color: rgba(0, 0, 255, 0.2); }152. Which property can create effects like blur or grayscale without editing images?
Difficulty: MediumType: MCQTopic: CSS Filters
- mask
- mix-blend-mode
- filter
- transform
The `filter` property applies graphical effects like blur, brightness, contrast, or grayscale directly in CSS without modifying the source image.
Correct Answer: filter
Example Code
img { filter: grayscale(100%); }153. Which logical property replaces 'margin-left' in a writing-direction-independent layout?
Difficulty: MediumType: MCQTopic: Logical Props
- margin-inline-start
- margin-block-start
- margin-inline-end
- margin-before
Logical properties adapt layouts for left-to-right and right-to-left languages. `margin-inline-start` adjusts automatically with writing direction.
Correct Answer: margin-inline-start
Example Code
div { margin-inline-start: 20px; }154. Which property defines how an element’s content blends with its background?
Difficulty: HardType: MCQTopic: Blend Modes
- filter
- mix-blend-mode
- opacity
- background-overlay
The `mix-blend-mode` property determines how element colors blend with background content, allowing creative effects like multiply, overlay, and screen.
Correct Answer: mix-blend-mode
Example Code
img { mix-blend-mode: multiply; }155. Explain how CSS variables improve maintainability and theming.
Difficulty: MediumType: SubjectiveTopic: CSS Variables
CSS variables store reusable values, making design updates easier. For example, changing `--primary-color` in one place updates it across the project. They also enable light/dark themes dynamically via JavaScript or user preferences.
Example Code
:root { --primary-color: #2196f3; } body { color: var(--primary-color); }156. When should you use CSS functions like calc(), min(), or max()?
Difficulty: MediumType: SubjectiveTopic: CSS Functions
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.
Example Code
main { width: min(90vw, 1200px); }157. How does clamp() improve responsive typography?
Difficulty: MediumType: SubjectiveTopic: CSS Functions
`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.
Example Code
h1 { font-size: clamp(1.2rem, 5vw, 2.5rem); }158. What happens if a CSS variable is undefined?
Difficulty: MediumType: SubjectiveTopic: CSS Variables
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.
Example Code
p { color: var(--accent, #000); }159. Do CSS filters affect performance?
Difficulty: MediumType: SubjectiveTopic: Performance
Yes, filters like blur or brightness are GPU-intensive. Overusing them can slow rendering, especially on low-end devices. Use them sparingly and prefer optimized images when possible.
Example Code
img:hover { filter: brightness(1.2); }160. What modern CSS features impress interviewers today?
Difficulty: HardType: SubjectiveTopic: CSS Interview
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.
Example Code
@media (prefers-color-scheme: dark) { body { background: #121212; } }161. Which property controls the duration of a CSS transition?
Difficulty: EasyType: MCQTopic: CSS Transitions
- transition-delay
- transition-duration
- animation-time
- transition-speed
`transition-duration` defines how long the transition lasts. Example: `transition-duration: 0.3s;` makes a property change animate over 0.3 seconds.
Correct Answer: transition-duration
Example Code
button { transition-duration: 0.3s; }162. To animate only background-color, which is correct?
Difficulty: EasyType: MCQTopic: CSS Transitions
- transition: all 1s;
- transition-property: color;
- transition-property: background-color;
- animation: background 1s;
`transition-property` defines which CSS property changes should animate. Restricting it improves performance.
Correct Answer: transition-property: background-color;
Example Code
div { transition-property: background-color; transition-duration: 0.5s; }163. Which timing function starts slow, speeds up, then slows again?
Difficulty: MediumType: MCQTopic: CSS Transitions
- linear
- ease-in
- ease-in-out
- cubic-bezier(1,0,0,1)
`ease-in-out` accelerates midway then decelerates, creating smooth natural motion. It’s commonly used for hover or modal transitions.
Correct Answer: ease-in-out
Example Code
a:hover { transition: all 0.3s ease-in-out; }164. Which syntax correctly defines a CSS keyframe animation?
Difficulty: MediumType: MCQTopic: CSS Animations
- @keyframes spin { from { } to { } }
- @animation spin { from { } to { } }
- keyframe spin { start { } end { } }
- @frames spin { }
`@keyframes` defines intermediate steps of an animation between `from` and `to` or percentages.
Correct Answer: @keyframes spin { from { } to { } }
Example Code
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }165. Which property repeats an animation indefinitely?
Difficulty: MediumType: MCQTopic: CSS Animations
- animation-count
- animation-iteration-count: infinite;
- loop: true;
- repeat: always;
`animation-iteration-count` controls how many times an animation repeats. Setting it to `infinite` loops it endlessly.
Correct Answer: animation-iteration-count: infinite;
Example Code
div { animation: pulse 2s infinite; }166. Which property is used to rotate, scale, or translate elements?
Difficulty: MediumType: MCQTopic: CSS Transforms
- animation
- transform
- transition
- translate
`transform` applies 2D/3D transformations like `rotate()`, `scale()`, and `translate()`. It’s GPU-optimized and commonly animated.
Correct Answer: transform
Example Code
div:hover { transform: scale(1.1) rotate(5deg); }167. Which is a valid animation shorthand property?
Difficulty: MediumType: MCQTopic: CSS Animations
- animation: slide 3s ease-in-out 1s infinite alternate;
- keyframes: slide 3s;
- transition: slide 3s;
- motion: slide;
The shorthand order is: name duration timing-function delay iteration-count direction fill-mode play-state.
Correct Answer: animation: slide 3s ease-in-out 1s infinite alternate;
Example Code
div { animation: bounce 2s linear 1s infinite alternate; }168. Which CSS properties are most performance-friendly to animate?
Difficulty: HardType: MCQTopic: Performance
- width and height
- opacity and transform
- box-shadow and border
- background-color and margin
`opacity` and `transform` are GPU-accelerated and don’t trigger layout or repaint, making them ideal for smooth animations.
Correct Answer: opacity and transform
Example Code
div:hover { opacity: 0.8; transform: scale(1.05); }169. What is the difference between CSS transitions and animations?
Difficulty: MediumType: SubjectiveTopic: CSS Transitions
Transitions occur when a property changes, like hover. Animations run automatically through keyframes. Transitions handle simple state changes; animations handle continuous or complex sequences.
Example Code
div:hover { transition: background 0.3s; } @keyframes move { 0% { left:0; } 100% { left:100px; } }170. When would you use keyframes instead of transitions?
Difficulty: MediumType: SubjectiveTopic: CSS Animations
Use keyframes for multi-step animations like loading spinners or looping effects. Transitions are best for simple hover or focus changes.
Example Code
@keyframes bounce { 0%,100% { top:0; } 50% { top:-20px; } }171. Explain how easing functions affect animations.
Difficulty: MediumType: SubjectiveTopic: CSS Animations
Easing defines acceleration over time — `linear` is constant, `ease-in` starts slow, `ease-out` ends slow, `ease-in-out` smooths both ends. It adds realism and polish to motion.
Example Code
button:hover { transition: all 0.3s ease-in-out; }172. How can you optimize CSS animations for performance?
Difficulty: MediumType: SubjectiveTopic: Performance
Animate only opacity and transform when possible. Use `will-change` hints, avoid heavy shadows or large repaints, and prefer GPU-accelerated properties.
Example Code
div { will-change: transform, opacity; }173. Describe a real-world example where you used CSS animation.
Difficulty: MediumType: SubjectiveTopic: CSS Debugging
Example — Button micro-interaction: On hover, the button scales slightly and changes color with a smooth ease-out, giving responsive feedback without JavaScript.
Example Code
button:hover { transform: scale(1.05); transition: transform 0.2s ease-out; }174. What does animation-fill-mode do and when is it useful?
Difficulty: MediumType: SubjectiveTopic: CSS Animations
`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.
Example Code
div { animation: fadeIn 1s forwards; }