CSS Units and Measurements, Exams of Computer Science

Download CSS Units and Measurements and more Exams Computer Science in PDF only on Docsity!

INTERMEDIATE HTML & CSS

CSS Units

KNOWLEDGE ASSESSMENT GUIDE

1. Which of the following CSS units is relative to the font size of the root element?
   • a) em
   • b) rem
   • c) vh
   • d) vw
   • Answer: b) rem
   • Rationale: The rem unit is relative to the font size of the root element, while em is relative to the font size of the element itself.
2. What does the vh unit represent in CSS?
   • a) Viewport width
   • b) Viewport height
   • c) Vertical height
   • d) Vertical width
   • Answer: b) Viewport height
   • Rationale: The vh unit represents 1% of the viewport height.
3. Which unit is best suited for responsive typography?
   • a) px
   • b) em
   • c) rem

Fill-in-the-Blank Questions

6. The vw unit in CSS stands for __________.
   • Answer: viewport width
   • Rationale: The vw unit represents 1% of the viewport width.
7. In CSS, the ex unit is relative to the height of the lowercase letter __________.
   • Answer: x
   • Rationale: The ex unit is relative to the height of the lowercase letter "x" in the current font.
8. The min() function in CSS can be used to set a value to the __________ of two or more values.
   • Answer: minimum
   • Rationale: The min() function returns the smallest value from the given arguments.
9. The max() function in CSS can be used to set a value to the __________ of two or more values.
   • Answer: maximum
   • Rationale: The max() function returns the largest value from the given arguments.

10. The calc() function in CSS allows you to perform __________ operations to determine CSS property values.
    • Answer: mathematical
    • Rationale: The calc() function can perform addition, subtraction, multiplication, and division.

True/False Questions

11. The em unit is always relative to the font size of the root element.
    • Answer: False
    • Rationale: The em unit is relative to the font size of the element itself, not the root element.
12. The rem unit is relative to the font size of the root element.
    • Answer: True
    • Rationale: The rem unit is relative to the font size of the root element.
13. The vh unit is relative to the viewport width.
    • Answer: False
    • Rationale: The vh unit is relative to the viewport height.

• c) vmin
• d) px
• Answer: d) px
• Rationale: The px unit is an absolute unit and not relative to the viewport.

18. The vmin unit in CSS is relative to the __________ of the viewport's height and width.

• a) maximum
• b) minimum
• c) average
• d) sum
• Answer: b) minimum
• Rationale: The vmin unit is relative to the smaller dimension of the viewport's height and width.

19. Which CSS unit is typically used for defining media query breakpoints?

• a) px
• b) em
• c) rem
• d) vh
• Answer: a) px

• Rationale: px units are commonly used for defining media query breakpoints due to their precision.

20. The vmax unit in CSS is relative to the __________ of the viewport's height and width.

• a) maximum
• b) minimum
• c) average
• d) sum
• Answer: a) maximum
• Rationale: The vmax unit is relative to the larger dimension of the viewport's height and width. Multiple Choice a. Which CSS unit is relative to the font size of the root element? A. em B. rem C. vw D. px Answer: B. rem Rationale: The rem unit is relative to the font-size of the root element, providing a more consistent and scalable approach to styling across the website.

Answer: B. vh Rationale: The vh unit is based on the viewport height, defining a length relative to the height of the browser window. Fill-in-the-Blank Fill in the blank: 1rem is equal to __ pixels. Answer: Varies Rationale: 1rem is equal to the font-size of the root element, which can vary depending on the browser's default font size settings. True/False True or False: The vmin unit in CSS is based on the smaller of the viewport's height or width. Answer: True Rationale: The vmin unit is based on the smaller of the viewport's height or width, allowing for flexible and responsive design decisions based on the smaller dimension. Multiple Choice a. Which unit is used to define a length relative to the width of the containing block?

