Quiz 2 Study Guide

Q1. How does :nth-of-type() differ from :nth-child()?

:nth-child(n) counts every child element in that parent, regardless of tag name, then checks if the element you selected is in position n. :nth-of-type(n) counts only siblings of the same tag name, then checks if the element is the nth one of that tag.

Example: If a parent has h2, p, p, p, then p:nth-child(2) matches the first p because the first p is literally the 2nd child. But p:nth-of-type(2) matches the second p because it is the 2nd p tag.

Q2. How does Bootstrap define its responsive breakpoints (e.g., sm, md, lg)?

Bootstrap breakpoints are minimum width thresholds, meaning "this size or larger." The grid classes apply starting at that breakpoint and continue upward unless overridden by a larger breakpoint class.

Q3. In a CSS rule, what comes immediately before the curly braces { }?

The selector, meaning what elements you are targeting, comes right before the braces.

Q4. In CSS, what is the difference between padding and margin?

Padding: Space inside the element, between the content and the border.
Margin: Space outside the element, between the border and other elements.

Q5. In which scenario would it be most appropriate to use an absolute unit like px in CSS?

Use px when you need a fixed, precise size that should not scale with text size or container size, like thin borders, hairline rules, icon alignment tweaks, or small shadows. For text sizing and layout spacing, relative units are usually better for responsiveness.

Q6. What does the following media query do? @media (min-width: 768px)

It applies the CSS inside the media query only when the viewport width is at least 768px. At widths below 768px, those rules do not apply.

Q7. What does the term "cascade" in CSS refer to?

It is how the browser decides which CSS rule wins when multiple rules match the same element, using priority based on specificity and source order.

Q8. What happens if two CSS rules have the same specificity?

The one that appears later in the stylesheet wins, because later source order overrides earlier when specificity is tied.

Q9. What happens if you forget the semicolon at the end of a CSS property declaration?

The browser will usually stop parsing correctly at that point in the rule. Often the next declaration breaks too, so you lose multiple properties, not just one.

Q10. What happens if you use a shorthand property AFTER setting its individual component property earlier in the same rule?

The shorthand will override the earlier component properties for any components it sets, because it is applied later in the same rule. Example: setting margin-left then later setting margin will override margin-left.

Q11. What happens when multiple media queries apply at the same time (e.g., min-width: 768px and min-width: 992px)?

All matching media queries apply, and conflicts are resolved like normal CSS, usually by specificity, then by later source order. If you have multiple min-width queries, larger screens can satisfy several at once.

Q12. What is a CSS framework?

A pre-built set of CSS classes, patterns, and sometimes components that gives you a consistent design system and layout tools so you do not start from zero. Bootstrap is a common example.

Q13. What is required for interactive Bootstrap components (such as dropdowns or modals) to function properly?

Bootstrap's JavaScript bundle is required for interactive components like dropdowns and modals, because CSS alone cannot handle that behavior.

Q14. What is the effect of setting an element's box-sizing: border-box property?

Width and height include padding and border, which makes sizing more predictable because the element does not grow beyond the specified width when you add padding or borders.

Q15. What is the main objective in making a web page responsive?

To make the layout and content usable across different screen sizes, especially small screens first, without forcing horizontal scrolling or tiny unreadable text.

Q16. What is the primary reason for writing CSS rules in a different file than the HTML?

Separation of concerns, easier maintenance, and reuse. It also keeps HTML cleaner and allows caching of the CSS file.

Q17. What is the purpose of specifying the viewport meta element in a page?

It tells mobile browsers how to set the page's viewport width and scaling so responsive CSS behaves as intended instead of rendering the page like a zoomed out desktop site.

Q18. What is the purpose of the :first-child pseudo-class?

It targets an element only if it is the first child of its parent.

Q19. What is the recommended way to organize media queries in a CSS stylesheet?

Use a mobile-first approach: write base styles first, then add min-width media queries in increasing order so larger screen overrides come later and are easier to reason about.

Q20. When including a CSS framework and your own stylesheet, which file should be linked last in the <head>?

Your own stylesheet should be linked last so you can override the framework defaults.

Q21. When using a Flexbox, what does the flex-grow property control?

How much an item expands to fill available extra space in the flex container, relative to other items' grow values.

Q22. When using Bootstrap, what is the effect does giving an element the class col-md-6?

At medium screens and larger, the element takes 6 of 12 columns, meaning about half width. Below the medium breakpoint, it falls back to the default stacking behavior unless you also specify smaller breakpoint classes.

Q23. When using Bootstrap, what is the purpose of including the btn class on an element?

It applies Bootstrap's base button styling so links, buttons, or inputs look and behave like buttons in the design system, then you add variants like btn-primary or btn-secondary.

Q24. When would it be appropriate to use the float property?

Mostly for wrapping text around an image or small element, like a figure aligned left or right inside a paragraph. For page layout, flexbox or grid is usually the correct modern choice.

Q25. Which CSS property removes an element from both the visible page flow and screen reader's perceived content?

display: none removes it from layout and accessibility tree, so it is not read by screen readers.

Q26. Which CSS unit is relative to the parent element's font size?

em is relative to the parent's font size.

Q27. Which of the following is most appropriate as a mobile-first design strategy?

Write the default CSS for the smallest screens first, then add min-width media queries to enhance the layout for larger screens.

Q28. Which of the following is the correct order of selectors to style a hyperlink so that properties are not overwritten?

Use the LVHA order: :link, :visited, :hover, :active. That prevents later states from being overridden unexpectedly.

Q29. Which of the following media query expressions would apply only when the screen is narrower than 600px?

Use a max-width query: @media (max-width: 600px) which applies up to 600px.

Q30. Which of the following properties is NOT inherited by default?

Many layout properties are not inherited. Common examples include margin, padding, and border. Inherited ones are usually text-related like color and font-family.

Q31. Which of the following scenarios is the most appropriate scenario to use a Flexbox?

When you want to lay items out in a row or column and control alignment, spacing, and distribution, like a navbar, a card row, or centering content both horizontally and vertically.

Q32. Which of the following selectors has the highest specificity?

In general: inline styles beat everything, then ID selectors, then class/attribute/pseudo-class selectors, then element selectors. That is the ranking you use to answer the multiple choice version.

Q33. Which of the following statements about CSS inheritance is correct?

Text and font-related properties often inherit, layout properties usually do not. Children inherit from parents unless you override or set an explicit value.

Q34. Which of the following statements is true about an element with the display: flex property?

It becomes a flex container, and its direct children become flex items that can be aligned and distributed using flexbox properties.

Q35. Which property controls the space between an element's content and its border?

padding

Q36. Which selector correctly targets every even-numbered <li> element in an ordered list (with counting starting at 1)?

li:nth-child(even) because counting starts at 1.

Q37. Which selector targets all <p> elements inside a <header>?

header p which is a descendant selector.

Q38. Which symbol is used to denote a grouping selector in CSS?

A comma. Example: h1, h2, h3 { ... } applies the same rules to all listed selectors.

Q39. Why is it discouraged to use id selectors for styling?

They are too specific, making overrides harder, and IDs should be unique, so the style is not reusable like a class.

Q40. Why should you use a minified version of a CSS framework file (e.g., bootstrap.min.css) when including it in a webpage?

It is smaller to download, so it loads faster in the browser.