An ID selector (e.g., #myId) always has higher specificity than a class selector (e.g., .myClass) applied to the same element.
Correct Answer
True
ID selectors contribute 100 to specificity, while class selectors contribute 10. Therefore, an ID selector always overrides a class selector when both target the same element.
Question 2
By default, the width and height properties in CSS include the padding and border of an element.
Correct Answer
False
By default, using box-sizing: content-box, the width and height properties apply only to the content area. Padding and border are added outside of this specified width and height.
Question 3
Setting the flex-direction property to column will make the main axis run vertically.
Correct Answer
True
The flex-direction property determines the direction of the main axis. When set to column, the main axis runs from top to bottom.
Question 4
CSS Grid is primarily a one-dimensional layout system, arranging items either in rows or in columns but not both simultaneously.
Correct Answer
False
CSS Grid is a two-dimensional layout system, capable of arranging items simultaneously in both rows and columns, unlike Flexbox which is primarily one-dimensional.
Question 5
Media queries in CSS can be used to apply different styles based on the viewport width or height.
Correct Answer
True
Media queries allow developers to apply styles conditionally based on various device characteristics, including the width and height of the viewport.
Question 6
The universal selector (*) has the highest specificity among all CSS selectors.
Correct Answer
False
The universal selector (*) has a specificity of 0. Inline styles, ID selectors, and class selectors all have higher specificity.
Question 7
Applying box-sizing: border-box to an element causes its padding and border to be included within its specified width and height.
Correct Answer
True
With box-sizing: border-box, the specified width and height of an element encompass its content, padding, and border. The margin is still external.
Question 8
In a flex container, align-items controls the alignment of flex items along the main axis.
Correct Answer
False
align-items controls the alignment of flex items along the cross axis. justify-content controls alignment along the main axis.
Question 9
The grid-gap property, or its modern equivalent gap, creates spacing between grid cells but not outside the grid container itself.
Correct Answer
True
The gap property (formerly grid-gap) adds space between grid tracks (rows and columns) within the grid container, but does not add space between the grid container and its parent or siblings.
Question 10
Inline styles, written directly in the HTML style attribute, have lower specificity than any external stylesheet rule.
Correct Answer
False
Inline styles have the highest specificity (1000) among all CSS declaration types, overriding rules from external stylesheets, internal style blocks, and ID selectors, unless !important is used.
Question 11
A common practice in responsive web design is to use relative units like percentages, em, or rem for sizes and spacing.
Correct Answer
True
Relative units adapt better to different screen sizes and resolutions compared to fixed units like pixels, making them ideal for responsive layouts.
Question 12
The :hover pseudo-class applies styles to an element only when the user's mouse pointer is over it.
Correct Answer
True
The :hover pseudo-class is used to define styles that apply specifically when an element is in the hovered state.
Question 13
Negative margin values are not permitted in CSS and will be ignored by browsers.
Correct Answer
False
Negative margin values are permitted in CSS and can be used to pull elements closer together or overlap them.
Question 14
The flex-wrap property allows flex items to wrap onto multiple lines within a flex container if there isn't enough space on a single line.
Correct Answer
True
When flex-wrap is set to wrap, flex items will move to the next line when they run out of space on the current line, rather than shrinking.
Question 15
The grid-template-columns property only accepts fixed pixel values for defining column widths.
Correct Answer
False
grid-template-columns can accept various units, including percentages, em, rem, fr (fractional units), and auto, in addition to fixed pixel values.
Question 16
When two CSS rules have the exact same specificity and target the same element and property, the rule declared later in the stylesheet takes precedence.
Correct Answer
True
In cases of equal specificity, the cascade rule dictates that the last declared rule among them will be applied.
Question 17
Responsive design relies solely on JavaScript to detect screen sizes and apply appropriate styles.
Correct Answer
False
Responsive design primarily relies on CSS media queries to apply styles based on screen characteristics. While JavaScript can be used for more complex adaptations, it is not the sole or primary mechanism.
Question 18
The child combinator (>) selects elements that are direct children of a specified parent element.
Correct Answer
True
For example, div > p would select all p elements that are direct children of a div, but not p elements nested further inside.
Question 19
The margin property is included in an element's calculated width and height when using box-sizing: content-box.
Correct Answer
False
The margin property creates space outside the element's border and is never included in the element's actual width and height calculation, regardless of the box-sizing property. Width and height apply only to content, padding, and border.
Question 20
Flex items will always shrink to prevent content from overflowing their flex container, regardless of their intrinsic size.
Correct Answer
False
While flex items have a default flex-shrink value of 1, they will not always shrink enough to prevent content overflow, especially if their intrinsic content is very large and min-width is not explicitly set to 0 on the item.
Question 21
CSS Grid allows for explicit placement of grid items into specific grid cells using properties like grid-column-start and grid-row-start.
Correct Answer
True
Grid items can be precisely positioned within the grid structure by specifying the start and end lines for their columns and rows.
Question 22
A 'mobile-first' approach to responsive design means designing the desktop layout first and then adjusting it for smaller screens.
Correct Answer
False
A 'mobile-first' approach means designing and styling for the smallest screens (mobile devices) first, and then progressively enhancing the layout and styles for larger screens using media queries.