--- title: "CSS Fundamentals: Selectors, Box Model & Styling" description: "Master CSS fundamentals: selectors, box model, properties, layout basics, and styling techniques. Build the foundation for web design and responsive layouts." author: "Mohammad Abu Mattar" canonical: https://mkabumattar.com/quizzes/post/css-fundamentals-quiz --- # CSS Fundamentals: Selectors, Box Model & Styling Welcome to the CSS Fundamentals quiz! This quiz will test your knowledge of CSS basics, including selectors, the box model, properties, and layout techniques. Each question reinforces one concept so you build a solid foundation in CSS. Good luck! ## Questions ### 1. What does CSS stand for? - Cascading Style Sheets - Creative Styling Syntax - Content Style System - Computer System Setup **Hint:** Think about how styles are applied to web pages. ### 2. What is the purpose of the CSS box model? - To calculate the space taken by margin, border, padding, and content - To define the hierarchy of parent and child elements within the DOM - To organize text content into semantic sections like header and main - To validate that the CSS syntax follows the correct industrial standards **Hint:** Think about how space around elements is managed. ### 3. What is a CSS selector? - A pattern used to identify the HTML elements that styles apply to - A tool used to compress and optimize CSS files for faster loading - A built-in browser feature used for selecting text with a cursor - A validation method for ensuring that CSS properties are supported **Hint:** Think about targeting elements to style. ### 4. What is the functional difference between margin and padding? - Padding creates space inside the border; margin creates space outside - Margin sets the thickness of the border; padding sets the font size - Padding only applies to text; margin only applies to image containers - Margin controls the vertical flow; padding controls the horizontal flow **Hint:** Think about space inside vs. outside an element. ### 5. In the CSS box model, what is the "content" area? - The innermost area where the actual text or images are displayed - The outermost area that separates the element from its neighbors - The colored boundary line that surrounds the padding of an element - The transparent area that provides space between content and border **Hint:** Think about the innermost part of the box model. ### 6. What is a class selector in CSS, and how is it written? - A selector starting with a dot (.) targeting a class attribute - A selector starting with a hash (#) targeting a specific identifier - A selector targeting elements by their direct HTML tag name - A selector used only for styling elements inside a script tag **Hint:** Think about the dot notation used in CSS. ### 7. What is an ID selector in CSS, and how is it written? - A selector starting with a hash (#) targeting a unique element - A selector starting with a colon (:) targeting a special state - A selector using angle brackets (< >) to target hidden elements - A selector used to identify the version of the CSS specification **Hint:** Think about unique identifiers for elements. ### 8. What does "specificity" mean in CSS? - A weight system that determines which CSS rule takes precedence - A measurement of how much time it takes for a style to be applied - The total number of CSS properties defined within a single file - The degree of accuracy used when defining colors with hex codes **Hint:** Think about CSS rules conflicting and which one wins. ### 9. What is the universal selector in CSS? - The asterisk (*) symbol used to apply styles to every element - The body tag used to set the background color of the whole page - A specialized keyword that overrides all other specific styles - The root (html) selector used to define global CSS variables **Hint:** Think about targeting all elements at once. ### 10. What is the color property used for in CSS? - To set the foreground color (text color) of an element - To set the background color of a container or page - To change the filter and saturation of an image file - To define the color of the border surrounding a box **Hint:** Think about text appearance on the page. ### 11. What is the background-color property in CSS? - A property that sets the color behind the content of an element - A property used to set the color of text within an element - A property that applies a color filter to a background image - A property that defines the color of the browser scrollbar **Hint:** Think about the color behind text or elements. ### 12. What is the font-size property used for in CSS? - To determine the height and scale of text within an element - To set the thickness or boldness of the text characters - To define the spacing between individual letters in a word - To adjust the physical width and height of an image tag **Hint:** Think about how big text appears. ### 13. What are common units used in CSS? - px (pixels), em (font-relative), rem (root-relative), and % - dpi (dots), bit (binary), fr (frames), and khz (hertz) - pt (points), pc (picas), in (inches), and ft (feet) - ms (milli), s (seconds), deg (degrees), and rad (radians) **Hint:** Think about how measurements are expressed. ### 14. What is the display property in CSS? - A property that defines how an element is rendered in the layout - A property used to set the opacity and transparency of an element - A property that determines the resolution of images in the browser - A property used to set the alignment of text within a block **Hint:** Think about how elements are laid out (block vs. inline). ### 15. What does display: block do? - Forces an element to take the full width and start on a new line - Places an element on the same line as its neighboring elements - Completely removes an element from the page and the DOM - Centers an element horizontally within its containing parent **Hint:** Think about elements taking full width. ### 16. What does display: inline do? - Allows an element to flow with text without creating a new line - Forces an element to follow the width and height of its parent - Prevents any other elements from appearing on the same line - Automatically hides an element when the screen size is reduced **Hint:** Think about elements flowing with text. ### 17. What does display: inline-block do? - Allows elements to sit side-by-side while respecting width and height - Forces an element to be invisible while still occupying space - Converts an element into a flex container with row orientation - Stretches an element to be exactly half the width of its parent **Hint:** Think about combining inline and block behavior. ### 18. What is the purpose of the padding property in CSS? - To create space between the element content and its border - To define the thickness of the line surrounding the element - To set the distance between the borders of two adjacent boxes - To align the text content to the center of the available space **Hint:** Think about space inside an element, around content. ### 19. What is the border property used for in CSS? - To add a decorative or structural line around an element - To create a shadow effect that glows around the element - To ensure that text does not overflow out of its container - To set the transparency level of the background color **Hint:** Think about the outline around an element. ### 20. What is the text-align property used for? - To control the horizontal alignment of text within a block - To control the vertical positioning of text inside a table cell - To change the spacing between lines of text in a paragraph - To transform text into all uppercase or all lowercase letters **Hint:** Think about positioning text horizontally. ### 21. What does the float property do in CSS? - Pushes an element to one side and allows text to wrap around it - Causes an element to stay fixed at the top of the browser window - Allows an element to be dragged and moved around by the user - Creates a 3D effect where the element appears to hover over others **Hint:** Think about wrapping text around images. ### 22. What is a pseudo-class in CSS? - A keyword added to a selector that specifies a special state - A fake class used as a placeholder during the development phase - A method for selecting the parent of a currently targeted element - A class that is automatically generated by JavaScript libraries **Hint:** Think about special states like hover or focus. ### 23. What is a pseudo-element in CSS? - A keyword used to style specific parts of an element, like ::before - An element that is hidden from screen readers for accessibility - A custom HTML tag created by the developer using Web Components - A selector that targets elements based on their current visibility **Hint:** Think about adding content that isn't in HTML. ### 24. What is the difference between position: static and relative? - Static is the default; relative allows offsets without breaking flow - Static allows for z-index; relative ignores all stacking orders - Static removes elements from flow; relative keeps them in flow - Static is used for mobile; relative is used for desktop layouts **Hint:** Think about whether elements move from their normal position. ### 25. What does position: absolute do? - Positions an element relative to its nearest positioned ancestor - Pins an element to a fixed location on the screen while scrolling - Centers an element automatically within the center of the body - Forces an element to be at the very bottom of the stacking order **Hint:** Think about removing an element from normal flow. ### 26. What does z-index do in CSS? - Determines the stack level of elements along the vertical Z-axis - Changes the magnification level of the text and image content - Sets the width of an element based on the depth of the screen - Determines the transparency of the background color layer **Hint:** Think about layering elements on top/below each other. ### 27. What is flexbox in CSS? - A layout model designed for distributing space among items - A tool used for creating complex 3D animations and transitions - A framework for building mobile applications using only HTML - A method for compressing images to make websites load faster **Hint:** Think about flexible, responsive layouts. ### 28. What does justify-content do in flexbox? - Aligns items along the main axis (usually horizontally) - Aligns items along the cross axis (usually vertically) - Determines if flex items should wrap onto multiple new lines - Sets the specific width for every child element in the container **Hint:** Think about spacing items horizontally in a flex container. ### 29. What does align-items do in flexbox? - Aligns items along the cross axis (usually vertically) - Aligns items along the main axis (usually horizontally) - Controls the order in which items appear within the container - Sets the background color for all items within the flexbox **Hint:** Think about spacing items vertically in a flex container. ### 30. What is the difference between CSS reset and CSS normalize? - Reset clears all defaults; normalize makes them consistent - Reset is for mobile; normalize is used for desktop browsers - Reset speeds up the site; normalize adds extra security features - Reset only affects fonts; normalize affects the entire layout **Hint:** Think about removing default browser styles.