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.
Which CSS selector targets all elements with the class name 'highlight' in an HTML document?
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.
Which of the following represents a valid CSS hexadecimal color for red?
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.
Which CSS property would you use to change the font size of text in a paragraph?
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.
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?
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.
What part of the CSS box model comes immediately outside the border of an element?
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.