CSS MCQs
Q.1 A block element inside a container does not respect the specified margin-top. What could be the reason?
A. Margin collapse
B. Incorrect box-sizing
C. Border interference
D. Padding on the container
Q.2 What is the problem with using margin: 0 auto; on an inline element?
A. Inline elements cannot be centered this way
B. The margin will collapse
C. The auto value is invalid for inline elements
D. No issue
Q.3 Identify the issue: div { width: 100%; padding: 20px; } without using box-sizing: border-box;.
A. The div will be wider than its parent
B. The div’s width is too small
C. No issue
D. The padding is ignored
Q.4 An element has width: 100px; padding: 15px; border: 5px solid black;.
What is its total width if box-sizing: content-box;?
A. 100px
B. 115px
C. 130px
D. 150px
Q.5 If an element has margin: 10px; and padding: 20px;,
what is the space between the element and its neighboring element?
A. 10px
B. 20px
C. 30px
D. 40px
Q.6 What is the effect of setting margin: 0 auto; on an element?
A. It removes the element’s margins
B. It centers the element horizontally
C. It sets the margin on all sides to auto
D. It increases the margin size
Q.7 Given an element with padding: 20px; and width: 200px;,
what is the total width of the element?
A. 200px
B. 220px
C. 240px
D. 260px
Q.8 How does setting ‘margin: auto;’ affect an element?
A. Centers the element horizontally
B. Increases the element’s height
C. Adds automatic padding
D. Does nothing specific
Q.9 If an element has a width of 100px, padding of 10px, and border of 5px, what is the total width of the element if ‘box-sizing’ is set to ‘border-box’?
A. 100px
B. 120px
C. 130px
D. 150px
Q.10 Which property would you use to create space between elements?
A. Padding
B. Margin
C. Border
D. Outline
Q.11 What is the default value of the ‘box-sizing’ property?
A. content-box
B. border-box
C. padding-box
D. margin-box
Q.12 How can you make the total width of an element be 100px including padding and border?
A. Use ‘box-sizing: border-box;’ with width set to 100px
B. Set width to 100px without ‘box-sizing’ property
C. Use ‘box-sizing: content-box;’ with width set to 100px
D. Set width, padding, and border so their sum is 100px
Q.13 Which CSS property is used to control the outer space around an element?
A. Padding
B. Margin
C. Border
D. Content
Q.14 What does the ‘box-sizing’ property do?
A. Changes the CSS Box Model calculation
B. Alters the display property
C. Adjusts the border thickness
D. Modifies the margin size
Q.15 Which property is used to set the space between the border of an element and its content?
A. Margin
B. Padding
C. Border
D. Outline
Q.16 What components make up the CSS Box Model?
A. Content, Padding, Border, Margin
B. Padding, Margin, Border, Shadow
C. Content, Margin, Border, Outline
D. Content, Padding, Shadow, Margin
Q.17 Why might the CSS rule .container p { color: green; } not apply to a paragraph inside a div with class “container”?
A. The div does not have the “container” class
B. The paragraph is not a direct child
C. There is a more specific rule overriding this one
D. The CSS file is not linked properly
Q.18 Identify the error in the CSS code:
.class { color: blue; font-weight; bold; }
A. Syntax error in property declaration
B. Missing class name
C. Incorrect property value
D. No error
Q.19 Given the CSS div > p { color: red; }, what color will the text be in <div><p>Hello</p></div>?
A. Red
B. Blue
C. Green
D. Black
Q.20 What will be the font size of <p class=”text”>Hello World!</p> with the CSS .text { font-size: 20px; }?
A. 15px
B. 20px
C. 25px
D. 30px
Q.21 Which of the following is true about the CSS selector div.example?
A. Selects all divs with the class “example”
B. Selects the first div with the class “example”
C. Selects all divs
D. Selects all elements with the class “example”
Q.22 What is the correct syntax to select all <p> elements inside <div> elements?
A. div p
B. div + p
C. div > p
D. p > div
Q.23 How do you select elements with the class name “example”?
A. .example
B. #example
C. example
D. *example
Q.24 Which property is used to set the background color of an element?
A. color
B. background-color
C. bgcolor
D. background
Q.25 What does the universal selector (*) do in CSS?
A. Targets all elements in a document
B. Targets no elements
C. Targets the body element
D. Targets elements with a specific id
Q.26 Which selector is used to target an element based on its id?
A. #id
B. .id
C. *id
D. id
Q.27 Given the following CSS, what color will the <h1> text be?
body { color: red; } h1 { color: blue; }
A. Red
B. Blue
C. Green
D. Black
Q.28 Which CSS property is used to change the text color of an element?
A. text-color
B. color
C. font-color
D. background-color
Q.29 Which of the following is a valid way to integrate CSS into a webpage?
A. Inline
B. External
C. Internal
D. All of the above
Q.30 What is the primary purpose of CSS in web development?
A. To create web pages
B. To style web pages
C. To store data
D. To program web applications
Q.31 Given two overlapping elements with position: absolute;, how do you ensure the first element appears on top?
A. Set a higher z-index value on the first element
B. Set a lower z-index value on the second element
C. Use position: relative; on the first element
D. Both A and B are correct
Q.32 What is the default position value for HTML elements?
A. static
B. relative
C. absolute
D. fixed
Q.33 Can an element with a lower z-index ever appear above an element with a higher z-index?
A. Yes, if it’s positioned more closely
B. No, z-index values strictly determine stacking order
C. Yes, if it’s in a different stacking context
D. Yes, if it uses a position: fixed; style
Q.34 What determines an element’s stacking context?
A. Its position and z-index values
B. Its display value
C. Its float value
D. Its opacity value
Q.35 How can z-index affect elements with the same stacking context?
A. It moves elements horizontally across the page
B. It changes the vertical stacking order
C. It alters the opacity of elements
D. It rotates elements
Q.36 What happens if an element with position: absolute; has no positioned ancestors?
A. It is positioned relative to the document body
B. It disappears from the document
C. It remains in its original position
D. It is positioned relative to the nearest block-level element
Q.37 Which position values can z-index be applied to?
A. static only
B. relative, absolute, and fixed only
C. absolute and fixed only
D. relative, absolute, fixed, and sticky
Q.38 What is the purpose of the z-index property in CSS?
A. To adjust the zoom level of elements
B. To set the stacking order of positioned elements
C. To change the opacity of elements
D. To rotate elements
Q.39 How does the absolute positioning value differ from fixed positioning?
A. absolute positions an element relative to its nearest positioned ancestor
B. absolute positions it relative to the viewport
C. fixed positions it relative to its nearest positioned ancestor
D. fixed positions it relative to the viewport
Q.40 Which value of the position property makes an element’s position relative to its normal position?
A. static
B. relative
C. absolute
D. fixed
Q.41 What does the position property do in CSS?
A. Defines the color of an element
B. Changes the size of an element
C. Specifies the element’s position in the document
D. Alters the font of an element
Q.42 Why might a CSS Grid item overlap another grid item?
A. The items are placed in the same grid cell without grid-row-start or grid-column-start set
B. There’s a negative margin applied
C. The grid container has grid-auto-flow: dense; set
D. Both A and C are correct
Q.43 What could cause a flex item to not shrink as expected when the container size is reduced?
A. flex-shrink is set to 0
B. The item has a fixed width set
C. The container does not have display: flex;
D. Both A and B are correct
Q.44 In a grid layout, why might an item not align as expected with justify-items: start;?
A. The item has an explicit position set
B. The grid container is using align-items instead
C. The property is not supported by the browser
D. The item is absolutely positioned
Q.45 Why might items in a flex container not be displaying in a single row as expected?
A. flex-wrap is set to wrap
B. The container is too narrow
C. There are too many items
D. All of the above
Q.46 How can you create an asymmetrical grid layout with three rows where the first row is 200px tall, the second is auto-sized, and the third is 1fr tall?
A. grid-template-rows: 200px auto 1fr;
B. grid-template-rows: repeat(3, 200px auto 1fr);
C. grid-template-rows: 200px 1fr auto;
D. grid-template-rows: auto 200px 1fr;
Q.47 In CSS Grid, what does fr unit stand for?
A. Fraction of the available space
B. Fixed ratio
C. Frame rate
D. Flexible resize
Q.48 How do you make a flex item take up the remaining space in a flex container?
A. flex-grow: 1;
B. flex-basis: auto;
C. flex: auto;
D. flex: 1;
Q.49 Given a container with display: flex; and justify-content: space-between;,
how are the flex items arranged?
A. Evenly spaced along the main axis, with the first item at the start and the last at the end
B. Stacked vertically
C. Overlapped
D. Evenly spaced with equal margins on all sides
Q.50 Which property is used to define the space between Grid items?
A. grid-gap
B. grid-row-gap
C. grid-column-gap
D. gap
Q.51 In a CSS Grid layout, how do you place an item to start on column line 2 and end on column line 4?
A. grid-column: 2 / 4;
B. grid-column-start: 2; grid-column-end: 4;
C. Both A and B are correct
D. grid-column: 2 / span 2;
Q.52 What is the difference between justify-content and align-items in a flex container?
A. justify-content aligns along the main axis, align-items along the cross axis
B. justify-content aligns along the cross axis, align-items along the main axis
C. They have the same function but apply to different elements
D. There is no difference, they are interchangeable
Q.53 How can you create a grid with equal-width columns using CSS Grid?
A. Use grid-template-columns: auto;
B. Use grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
C. Use grid-template-columns: 1fr 1fr 1fr;
D. Use grid-template-columns: repeat(3, 1fr);
Q.54 What does flex-wrap: wrap; do in a flex container?
A. Forces items to stay in one line
B. Allows items to wrap onto multiple lines
C. Changes the direction of flex items
D. Applies a fixed width to flex items
Q.55 Which property aligns a flex item in the center of its container along the main axis?
A. align-self: center
B. justify-self: center
C. justify-content: center
D. align-items: center
Q.56 In CSS Grid layout, what property defines the number and sizes of columns in the grid?
A. grid-template-columns
B. grid-template-rows
C. grid-column
D. grid-row
Q.57 How do you align items in the center of a flex container along the cross axis?
A. align-items: center
B. justify-content: center
C. align-content: center
D. justify-items: center
Q.58 Which CSS property makes an element a flex container?
A. display: flex
B. display: grid
C. display: block
D. display: inline-block
Q.59 What is the default flex-direction of a flex container?
A. row
B. column
C. row-reverse
D. column-reverse
Q.60 Why might an element with box-sizing: border-box; and width: 100%; still overflow its container?
A. Padding or border not accounted for
B. Container’s width includes padding
C. Incorrect measurement of the container’s width
D. A global style affecting box-sizing
Q.61 How do you apply a font family of “Arial” to an element?
A. font-family: “Arial”;
B. font-type: “Arial”;
C. font: “Arial”;
D. typeface: “Arial”;
Q.62 Which property adds shadow to text?
A. text-shadow
B. font-shadow
C. box-shadow
D. shadow
Q.63 What is the purpose of the line-height property?
A. To set the vertical spacing between lines of text
B. To define the height of a line box
C. Both A and B are correct
D. To adjust the horizontal spacing between characters
Q.64 How do you make text uppercase using CSS?
A. text-transform: uppercase;
B. text-style: uppercase;
C. font-case: uppercase;
D. text-case: uppercase;
Q.65 Which property is used to set the text color?
A. color
B. text-color
C. font-color
D. text-style
Q.66 What does the font-weight property do?
A. It changes the font style to italic or normal
B. It adjusts the thickness or boldness of the font
C. It alters the spacing between characters
D. It sets the height of a line of text
Q.67 Which property is used to change the font size of text in CSS?
A. font-style
B. font-weight
C. font-size
D. text-transform
Q.68 Why might changes in a media query not reflect in a browser?
A. The browser cache is outdated
B. The media query syntax is incorrect
C. The stylesheet link is broken
D. All of the above
Q.69 What could be the reason for a background image not resizing with its container?
A. The background-size property is set to cover
B. The background-size property is set to contain
C. The container’s size is not defined
D. The background-size property is set to auto
Q.70 How can you fix a layout that breaks at certain viewport sizes?
A. Use additional media queries to adjust styles at those sizes
B. Increase the base font size
C. Remove all media queries and use fixed sizes
D. Decrease the overall page width
Q.71 Why might a media query not apply its styles as expected?
A. The media query is incorrectly formatted
B. The viewport meta tag is missing from the HTML document
C. There is a more specific style overriding the media query
D. All of the above
Q.72 How do you apply styles for landscape and portrait orientations of a device?
A. @media (orientation: landscape) { … } and @media (orientation: portrait) { … }
B. @media screen and (orientation: landscape) { … }
C. @media only screen and (orientation: portrait) { … }
D. Both A and B are correct
Q.73 What is the best practice for serving high-resolution images to devices with high-density displays?
A. Use the srcset attribute in the <img> element
B. Specify different images for different resolutions using CSS
C. Use JavaScript to detect the screen resolution and load images accordingly
D. All of the above
Q.74 How can you create a flexible grid layout that uses available space but limits column width to 200px?
A. Use display: grid; grid-template-columns: repeat(auto-fill, minmax(auto, 200px));
B. Use display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
C. Use display: flex; flex-wrap: wrap; and set children’s flex-basis: 200px;
D. Use display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
Q.75 Which media query is correct for applying styles to devices with a width of at least 768px?
A. @media (min-width: 768px) { … }
B. @media only screen (width >= 768px) { … }
C. @media screen and (width: 768px) { … }
D. @media (width > 768px) { … }
Q.76 How do you ensure that a video embedded in a web page is responsive?
A. Set the video’s width and height attributes to 100%
B. Use a container with a fixed aspect ratio and set the video to fill it
C. Use the <video> element with the responsive attribute
D. Apply a media query to the video based on the viewport width
Q.77 Why is it important to use relative units like %, vw, vh, em, or rem in responsive design?
A. They allow for more precise control over layout dimensions
B. They enable the layout to adjust based on the parent element’s size
C. They help the layout adapt to different screen sizes and resolutions
D. They make it easier to calculate dimensions
Q.78 What is the difference between min-width and max-width in media queries?
A. min-width applies styles for widths greater than or equal to the specified value, while max-width applies styles for widths less than or equal to the specified value
B. min-width applies styles for heights, while max-width applies styles for widths
C. min-width is used for mobile devices, while max-width is used for desktops
D. There is no difference, they are interchangeable
Q.79 How do you apply a CSS style only for screens smaller than 600px?
A. @media only screen and (max-width: 599px) { … }
B. @media screen and (max-width: 600px) { … }
C. @media (min-width: 600px) { … }
D. @media (width < 600px) { … }
Q.80 Which CSS unit is recommended for responsive typography?
A. px
B. em
C. rem
D. pt
Q.81 What does a media query allow you to do in CSS?
A. Change the layout based on the device’s orientation
B. Apply different styles for different devices based on criteria like width, height, or orientation
C. Increase the loading speed of web pages
D. Encrypt web page data for security
Q. 82 Which HTML element is used to set the viewport to the device’s width?
A. <meta name=”viewport” content=”width=device−width”>
B. <meta name=”device” content=”width=viewport”>
C. <viewport width=”device−width”>
D. <device width=”viewport”>
Q.83 What is the purpose of responsive web design?
A. To make web pages render well on a variety of devices and window or screen sizes
B. To improve the speed of web pages
C. To enhance the security of web pages
D. To create a single design for all devices
Q.84 Why might elements with different z-index values not stack as expected?
A. They are in different stacking contexts
B. There’s a CSS error
C. The z-index is not supported
D. They have different position values
Q.85 How can you solve an issue where a sticky positioned element isn’t sticking?
A. Ensure the element has a defined top, right, bottom, or left value
B. Remove any overflow properties on ancestors
C. Increase the z-index
D. Both A and B are correct
Q.86 What could cause a position: fixed; element to behave like position: absolute;?
A. The document is in quirks mode
B. The element is inside a transformed ancestor
C. The viewport is not defined
D. The browser does not support position: fixed;
Q.87 Why might an element with position: absolute; not appear where expected?
A. It’s outside the viewport
B. Its containing block is not positioned
C. It has a z-index of -1
D. Both B and C are correct
Q.88 How do you make an element with position: fixed; cover the entire viewport?
A. top: 0; right: 0; bottom: 0; left: 0;
B. width: 100%; height: 100%;
C. top: 0; bottom: 0;
D. right: 0; left: 0;
Q.89 What does setting position: sticky; on an element do?
A. Keeps the element fixed at the top of the viewport
B. Allows the element to scroll away with the page
C. Positions the element based on the user’s scroll position, toggling between relative and fixed
D. Makes the element unresponsive to scroll events
Q.90 How do you position an element at the bottom right corner of its positioned ancestor?
A. position: absolute; bottom: 0; right: 0;
B. position: fixed; bottom: 0; right: 0;
C. position: relative; bottom: 0; right: 0;
D. position: sticky; bottom: 0; right: 0;
Q.91 What is a CSS pseudo-class?
A. A special class added to elements via JavaScript
B. A class that targets specific states of an element
C. A syntax for defining default styles
D. A method to style elements based on their content type
Q.92 What could be the reason for an animation to run once and not repeat despite using animation-iteration-count: infinite;?
A. The animation is not linked to the correct element
B. The browser does not support infinite animations
C. A syntax error in the @keyframes definition
D. The animation-name property is missing or incorrect
Q.93 How can you troubleshoot an animation that does not start?
A. Ensure the @keyframes rule is correctly defined
B. Check that the animation name matches the @keyframes name
C. Verify the animation-duration is not set to 0s
D. All of the above
Q.94 What is a potential downside of setting a transition duration to 0s?
A. Makes the transition instant and potentially jarring
B. Prevents the transition from running
C. Is the recommended practice for subtle effects
D. None, it optimizes performance
Q.95 What feature do keyframe animations offer that transitions do not?
A. Triggering without user interaction
B. Requiring a hover state
C. Dependence on JavaScript
D. Limitation to transform properties
Q.96 How can you make an animation loop infinitely?
A. animation-iteration-count: infinite;
B. animation-repeat: forever;
C. animation-loop: infinite;
D. animation-duration: infinite;
Q.97 How do you apply a basic opacity transition to an element on hover?
A. .element:hover { transition: opacity 0.5s ease; opacity: 0.5; }
B. .element { transition: opacity 0.5s ease-in-out; } .element:hover { opacity: 0.5; }
C. .element { opacity: 1; } .element:hover { opacity: 0.5; transition: 0.5s; }
D. All of the above
Q.98 Which CSS property allows you to delay the start of a transition?
A. transition-delay
B. animation-delay
C. transition-duration
D. animation-duration
Q.99 What is the difference between CSS transitions and animations?
A. Transitions require a trigger, like a hover, whereas animations do not
B. Animations can only be applied to :hover states
C. Transitions can manipulate SVGs, but animations cannot
D. There is no difference; they are interchangeable
Q.100 How do you specify the timing function of a transition?
A. Using the transition-timing-function property
B. With the transition-duration property
C. By setting the transition-delay property
D. Through the animation-timing-function property
Q.101 What does the animation-direction property do?
A. Determines the speed curve of the animation
B. Specifies whether the animation should play in reverse on alternate cycles
C. Defines how many times an animation should play
D. Specifies the name of the @keyframes animation
Q.102 Which property is essential for defining the duration of a CSS transition?
A. transition-duration
B. transition-property
C. transition-timing-function
D. transition-delay
Q.103 What is the purpose of CSS transitions?
A. To change property values smoothly over a given duration
B. To create movement using keyframes
C. To pause animations
D. To manipulate images
Q.104 How can you fix the issue of table cells not aligning properly with their headers?
A. Ensure the number of cells matches the number of headers
B. Set explicit widths on headers and cells
C. Use vertical-align to align cell content
D. Both A and B are correct
Q.105 What could cause list item markers to not appear in an unordered list?
A. Setting list-style-type: none;
B. The list is inside a container with overflow: hidden;
C. Incorrect use of the ul element
D. Both A and B are correct
Q.106 Why might a table’s borders not be visible even after setting border:
1px solid black;?
A. The border-collapse property is not set
B. The border color matches the background color
C. The border style is not specified correctly
D. All of the above
Q.107 How do you apply a border to only the left side of a table cell?
A. td { border-left: 1px solid black; }
B. td: border { left: 1px solid black; }
C. td { left-border: 1px solid black; }
D. table-cell { border-left: 1px solid black; }
Q.108 How can you style every alternate row of a table to have a gray background?
A. tr:nth-child(even) { background-color: #eee; }
B. tr:even { background-color: #eee; }
C. table tr:nth-of-type(even) { background-color: #eee; }
D. tr:nth-row(even) { background-color: #eee; }
Q.109 How do you set the background color for all <th> elements in a table?
A th { background-color: #eee; }
B. table th { color: #eee; }
C. th { color: background; }
D. table { th-background: #eee; }
Q.110 Which CSS property is used to set the style of the bottom border of a table cell?
A. border-bottom-style
B. cell-border-bottom
C. table-cell-border
D. border-style-bottom
Q.111 How do you align text to the right in table headers?
A. text−align: right; in <th>
B. align: right; in <th>
C. <th align=”right”>
D. <th style=”text−align: right;”>
Q.112 What CSS property is used to control the list item marker type in an ordered list?
A. list-style-type
B. list-item-type
C. list-marker-type
D. list-number-type
Q.113 How can you make a table’s borders collapse into a single border?
A. border-collapse: collapse;
B. border-style: collapse;
C. table-border: single;
D. border: single;
Q.114 Which property is used to specify the space between cells in a table?
A. cell-spacing
B. cell-padding
C. border-spacing
D. padding
Q.115 How do you remove the default list-style-type from an unordered list?
A. list-style-type: none;
B. list-style: no-bullet;
C. list-style: none;
D. list-bullet: none;
Q.116 How can you fix text that overflows its container?
A. Use the overflow property
B. Apply text-overflow: ellipsis;
C. Increase the container size
D. Both B and C are correct
Q.117 What could cause the text-transform property to not work as expected?
A. Incorrect property value
B. The property is applied to a non-text element
C. Inheritance issues
D. Both A and C are correct
Q.118 Why might text not appear in the specified font-family in CSS?
A. The font is not installed on the user’s system
B. The browser does not support the font
C. The font-family is misspelled
D. All of the above
Q.119 How do you specify a fallback font in CSS?
A. font-family: “Helvetica”, “Arial”, sans-serif;
B. font-family: “Helvetica” or “Arial”;
C. font-family: primary: “Helvetica”, secondary: “Arial”;
D. font: “Helvetica”, “Arial”;
Q.120 How can you make text italic in CSS?
A. font-style: italic;
B. text-style: italic;
C. font-weight: italic;
D. style: italic;
Q.121 How can specificity conflicts in CSS be best resolved?
A. Using !important tags liberally
B. Increasing the specificity of conflicting selectors
C. Refactoring CSS to simplify selectors
D. Relying on inline styles for overrides
Q.122 What is a common issue when using multiple CSS frameworks or libraries simultaneously?
A. Conflicting styles leading to unexpected visual results
B. Increased load times due to additional HTTP requests
C. Incompatibility with JavaScript frameworks
D. All of the above
Q.123 Which practice is recommended to optimize CSS rendering performance?
A. Using ID selectors extensively
B. Minimizing the use of universal selectors
C. Relying heavily on inline styles
D. Employing a large number of animations
Q.124 What is the best practice for organizing CSS selectors and rules?
A. Grouping selectors and rules by page section
B. Ordering selectors alphabetically
C. Separating layout and typography styles into different files
D. All of the above
Q.125 How does CSS minification improve website performance?
A. By reducing the number of CSS files
B. By decreasing the file size, leading to faster download times
C. By increasing the specificity of selectors
D. By automatically correcting syntax errors
Q.126 What is the impact of using !important in CSS?
A. It makes debugging more difficult by breaking the natural cascade
B. It improves performance by prioritizing certain styles
C. It is required for responsive design
D. It enhances security by enforcing style rules
Q.127 What is a key reason to use CSS shorthand properties?
A. To improve readability and maintainability
B. To exclusively enhance performance
C. To introduce new CSS features
D. To comply with CSS validation standards
Q.128 How can you troubleshoot a Bootstrap component that is not displaying as expected?
A. Check if the Bootstrap CDN link is correctly included in the <head>
B. Verify that the correct classes are applied to the component
C. Ensure that no custom CSS is overriding Bootstrap’s styles
D. All of the above
Q.129 Why might changes made with SASS not be reflected in your CSS?
A. The SASS file was not saved before compiling
B. The CSS file is not correctly linked to the HTML document
C. There is a syntax error in the SASS file
D. All of the above
Q.130 How do you create a mixin in SASS?
A. @mixin mixin-name { … }
B. $mixin mixin-name { … }
C. #mixin mixin-name { … }
D. %mixin mixin-name { … }
Q.131 How do you include a Bootstrap component in your webpage?
A. Add the Bootstrap CDN link in the <head> and use the component’s class in your HTML
B. Download the Bootstrap library and reference it in your HTML
C. Use a Bootstrap plugin
D. All of the above
Q.132 What is the difference between SASS and SCSS?
A. SASS uses a strict indentation-based syntax, while SCSS uses a syntax similar to CSS
B. SASS files are faster to compile than SCSS
C. SCSS can only be used with Bootstrap
D. There is no difference; they are interchangeable
Q.133 How do CSS preprocessors like SASS enhance CSS development?
A. By adding programming features such as variables, nested rules, and functions
B. By automatically converting CSS to JavaScript
C. By reducing the need for CSS files
D. By encrypting CSS files for security
Q.134 What is the main advantage of using a CSS framework like Bootstrap?
A. Speeds up the development process by providing pre-designed components
B. Allows for the creation of complex animations easily
C. Automatically optimizes CSS for performance
D. Enhances the security of web applications
Q.135 How can you troubleshoot a calc() expression that doesn’t apply the expected result?
A. Check for syntax errors in the expression
B. Ensure all values are of compatible types (e.g., all lengths)
C. Verify that no spaces are missing around operators
D. All of the above
Q.136 Why might changes to a CSS variable not be reflected in the styles of a page?
A. The variable is not correctly defined within the scope
B. The browser does not support CSS variables
C. The variable is overridden by another style
D. Both A and C are correct
Q.137 How can you use the calc() function to create a width that is 50% of its container minus 30px?
A. width: calc(50% – 30px);
B. width: calc(50% – 30);
C. width: 50% – 30px;
D. width: calc(50 – 30px);
Q.138 How do you define a CSS variable named –main-color on the :root selector?
A. :root { –main-color: #333; }
B. :root { main-color: #333; }
C. root { var(–main-color: #333); }
D. :root { $main-color: #333; }
Q.139 What is a primary benefit of using CSS variables in web design?
A. Simplifying theme customization
B. Facilitating responsive design
C. Improving maintainability
D. Enhancing animation control
Q.140 How do CSS functions like calc(), var(), and attr() enhance CSS capabilities?
A. By adding programming logic to CSS
B. By allowing dynamic calculations and access to element attributes
C. By enabling conditional styling
D. By extending CSS with JavaScript
Q.141 What is the primary use of CSS custom properties (variables)?
A. To store values that can be reused throughout the document
B. To create complex animations
C. To define new CSS properties
D. To enhance browser compatibility
Q.142 What is required for the :hover pseudo−class to work on a link (<a> tag)?
A. Ensure the element has a closing tag
B. Set the content property to something other than none
C. Verify that the display property is not set to none
D. Both B and C are correct
Q.143 What is required for the :hover pseudo-class to work on a link ( tag)?
A. An href attribute
B. A specific class or ID
C. JavaScript event listeners
D. CSS animations attached
Q.144 How do you create a custom bullet point for list items using CSS?
A. li::before { content: ‘• ‘; }
B. ul li:bullet { content: ‘→ ‘; }
C. li:marker { content: ‘→ ‘; }
D. ul::marker { content: ‘→ ‘; }
Q.145 How can you style every odd row of a table?
A. tr:nth-child(odd) { background-color: #eee; }
B. tr:odd { background-color: #eee; }
C. table tr:odd-child { background-color: #eee; }
D. tr:nth-odd { background-color: #eee; }
Q.146 How do you style the first line of a paragraph?
A. p:first-line { font-weight: bold; }
B. p::first-line { font-weight: bold; }
C. p:first-line:: { font-weight: bold; }
D. p:line:first { font-weight: bold; }
Q.147 What is the difference between pseudo-classes and pseudo-elements?
A. Pseudo-classes target states or conditions, while pseudo-elements target specific parts of an element
B. Pseudo-classes can be combined, but pseudo-elements cannot
C. Pseudo-elements are used for layout, while pseudo-classes are used for styling
D. Pseudo-classes apply to all elements, while pseudo-elements only apply to container elements
Q.148 How do you select an input element when it has focus?
A. input:focus
B. input:active
C. input:hover
D. input:focus-within
Q.149 What does the :nth-child() pseudo-class do?
A. Selects elements based on their sequence number in a group of siblings
B. Changes the style of every nth-child in a list
C. Applies styles to children of a specific parent
D. All of the above
Q.150 Which pseudo-class targets the first child element within a parent?
A. :first-of-type
B. :first-child
C. :nth-child(1)
D. :first
