CSS Fundamentals Quiz: Styling Basics Explained — Questions & Answers

Explore foundational CSS concepts with this quiz covering selectors, properties, colors, measurement units, and the box model. Enhance your frontend development skills by understanding essential topics in Cascading Style Sheets.

This quiz contains 5 questions. Below is a complete reference of all questions, answer choices, and correct answers. You can use this section to review after taking the interactive quiz above.

1. Question 1: CSS Selectors

   Which CSS selector targets all elements with the class name 'highlight' in an HTML document?

   • .highlight
   • #highlight
   • highlight{}
   • $highlight
   Show correct answer

   Correct answer: .highlight

   Explanation: The correct selector to target all elements with a specific class, such as 'highlight', is '.highlight'. The '#' symbol is used for IDs, so '#highlight' would only select an element with the id 'highlight', not a class. The option 'highlight{}' is not a valid selector format. '$highlight' is not recognized in CSS for selecting classes or IDs.

2. Question 2: Color Values

   Which of the following represents a valid CSS hexadecimal color for red?

   • #FF0000
   • red()
   • rgb#255,0,0
   • 0xFF0000
   Show correct answer

   Correct answer: #FF0000

   Explanation: #FF0000 is the correct hexadecimal notation for the color red in CSS. 'red()' is not a valid color function or name. 'rgb#255,0,0' is incorrectly formatted; the proper syntax would be 'rgb(255,0,0)'. '0xFF0000' resembles programming language number notation and is not valid in CSS.

3. Question 3: CSS Properties

   Which CSS property would you use to change the font size of text in a paragraph?

   • font-size
   • text-weight
   • font-style
   • letter-space
   Show correct answer

   Correct answer: font-size

   Explanation: The 'font-size' property controls the size of text. 'text-weight' is not a valid CSS property and confuses with 'font-weight', which changes the thickness of the text. 'font-style' affects the slanting or style like italic but not the size. 'letter-space' is incorrect; the correct property is 'letter-spacing', which adjusts space between letters.

4. Question 4: Measurement Units

   If you want to set a div's width to always be half the width of its parent container, which CSS value would you use?

   • 50%
   • 50px
   • 0.5in
   • 50em
   Show correct answer

   Correct answer: 50%

   Explanation: Using '50%' sets the div's width to half of its parent, as percentages are relative to the container's size. '50px' sets a fixed pixel width, not related to the parent's width. '0.5in' uses inches as a unit and is not commonly used for layout. '50em' sets the width relative to the font size, not the parent width.

5. Question 5: Box Model

   What part of the CSS box model comes immediately outside the border of an element?

   • Margin
   • Padding
   • Content
   • Outline
   Show correct answer

   Correct answer: Margin

   Explanation: In the CSS box model, the margin is the area that directly surrounds the border of an element, providing space outside of the element itself. Padding is inside the border, between the content and the border. Content refers to the innermost area where text or images appear. Outline is a separate property that draws a line outside the border but is not a consistent part of the box model's spacing structure.