CSS Programming Techniques Quiz

1. What is the purpose of the `* { box-sizing: border-box; }` rule?

• It modifies the font size of all elements to be the same.
• It sets the box model to include padding and border in the element`s width and height.
• It resets all CSS properties to their default values.
• It changes the display type of all elements to block.

2. What is the difference between `inline` and `inline-block` in CSS?

• `inline` elements can have margins, while `inline-block` elements cannot.
• `inline` elements do not occupy space, while `inline-block` elements do.
• `inline` elements have fixed height, while `inline-block` elements are flexible.
• `inline` elements are always centered, while `inline-block` elements are not.

3. How does a browser match a CSS selector in a DOM?

• Browsers match selectors only from left to right.
• Browsers match selectors from right to left in the DOM.
• Browsers ignore parent elements when matching selectors.
• Browsers match selectors based on the order they appear in the CSS.

4. What are the primary clearing techniques in CSS?

• clear: both
• display: block
• margin: auto
• width: 100%

5. Why are CSS sprites used in web development?

• To create animations without using JavaScript.
• To simplify CSS selectors and reduce coding complexity.
• To enhance the readability of HTML text by changing colors.
• To reduce the number of HTTP requests for multiple images by combining them into one larger image.

6. What techniques can be used for serving pages to feature-constrained browsers?

• CSS animations
• JavaScript libraries
• Progressive enhancement
• Inline styles

7. How do `resetting` and `normalizing` CSS differ?

• Resetting CSS only affects margins, while normalizing CSS affects colors.
• Resetting CSS removes all default styles, while normalizing CSS provides a consistent base style.
• Resetting CSS and normalizing CSS are exactly the same.
• Resetting CSS adds default styles, while normalizing CSS has no effect on styles.

8. What are some common pitfalls when writing efficient CSS?

• Utilize background images for all content.
• Always use inline styles for efficiency.
• Avoid using tag and universal selectors.
• Use IDs over classes for styling.

9. What does the `display` property control in CSS?

• It adjusts the size of an element`s font.
• It controls how an element is displayed in the layout.
• It adds spacing around an element.
• It changes the color of an element`s text.

10. How can you center align a div inside another div using CSS?

• Use `margin: auto` on the inner div and `display: flex` or `text-align: center` on the outer div.
• Set the inner div to `float: left` and the outer div to `position: absolute`.
• Apply `padding: auto` to both divs and use `display: inline` on the outer div.
• Use `background: center` on the outer div and `border: none` on the inner div.

11. What is the `z-index` property, and how does stacking context work in CSS?

• The `z-index` property adjusts the margin spacing of elements in a layout.
• The `z-index` property sets the stacking order of elements, determining which one appears in front.
• The `z-index` property controls the text color in CSS elements.
• The `z-index` property defines the font size for elements in CSS.

12. What are pseudo-elements, and how are they typically used?

• Pseudo-elements apply styles to child elements only.
• Pseudo-elements are used for animations only.
• Pseudo-elements create new HTML elements.
• Pseudo-elements style parts of an element.

13. How can CSS styles be manipulated using JavaScript?

• Use the `updateStyle` function to manage CSS properties dynamically.
• Use the `innerHTML` property to alter CSS styles within the element.
• Use the `style` property or `classList` API to manipulate CSS styles.
• Use the `setAttribute` method to change CSS styles directly.

14. What are the differences between `relative`, `fixed`, `absolute`, and `static` positioning in CSS?

• `Relative` positions elements in relation to their parent, `fixed` changes element size dynamically, `absolute` is used for responsive design, and `static` applies to floated elements.
• `Relative` applies styles with margins, `fixed` makes elements unresponsive, `absolute` is synonymous with static, and `static` means to use width only.
• `Relative` moves an element relative to its normal position, `fixed` anchors it to the viewport, `absolute` positions it within a nearest ancestor, and `static` is default.
• `Relative` sets an element to cover the whole viewport, `fixed` aligns it to its parent, `absolute` is used for overlapping items, and `static` is for non-positioned content.

15. How can you create a list without bullet points in HTML using CSS?

• Use `style=`list-type: none;“ in CSS
• Use `list-style: none;` in HTML
• Add `
  ` in HTML
  • Set `list-style-type: none;` in CSS

16. What is the CSS grid system, and how is it useful for layouts?

• The CSS grid system is a powerful layout system that allows for two-dimensional grid creation using rows and columns.
• The CSS grid system is a framework for creating three-dimensional layouts and animations.
• The CSS grid system only allows for single-column layouts and does not support rows.
• The CSS grid system is a method for styling text and font properties only.

17. How can retina graphics be effectively served in web development?

• Use low-resolution images for faster loading.
• Use high-resolution images and set the `srcset` attribute for better scaling.
• Serve images in a single low-quality format.
• Use only CSS to manipulate the resolution.

18. What are the pros and cons of using CSS preprocessors like SASS or LESS?

• They enhance the speed of pages but complicate deployment and integration processes.
• They serve only one styling approach and limit flexibility in design choices.
• Advantages include better organization and reusability of code, while disadvantages include additional complexity and the need for additional tools.
• They provide built-in animations while increasing overall file size and load times.

19. What approach should be taken to address browser-specific styling issues?

• Limit styles to only one browser for consistency.
• Use global styles to override browser defaults.
• Avoid using media queries for browser compatibility.
• Use vendor prefixes, inspect browser-specific styles, and test across different browsers.

20. How does responsive design differ from a mobile-first design strategy?

• Responsive design is about aesthetics, while mobile-first focuses on functionality.
• Responsive design only works on mobile devices, while mobile-first is for desktops.
• Responsive design adapts to screen sizes, while mobile-first design prioritizes mobile layout.
• Responsive design requires more coding than mobile-first strategies.

21. How can you visually hide content but still make it accessible to screen readers?

• Use `visibility: hidden` and `aria-hidden=`true“
• Use `display: none` and `aria-label=`hidden“
• Use `opacity: 0` and `aria-hide=`true“
• Use `position: absolute` and `aria-visible=`false“

22. What does the `:root` pseudo-class select in CSS?