HTML5 HTML5 Responsive Design and CSS Integration 2 — Questions and Answers
Question 1: Which CSS property is used to create multi-column layouts without floats or positioning, introduced alongside HTML5?
- display: flex (Correct answer)
- float: left
- display: inline-block
- position: relative
Correct answer: display: flex
CSS Flexbox (display: flex) provides a one-dimensional layout model that makes it easy to align and distribute space among items in a container.
Question 2: What is the purpose of the HTML5 <template> element?
- Holds client-side content that is not rendered but can be instantiated via JavaScript (Correct answer)
- Defines server-side templates
- Creates reusable CSS classes
- Defines a page layout structure
Correct answer: Holds client-side content that is not rendered but can be instantiated via JavaScript
The <template> element contains HTML that is not rendered when the page loads but can be cloned and inserted into the DOM by JavaScript.
Question 3: Which CSS unit, widely used in responsive HTML5 designs, is relative to the viewport width?
- vw (Correct answer)
- em
- rem
- px
Correct answer: vw
The vw unit equals 1% of the viewport width, making it inherently responsive as it scales with the browser window size.
Question 4: What does the HTML5 'contenteditable' attribute do when set to 'true'?
- Makes the element's content editable by the user (Correct answer)
- Enables spell-checking on the element
- Allows CSS editing via DevTools
- Enables inline style editing
Correct answer: Makes the element's content editable by the user
The contenteditable='true' attribute makes an element's content directly editable by the user in the browser, like a basic rich-text editor.
Question 5: Which CSS Grid property defines the number and size of columns in a grid container?
- grid-template-columns (Correct answer)
- grid-columns
- column-template
- grid-column-size
Correct answer: grid-template-columns
The grid-template-columns property defines the column track sizes of a CSS Grid layout using values like fr units, px, or repeat().
Question 6: What does the CSS 'calc()' function allow in HTML5/CSS3 styling?
- Performing math calculations mixing different CSS units (Correct answer)
- Calculating element dimensions server-side
- Computing JavaScript expressions in CSS
- Dynamically calculating media query breakpoints
Correct answer: Performing math calculations mixing different CSS units
The calc() function lets you perform arithmetic operations in CSS mixing different units, such as calc(100% - 20px) for flexible layouts.
HTML5 HTML5 Responsive Design and CSS Integration 2
Which CSS property is used to create multi-column layouts without floats or positioning, introduced alongside HTML5?