Website Design Foundation Website Design 4 — Questions and Answers
Question 1: What is the purpose of CSS specificity?
- To speed up CSS loading
- To determine which CSS rule applies when multiple rules target the same element (Correct answer)
- To organize CSS files into folders
- To validate CSS syntax
Correct answer: To determine which CSS rule applies when multiple rules target the same element
CSS specificity is a weight system that determines which conflicting CSS rule wins when multiple rules target the same element.
Question 2: Which HTML5 semantic element represents the main navigation links of a page?
- <menu>
- <header>
- <nav> (Correct answer)
- <section>
Correct answer: <nav>
The `<nav>` element semantically identifies a block of navigation links, helping both browsers and assistive technologies.
Question 3: What does a 'call-to-action' (CTA) button do in web design?
- Improves page load speed
- Prompts users to take a specific desired action (Correct answer)
- Adds decorative styling to pages
- Creates a popup telephone dialer
Correct answer: Prompts users to take a specific desired action
A CTA button is designed to guide users toward a specific action such as signing up, purchasing, or downloading.
Question 4: Which of the following best describes a serif font?
- A font with small decorative strokes at the ends of characters (Correct answer)
- A font used only for headings
- A monospace font for code
- A font without any decorative elements
Correct answer: A font with small decorative strokes at the ends of characters
Serif fonts have small decorative strokes (serifs) at the ends of letterform strokes, like Times New Roman.
Question 5: What is the function of the CSS `z-index` property?
- Controls element transparency
- Sets the zoom level of an element
- Determines stacking order of overlapping elements (Correct answer)
- Adjusts element size
Correct answer: Determines stacking order of overlapping elements
z-index controls the vertical stacking order of positioned elements, with higher values appearing in front of lower values.
Question 6: Which file format is best for icons and logos that need to scale to any size?
- JPEG
- GIF
- PNG
- SVG (Correct answer)
Correct answer: SVG
SVG (Scalable Vector Graphics) is resolution-independent, meaning it looks sharp at any size without pixelation.
Question 7: What does the CSS `display: flex` property enable?
- Makes text bold and flexible
- Creates a flexible single-axis layout container (Correct answer)
- Adds animation to elements
- Hides elements on mobile devices
Correct answer: Creates a flexible single-axis layout container
Flexbox creates a flexible container that aligns children along a main axis, making layout distribution easier.
Website Design Foundation Website Design 4
What is the purpose of CSS specificity?