A. vh B. em C. ch D. % Answer: C. ch Rationale: The ch unit is based on the width of the "0" (zero) character in the current font, providing a length relative to the width of the containing block. Fill-in-the-Blank Fill in the blank: The CSS unit __ represents a percentage of the font-size of the element. Answer: em Rationale: The em unit represents a length relative to the font-size of the element, allowing for scalable and flexible typography. True/False True or False: The CSS unit pt stands for "pixel text." Answer: False Rationale: The pt unit stands for points, a typographic unit commonly used in print design rather than pixels.

Answer: True Rationale: The cm unit represents centimeters, providing an absolute length measurement that is consistent across different media. Multiple Choice a. Which unit is used to define a length relative to the size of the viewport? A. em B. vw C. ex D. cm Answer: B. vw Rationale: The vw unit defines a length relative to the viewport width, allowing for responsive and adaptable layouts. Fill-in-the-Blank Fill in the blank: The CSS unit __ is based on the default font size of the browser. Answer: rem Rationale: The rem unit is based on the root element's font size, providing a consistent reference point for styling elements.

True/False True or False: The CSS unit mm stands for maximum margin, representing the largest possible margin size. Answer: False Rationale: The mm unit represents millimeters, a physical unit of measurement used for accurate and precise sizing in CSS. Multiple Choice a. Which unit is used to define a length relative to the size of the viewport, taking the smaller dimension into account? A. vmin B. rem C. ch D. pt Answer: A. vmin Rationale: The vmin unit considers the smaller dimension of the viewport (height or width), allowing for responsive design decisions based on the viewport size. Fill-in-the-Blank

Answer: B. vh Rationale: The vh unit is based on the viewport height, allowing for responsive and adaptable design decisions based on the height of the browser window. Fill-in-the-Blank Fill in the blank: The CSS unit __ is based on the x-height of the current font. Answer: ex Rationale: The ex unit is based on the x-height of the current font, providing a length reference relative to the font's lowercase characters.

1. Which CSS unit is relative to the font-size of the element?
   • A) px
   • B) em
   • C) vh
   • D) % Answer: B) em Rationale: The 'em' unit is relative to the font-size of the element it's applied to.
2. What does the "vmin" CSS unit represent?

• A) 1% of the viewport's smaller dimension
• B) 1% of the viewport's larger dimension
• C) viewport height divided by 100
• D) viewport width divided by 100 Answer: A) 1% of the viewport's smaller dimension Rationale: The 'vmin' unit is relative to the min value of either the viewport height or width.

3. For a responsive design, which unit is generally more preferable for defining font size?

• A) px
• B) cm
• C) em
• D) mm Answer: C) em Rationale: 'em' units are scalable and more suitable for responsive design compared to fixed units like 'px'.

4. Which of the following is not a viewport unit in CSS?

• A) vh
• B) vw
• C) fabs
• D) vmin

Rationale: 'rem' stands for "root em".

8. A __________ units relative to the width of the viewport are expressed as a percentage of the total viewport's width. Answer: vw Rationale: 'vw' stands for viewport width.
9. The CSS unit __________ is relative to the x-height of the current font. Answer: ex Rationale: 'ex' is relative to the x-height of the current font.
10. In CSS, a length unit that is relative to the containing block's initial containing block's font size is __________. Answer: rem Rationale: 'rem' is relative to the root element’s font size.

True/False Questions:

11. The 'cm' unit is commonly used for web design due to its resolution independence. Answer: False Rationale: Absolute units like 'cm' are rarely used in web design because they are not resolution independent.

12. The unit 'vw' is appropriate for setting margins or paddings in a responsive design. Answer: True Rationale: 'vw' is a responsive unit because it is based on the viewport's width.
13. The 'ch' unit is based on the width of the letter '0' in the current font. Answer: True Rationale: 'ch' is derived from the width of the '0' (zero) character of the font in use.
14. 1rem is always equal to 16px regardless of any CSS styling applied to the root element. Answer: False Rationale: 1rem equals the computed font size of the root element, which can change with CSS styling.
15. Percentage units (%) in CSS are always relative to the parent element’s dimensions. Answer: True Rationale: Percentage values are always calculated relative to another value, usually the parent element's dimensions.