(Intermediate HTML & CSS) CSS Properties Knowledge Assessment Guide 2024, Exams of Computer Science

Download (Intermediate HTML & CSS) CSS Properties Knowledge Assessment Guide 2024 and more Exams Computer Science in PDF only on Docsity!

INTERMEDIATE HTML & CSS

CSS Properties

KNOWLEDGE ASSESSMENT GUIDE

1. Multiple Choice: Which CSS property is used to set the spacing between the lines of text in an element? A) line-height B) letter-spacing C) word-spacing D) text-spacing Answer: A) line-height Rationale: The line-height property controls the spacing between lines of text within an element.
2. Fill-in-the-Blank: The CSS property __________ is used to add shadow effects to text. Answer: text-shadow Rationale: The text-shadow property is used to create shadow effects behind text.
3. True/False: The CSS property "flex-grow" is used to specify the ability of a flex item to grow relative to the other items in the flex container. Answer: True

Answer: True Rationale: The z-index property controls the stacking order of elements, determining which elements appear on top of others.

7. Multiple Choice: Which CSS property is used to create a transition effect on an element's width? A) transition-width B) transform C) transition D) width-transition Answer: C) transition Rationale: The transition property is used to create smooth transition effects on CSS property changes, including width.
8. Fill-in-the-Blank: The CSS property __________ is used to set the style of the border on the right side of an element. Answer: border-right-style Rationale: The border-right-style property is used to set the style of the right border of an element.
9. True/False: The CSS property "backface-visibility" is used to control whether or not an element is visible when it is facing away from the screen.

Answer: True Rationale: The backface-visibility property controls the visibility of an element when it is facing away from the screen, such as in 3D transformations.

10. Multiple Choice: Which CSS property is used to set the direction of the text within an element from right-to-left? A) text-direction B) direction C) text-align D) writing-mode Answer: B) direction Rationale: The direction property in CSS is used to set the direction of the text content within an element, including right-to-left.
11. Fill-in-the-Blank: The CSS property __________ is used to adjust the spacing between individual characters in a text. Answer: letter-spacing Rationale: The letter-spacing property in CSS is used to control the spacing between individual characters in text.

15. True/False: The CSS property "box-sizing" is used to control how the total width and height of an element is calculated. Answer: True Rationale: The box-sizing property allows you to control how the total width and height of an element are calculated, including options like border-box and content-box.
16. Multiple Choice: Which CSS property is used to adjust the boldness or thickness of the font within an element? A) font-bold B) font-weight C) font-thickness D) text-weight Answer: B) font-weight Rationale: The font-weight property in CSS is used to adjust the boldness or thickness of the font within an element.
17. Fill-in-the-Blank: The CSS property __________ is used to create a rotating effect on an element. Answer: transform: rotate()

Rationale: The transform property in CSS with the rotate() function is used to create a rotating effect on an element.

18. True/False: The "filter" property in CSS is used to apply visual effects such as blur or brightness to an element's content. Answer: True Rationale: The filter property allows you to apply visual effects like blur, brightness, and saturation to an element's content.
19. Multiple Choice: Which CSS property is used to adjust the thickness of the border around an element? A) border-weight B) border-thickness C) border-width D) border-size Answer: C) border-width Rationale: The border-width property in CSS is used to adjust the thickness of the border around an element.
20. Fill-in-the-Blank: The CSS property __________ is used to set the opacity level of an element.

Correct Answer: True

Rationale: The border-radius property is indeed used to round the corners of elements, providing a way to create visually appealing designs. Multiple Choice: Which CSS property is used to change the spacing between lines of text? A) line-height B) text-spacing C) letter-spacing D) text-align

Correct Answer: A) line-height

Rationale: The line-height property in CSS is employed to adjust the spacing between lines of text within an element. Fill-in-the-Blank: The display: flex; property in CSS is used to create a _ layout.

Correct Answer: flexible

Rationale: By using display: flex;, designers can create flexible and responsive layouts that adapt to different screen sizes and orientations. True/False: True or False: The box-shadow property in CSS is used to add shadows around the border of an element.

Correct Answer: True

Rationale: With the box-shadow property, designers can add shadows to elements, enhancing the visual depth and dimension of a webpage. Multiple Choice: Which CSS property is used to change the background color of an element? A) bg-color B) background-color C) color-background D) element-color

Correct Answer: B) background-color

Rationale: The background-color property is essential for altering the background color of elements, allowing for customization of the visual appearance of a webpage. Fill-in-the-Blank: The transition property in CSS is used to create _ effects when changing element properties.

Correct Answer: smooth transition

Rationale: By utilizing the transition property, designers can introduce smooth transitions when altering various element properties like color, size, or position. True/False:

• d) float
• Answer: a) z-index
• Rationale: The z-index property specifies the stack order of elements. Higher values are in front of lower values.

2. What does the flex-grow property do in a flex container?

• a) Defines the initial size of a flex item
• b) Specifies the ability of a flex item to grow if necessary
• c) Sets the order of flex items
• d) Aligns flex items along the main axis
• Answer: b) Specifies the ability of a flex item to grow if necessary
• Rationale: The flex-grow property determines how much a flex item will grow relative to the rest of the flex items.

3. Which of the following is not a valid value for the display property?

• a) block
• b) inline
• c) flex
• d) float
• Answer: d) float
• Rationale: float is a property on its own and not a valid value for the display property.

4. What is the purpose of the @keyframes rule in CSS?
   • a) To define a set of animations
   • b) To set the key points of an animation
   • c) To specify the duration of an animation
   • d) To control the timing function of an animation
   • Answer: b) To set the key points of an animation
   • Rationale: The @keyframes rule specifies the key points during the animation sequence.
5. Which CSS property is used to create a transition effect?
   • a) animation
   • b) transition
   • c) transform
   • d) filter
   • Answer: b) transition
   • Rationale: The transition property is used to create smooth transitions between different states of an element.

Fill-in-the-Blank Questions

6. The CSS property used to change the text color is __________.
   • Answer: color
   • Rationale: The color property sets the color of the text.

11. The float property can be used to align elements horizontally.
    • Answer: True
    • Rationale: The float property is used to align elements to the left or right, allowing text and inline elements to wrap around it.
12. The position: fixed property positions an element relative to its nearest positioned ancestor.
    • Answer: False
    • Rationale: The position: fixed property positions an element relative to the viewport, not its nearest positioned ancestor.
13. The opacity property can be used to make an element semi- transparent.
    • Answer: True
    • Rationale: The opacity property sets the transparency level of an element.
14. The transform property can be used to rotate, scale, and move elements.
    • Answer: True
    • Rationale: The transform property allows you to apply various transformations to an element, such as rotate, scale, and translate.
15. The :hover pseudo-class is used to define a style for an element when it is clicked.

• Answer: False
• Rationale: The :hover pseudo-class applies a style when the user hovers over an element, not when it is clicked.

Additional Multiple Choice Questions

16. Which property is used to specify the space between the border and the content of an element?

• a) margin
• b) padding
• c) border-spacing
• d) outline
• Answer: b) padding
• Rationale: The padding property sets the space between the border and the content of an element.

17. What does the box-sizing: border-box property do?

• a) Includes padding and border in the element's total width and height
• b) Excludes padding and border from the element's total width and height
• c) Sets the element's width and height to auto
• d) Applies a border to the element
• Answer: a) Includes padding and border in the element's total width and height

• b) visibility
• c) opacity
• d) overflow
• Answer: b) visibility
• Rationale: The visibility property specifies whether an element is visible or hidden.