Test your knowledge of core CSS concepts, selectors, box model, positioning, and styling techniques with these 15 intermediate-level questions. Perfect for interview preparation and mastering essential CSS skills for web development.
Which of the following best describes the main purpose of CSS in web development?
Explanation: CSS is primarily used to control the styling, layout, and visual presentation of HTML elements on a web page. HTML controls structure, while interactivity is handled by JavaScript, and databases use different languages altogether. Choosing structural or data-oriented options is incorrect because CSS does not manage those aspects.
What is a key difference between internal and external CSS?
Explanation: Internal CSS is included within a u003Cstyleu003E block in the HTML u003Cheadu003E, while external CSS is written in a separate file and linked in the HTML. The options mentioning file extensions or inline styles are incorrect, and both internal and external CSS can use classes.
Given this CSS: .big { color: orange; }, what does the selector '.big' target?
Explanation: A dot (.) before a name in CSS refers to a class selector, targeting all elements with that class. An id selector uses a hash (#), and there is no 'big' HTML tag. The distractors confuse classes, IDs, and tag names.
In the CSS box model, which area surrounds the content and is directly inside the border?
Explanation: Padding provides space between the content and the border in the box model. Margin is outside the border, outline is an extra line outside the border (but not a box model layer), and shadow is a visual effect, not a box layer.
Which statement accurately distinguishes margin from padding in CSS?
Explanation: Margin is for spacing outside the border, while padding is for space inside the border, between the content and border. Option one confuses the two, and option two reverses their roles. Saying they're identical is incorrect.
By default, what is the value of the CSS 'position' property for HTML elements?
Explanation: The default 'position' of all HTML elements is 'static,' which means elements flow normally in the document. 'Fixed', 'relative', and 'absolute' must be explicitly set to alter positioning. Choosing any of the others would ignore this default behavior.
What does the CSS z-index property control?
Explanation: The z-index property determines the stacking order of elements with a position set other than static. It does not affect colors, alignment, or margins. Distractors refer to unrelated styling features.
Which CSS selector styles an element when a user hovers a mouse pointer over it?
Explanation: The :hover pseudo-class targets elements while the mouse is over them. :focus applies when an element is active (like in a form), :checked relates to checkboxes, and :visited refers to links already clicked.
Which CSS unit is always based on the root (html) element's font size?
Explanation: The 'rem' unit is relative to the root element's font size, while 'em' is relative to the parent element's font size. 'px' is an absolute unit, and '%' is relative to another length (often the parent element). Choosing any but 'rem' is inaccurate here.
How can you apply multiple CSS classes to a single HTML element?
Explanation: Multiple classes are added to the class attribute separated by spaces, as in class='one two'. Hyphens, commas, or dots are not valid methods for combining classes in HTML attributes.
Which of the following selector combinations has the highest specificity?
Explanation: ID selectors are more specific than class or element selectors, and the universal selector (*) has the lowest specificity. Using a class or element won't override an ID rule.
Which is the correct way to write a comment in CSS?
Explanation: CSS comments use /* ... */ syntax. Double slashes and hash symbols are for other languages, and HTML comments (u003C!-- --u003E) are not valid in CSS. Using any other format leads to parsing errors.
What is the key difference between 'display: none;' and 'visibility: hidden;' in CSS?
Explanation: With 'display: none,' the element is removed from the document flow and does not take up space. 'Visibility: hidden' makes the element invisible but reserves its space. The first and last choices are incorrect or too narrow, and they do not act identically.
Which CSS property manages how content is displayed when it overflows its container?
Explanation: The 'overflow' property specifies what happens if content overflows its container. 'Float' changes positioning, 'clear' affects floating elements, and 'align' is not a standard CSS property. Only 'overflow' directly solves content overflow issues.
Which selector targets all u003Cpu003E elements inside a u003Cdivu003E?
Explanation: The selector 'div p' selects all u003Cpu003E elements inside a u003Cdivu003E. 'div, p' would select all divs and all paragraphs separately, 'divu003Ep' only selects direct child paragraphs, and '#div.p' is attempting to select elements with both id 'div' and class 'p', which isn't relevant here.
How does 'max-width' differ from 'width' in CSS?
Explanation: 'width' determines the exact width of an element, while 'max-width' acts as an upper constraint and allows the element to shrink if needed. The other options confuse their behavior or are incorrect.