A developer wants an element's declared width and height to include its padding and border, but not its margin. Which CSS property and value should be applied to achieve this behavior?
box-sizing: content-box;
box-sizing: border-box;
✓
box-sizing: padding-box;
box-sizing: margin-box;
Correct Answer
box-sizing: border-box;
The box-sizing: border-box property ensures that an element's width and height properties include the content, padding, and border, but not the margin. The option box-sizing: content-box is the default, where width and height only refer to the content area. Options like padding-box and margin-box are not standard or valid values for the box-sizing property in CSS.
Question 2
Consider the following CSS rules applied to an HTML element <div id="main" class="container">Hello</div>. Which CSS rule will ultimately determine the text color of this div?
div.container { color: blue; }
div { color: green; }
.container { color: purple; }
#main { color: red; }
✓
Correct Answer
#main { color: red; }
Specificity determines which CSS rule is applied when multiple rules target the same element and property. An ID selector, like #main, has the highest specificity among the given options (1,0,0). A class selector, like .container, has a specificity of (0,1,0). A tag selector, like div, has a specificity of (0,0,1). The combined selector div.container has a specificity of (0,1,1). Therefore, the rule targeting #main will override the others because of its higher specificity.
Question 3
A flex container has a flex-direction of row. The developer wants to distribute the flex items evenly along the main axis, with equal space between them and no space at the ends. Which justify-content value should be used?
justify-content: space-between;
✓
justify-content: flex-start;
justify-content: center;
justify-content: space-around;
Correct Answer
justify-content: space-between;
The justify-content: space-between property value distributes items evenly along the main axis, placing the first item at the start and the last item at the end, with equal space between them. The space-around value would place equal space around each item, meaning there would be half as much space at the ends as between items. The flex-start value would align items to the beginning of the main axis, and center would align them to the middle.
Question 4
A designer wants to create a page layout with a header, a main content area, and a sidebar. The header should span all columns, the main content should take up two-thirds of the width, and the sidebar one-third. All rows should be auto-sized. Which CSS Grid properties are most appropriate for the container?
display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: auto auto;
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto;
display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto auto;
✓
Correct Answer
display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto auto;
To achieve the desired layout using CSS Grid, the container needs display: grid. The main content taking two-thirds and the sidebar one-third suggests two columns with a 2:1 ratio, which is represented by grid-template-columns: 2fr 1fr. The header spanning all columns would be handled by a grid item's grid-column property, but the container setup itself needs to define the columns. The grid-template-rows: auto auto is suitable for auto-sized rows for the header and then the main/sidebar row. The option grid-template-columns: 1fr 2fr would reverse the main content and sidebar widths. The option repeat(3, 1fr) would create three equal columns, not the 2:1 ratio. Using display: flex would not be the most appropriate way to define a fixed two-column layout with a spanning header, as flexbox is primarily for one-dimensional layouts.
Question 5
A web page needs to apply a different background color when the viewport width is 768 pixels or wider. Which media query correctly targets this condition?
@media screen and (min-width: 768px) { }
✓
@media screen and (width: 768px) { }
@media screen and (max-width: 767px) { }
@media (orientation: landscape) { }
Correct Answer
@media screen and (min-width: 768px) { }
To apply styles for viewports 768 pixels or wider, the min-width media feature should be used. @media screen and (min-width: 768px) correctly targets this condition. The max-width: 767px query would apply styles only up to 767 pixels. The width: 768px query would only apply styles when the width is exactly 768 pixels. The (orientation: landscape) query targets the device orientation, not its width.
Question 6
A list of navigation links needs to change its text color when a user hovers over any of the list items. Assuming the list items are li elements within a ul, which CSS selector should be used?
ul li:active { color: blue; }
ul li:focus { color: blue; }
ul li:hover { color: blue; }
✓
ul li::after { color: blue; }
Correct Answer
ul li:hover { color: blue; }
The :hover pseudo-class applies styles when the user's mouse pointer is over an element. This is the correct choice for changing text color on hover. The :active pseudo-class applies styles when an element is being activated (e.g., clicked). The :focus pseudo-class applies styles when an element has received focus (e.g., via keyboard navigation). The ::after pseudo-element inserts content after an element's content, not for hover effects.
Question 7
Two block-level div elements are stacked vertically. The first div has a bottom-margin of 20px, and the second div has a top-margin of 30px. What will be the vertical space between these two divs due to margin collapsing?
0px
30px
✓
50px
20px
Correct Answer
30px
When vertical margins of two adjacent block-level elements collapse, the space between them is determined by the larger of the two margins. In this case, the bottom margin of 20px and the top margin of 30px will collapse, resulting in a 30px vertical space between the divs. The sum of the margins, 50px, would only apply if margin collapsing did not occur. The smaller margin of 20px is ignored in the collapse. A 0px margin would indicate no spacing, which is incorrect.
Question 8
A flex container contains three flex items. The first item has flex-grow: 1, the second has flex-grow: 2, and the third has flex-grow: 1. If there is 100px of available space in the container after accounting for the items' initial sizes, how much of that space will the second item consume?
50px
✓
100px
20px
25px
Correct Answer
50px
The flex-grow property determines how much available space inside the flex container an item should take up. The total flex-grow factor is 1 + 2 + 1 = 4. The second item has a flex-grow of 2, meaning it will take up 2/4 (or 1/2) of the available space. Therefore, 1/2 of 100px is 50px. If the second item consumed 25px, it would imply a total flex-grow of 8 or a different distribution. If it consumed 100px, it would mean it took all the space, which is not the case. 20px would imply a total flex-grow of 5.
Question 9
A CSS Grid layout defines named grid areas. An item needs to occupy the area named "sidebar". Which CSS property and value should be applied to this grid item?
grid-column: sidebar;
grid-area: sidebar;
✓
grid-row: sidebar;
grid-template-areas: sidebar;
Correct Answer
grid-area: sidebar;
The grid-area property is used on a grid item to assign it to a named grid area defined on the grid container using grid-template-areas. The grid-column and grid-row properties are used to place items by line numbers or span, not by named areas directly. The grid-template-areas property is used on the container to define the named areas themselves, not on the item to occupy an area.
Question 10
A web page designed for mobile devices appears zoomed out and difficult to read on smartphones. Which HTML meta tag should be added to the document's head to ensure the page scales correctly to the device's width?
The viewport meta tag with content="width=device-width, initial-scale=1.0" is essential for responsive web design. It instructs the browser to set the viewport width to the device's actual width and to set the initial zoom level to 1, preventing the page from appearing zoomed out. Setting width=1024px would force a fixed width, defeating responsive behavior. maximum-scale=1.0 alone might prevent zooming but doesn't handle the initial scaling or width correctly. The description meta tag is for search engine optimization, not viewport control.
Question 11
Given the following CSS rules, which declaration will be applied to an element with id="title" and class="header"? div#title.header { color: red; } .header { color: blue !important; } #title { color: green; }
color: red;
The color will depend on the order of the rules in the stylesheet.
color: green;
color: blue;
✓
Correct Answer
color: blue;
The !important flag overrides all other specificity rules, including ID selectors and combined selectors, as long as it is not overridden by another !important declaration with higher specificity or later in the stylesheet. In this scenario, color: blue !important will always win because it has the !important flag. Without !important, the div#title.header rule would have the highest specificity (1,1,1) compared to #title (1,0,0) and .header (0,1,0).
Question 12
A developer needs to style all input elements that have a type attribute set to "text". Which CSS selector should be used?
input[type="text"] { }
✓
input.type-text { }
input[type~="text"] { }
input#type-text { }
Correct Answer
input[type="text"] { }
The attribute selector input[type="text"] precisely targets input elements where the type attribute's value is exactly "text". The selector input.type-text would target an input with a class name of "type-text". The selector input#type-text would target an input with an ID of "type-text". The selector input[type~="text"] would target input elements where the type attribute contains a space-separated list of words, one of which is "text", which is not what is needed for an exact match.
Question 13
A flex container with flex-direction: row contains several items of varying heights. To vertically center all these items within the container's cross-axis, which property should be applied to the flex container?
flex-flow: row center;
align-items: center;
✓
justify-content: center;
align-content: center;
Correct Answer
align-items: center;
The align-items property on the flex container controls how flex items are aligned along the cross-axis. Setting align-items: center will vertically center the items when flex-direction is row. justify-content: center aligns items along the main axis (horizontally in this case). align-content: center is used when there are multiple lines of flex items (i.e., when flex-wrap is wrap) to align the lines themselves, not individual items. flex-flow is a shorthand for flex-direction and flex-wrap, and "center" is not a valid value for flex-wrap.
Question 14
If a CSS Grid container has grid-template-columns: 1fr 1fr; and no grid-template-rows defined, but contains five grid items, how will the fifth item be placed?
It will create an implicit third row and be placed in its first column.
✓
It will be placed in the third row, spanning the first column implicitly.
It will be placed in the third row, spanning the second column implicitly.
It will create an implicit third column and be placed there.
Correct Answer
It will create an implicit third row and be placed in its first column.
When grid items exceed the explicitly defined grid tracks, CSS Grid automatically creates implicit grid tracks to accommodate them. Since grid-template-columns defines two columns, the first two items go into the first row, items three and four go into the second row, and the fifth item will start a new, implicit third row and be placed in its first column. It will not create an implicit third column, nor will it automatically span columns unless explicitly told to.
Question 15
When adopting a mobile-first approach to responsive design, what is the recommended practice for applying styles with media queries?
Apply mobile styles first, then use min-width media queries for larger screens.
✓
Apply desktop styles first, then use max-width media queries for smaller screens.
Apply tablet styles first, then min-width for desktop and max-width for mobile.
Define all styles outside media queries and let the browser adjust.
Correct Answer
Apply mobile styles first, then use min-width media queries for larger screens.
A mobile-first approach begins by styling for the smallest screen sizes without media queries. Then, min-width media queries are used to progressively add or override styles for larger viewports (e.g., tablets, desktops). Applying desktop styles first and using max-width queries is a desktop-first approach. Starting with tablet styles or defining all styles outside media queries does not align with the mobile-first strategy.
Question 16
To style all paragraph elements that immediately follow a heading (h2) element, which CSS selector should be used?
h2 > p { }
h2 ~ p { }
h2 + p { }
✓
h2 p { }
Correct Answer
h2 + p { }
The adjacent sibling combinator (h2 + p) selects an element that is immediately preceded by a specified sibling element. In this case, it selects a paragraph element immediately following an h2. The general sibling combinator (h2 ~ p) would select all sibling paragraph elements that follow an h2, not just the immediate one. The child combinator (h2 > p) would select paragraph elements that are direct children of an h2, which is semantically incorrect for typical heading/paragraph structure. The descendant combinator (h2 p) would select any paragraph element that is a descendant of an h2, regardless of its directness or sibling relationship.
Question 17
A designer wants to increase the internal space between an element's content and its border. Which CSS property should be adjusted?
outline
border-width
padding
✓
margin
Correct Answer
padding
Padding creates space between an element's content and its border, increasing the internal space. Margin creates space outside an element's border, separating it from other elements. Border-width adjusts the thickness of the border itself, not the space between content and border. Outline is drawn outside the border and does not affect the layout or internal spacing of the element.
Question 18
A flex container needs to display its items on multiple lines if they don't all fit on a single line. Which CSS property and value should be applied to the container?
align-items: stretch;
overflow: auto;
flex-direction: column;
flex-wrap: wrap;
✓
Correct Answer
flex-wrap: wrap;
The flex-wrap: wrap property allows flex items to wrap onto multiple lines when there isn't enough space on a single line. By default, flex-wrap is nowrap, which keeps all items on one line, potentially causing overflow. flex-direction: column changes the main axis to vertical, but doesn't inherently cause wrapping. align-items: stretch controls how items stretch along the cross-axis. overflow: auto handles content that overflows its container, but it's not the primary mechanism for wrapping flex items.
Question 19
To create a consistent 10px space between both rows and columns in a CSS Grid layout, which property should be used on the grid container?
row-gap: 10px;
grid-gap: 10px;
✓
column-gap: 10px;
margin: 10px;
Correct Answer
grid-gap: 10px;
The grid-gap property (or its modern equivalent gap) is a shorthand for row-gap and column-gap, allowing you to set the spacing between grid tracks for both rows and columns with a single declaration. Using column-gap: 10px would only apply space between columns. Using row-gap: 10px would only apply space between rows. Applying margin: 10px to the container would add space around the entire grid, not between its internal tracks.
Question 20
A developer wants an image to scale down proportionally to fit its parent container without exceeding its original size. Which CSS rule is most effective for this?
img { object-fit: cover; }
img { width: 100vw; height: auto; }
img { max-width: 100%; height: auto; }
✓
img { width: 100%; height: auto; }
Correct Answer
img { max-width: 100%; height: auto; }
Setting max-width: 100% on an image ensures it will scale down to fit its container if the container is smaller than the image's intrinsic width, but it will not scale up beyond its original size if the container is larger. height: auto maintains the aspect ratio. Using width: 100% would force the image to always take up 100% of its parent's width, potentially scaling it up beyond its natural size. width: 100vw would make the image 100% of the viewport width, which is often too large and not relative to its parent. object-fit: cover controls how the content of a replaced element (like img) should be resized to fit its container, but it doesn't prevent scaling up beyond its original size and might crop the image.
Question 21
An HTML element has an inline style of style="color: blue;". It is also targeted by a CSS rule #myElement { color: red; }. Which color will the element display?
Neither, as there is a conflict and the browser will default.
The color will depend on the order of the rules in the stylesheet.
Red, because ID selectors have high specificity.
Blue, because inline styles have the highest specificity.
✓
Correct Answer
Blue, because inline styles have the highest specificity.
Inline styles applied directly to an HTML element using the style attribute have the highest specificity level, overriding all other CSS rules (except those with !important) regardless of their selector type or order in the stylesheet. Therefore, the element will display blue. An ID selector, while having high specificity, is still overridden by an inline style. The order of rules is relevant only when specificity is equal.
Question 22
A flex item inside a flex container has flex-basis: 150px; flex-grow: 0; flex-shrink: 1;. If the container has enough space, what will be the initial size of this item along the main axis before any growing or shrinking occurs?
It will be 100% of the container's width.
It will be 150px wide.
✓
It will expand to fill all available space.
It will shrink to fit its content.
Correct Answer
It will be 150px wide.
The flex-basis property defines the initial main size of a flex item before any available space is distributed. With flex-basis: 150px, the item will initially be 150px wide along the main axis. flex-grow: 0 prevents it from growing to fill available space, and flex-shrink: 1 allows it to shrink if needed, but the initial size is set by flex-basis. It will not shrink to fit its content unless flex-basis is auto and content size is smaller. It will not expand to fill available space because flex-grow is 0. It will not be 100% of the container's width unless flex-basis is 100% or flex-grow is set to allow it.