---
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 is designed to reinforce key concepts and help you build a strong foundation in CSS. Good luck!

## Questions

### 1. What does CSS stand for?

- **Cascading Style Sheets** ✅
  - CSS (Cascading Style Sheets) is used to style and layout web pages. The "cascading" refers to how rules flow from general to specific.
- Creative Styling Syntax
  - While creative, this is not the official name of the specification.
- Content Style System
  - This is a plausible-sounding name, but it is not the correct acronym.
- Computer System Setup
  - This refers to hardware configuration rather than web styling.

**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** ✅
  - The box model controls how much space an element and its surroundings take up.
- To define the hierarchy of parent and child elements within the DOM
  - This describes the Document Object Model (DOM) tree structure, not the box model.
- To organize text content into semantic sections like header and main
  - This is the role of semantic HTML elements rather than the CSS box model.
- To validate that the CSS syntax follows the correct industrial standards
  - Syntax validation is handled by linters and browsers, not the box model mechanism.

**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** ✅
  - Selectors target elements such as classes, IDs, and tags to apply specific CSS rules.
- A tool used to compress and optimize CSS files for faster loading
  - Compression is handled by minifiers, not by CSS selectors themselves.
- A built-in browser feature used for selecting text with a cursor
  - While browsers allow text selection, a CSS selector is a code-level pattern.
- A validation method for ensuring that CSS properties are supported
  - Feature detection (like @supports) is used for browser compatibility checks.

**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** ✅
  - Padding is internal spacing; margin is external spacing used to push other elements away.
- Margin sets the thickness of the border; padding sets the font size
  - The border property sets thickness; font-size handles text scaling.
- Padding only applies to text; margin only applies to image containers
  - Both properties can be applied to any block or inline-block HTML element.
- Margin controls the vertical flow; padding controls the horizontal flow
  - Both properties affect all four sides of an element (top, right, bottom, left).

**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** ✅
  - Content is the core box where the actual HTML content lives.
- The outermost area that separates the element from its neighbors
  - This describes the margin area, which is the outermost layer of the box model.
- The colored boundary line that surrounds the padding of an element
  - This describes the border, which sits between the padding and the margin.
- The transparent area that provides space between content and border
  - This describes the padding, which is outside the content but inside the 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** ✅
  - .className targets all elements with a matching class. It is reusable across many elements.
- A selector starting with a hash (#) targeting a specific identifier
  - This describes an ID selector, which is meant for unique, single-use elements.
- A selector targeting elements by their direct HTML tag name
  - This describes an element (or type) selector, which does not use dots or hashes.
- A selector used only for styling elements inside a script tag
  - CSS classes are used for styling HTML elements, not for internal script logic.

**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** ✅
  - ID selectors are high-specificity selectors intended to target one unique element on a page.
- A selector starting with a colon (:) targeting a special state
  - This describes a pseudo-class (like :hover) rather than an ID selector.
- A selector using angle brackets (< >) to target hidden elements
  - Angle brackets are used in HTML tags, not within CSS selector syntax.
- A selector used to identify the version of the CSS specification
  - IDs are for element selection, not for versioning or metadata identification.

**Hint:** Think about unique identifiers for elements.

### 8. What does "specificity" mean in CSS?

- **A weight system that determines which CSS rule takes precedence** ✅
  - Specificity determines which style wins when multiple rules target the same element.
- A measurement of how much time it takes for a style to be applied
  - This refers to rendering performance or latency, not the CSS cascade priority.
- The total number of CSS properties defined within a single file
  - The quantity of rules is unrelated to the specificity of individual selectors.
- The degree of accuracy used when defining colors with hex codes
  - Hex code accuracy is a color format detail, not a selector priority mechanism.

**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 universal selector targets all elements on the page, often used for global resets.
- The body tag used to set the background color of the whole page
  - While the body tag covers much of the page, it is a type selector, not universal.
- A specialized keyword that overrides all other specific styles
  - This more accurately describes the !important flag rather than a selector.
- The root (html) selector used to define global CSS variables
  - The :root pseudo-class is often used for variables, but it is not the universal selector.

**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** ✅
  - The color property defines the hue of the text content within an element.
- To set the background color of a container or page
  - This is the role of the background-color property, not the color property.
- To change the filter and saturation of an image file
  - Images are styled with the filter property; color only affects text and some icons.
- To define the color of the border surrounding a box
  - Border color is defined specifically via border-color or the border shorthand.

**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** ✅
  - Background-color fills the element behind the text, covering content and padding.
- A property used to set the color of text within an element
  - This is the function of the color property, which handles the foreground.
- A property that applies a color filter to a background image
  - Background-blend-mode or linear-gradient overlays are used for image filtering.
- A property that defines the color of the browser scrollbar
  - Scrollbars are styled using specialized pseudo-elements, not background-color.

**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** ✅
  - Font-size controls how large characters appear, using units like px, rem, or em.
- To set the thickness or boldness of the text characters
  - This describes the font-weight property (e.g., bold, 700).
- To define the spacing between individual letters in a word
  - This is the role of the letter-spacing property, not font-size.
- To adjust the physical width and height of an image tag
  - Images are scaled using the width and height properties.

**Hint:** Think about how big text appears.

### 13. What are common units used in CSS?

- **px (pixels), em (font-relative), rem (root-relative), and %** ✅
  - CSS uses a mix of absolute (px) and relative (em, rem, %) units for layout.
- dpi (dots), bit (binary), fr (frames), and khz (hertz)
  - These are units for resolution, data, animation, and sound, not standard layout.
- pt (points), pc (picas), in (inches), and ft (feet)
  - While some of these exist for print, they are not the most common units for web.
- ms (milli), s (seconds), deg (degrees), and rad (radians)
  - These units are used for transitions, rotations, and timing, not element sizing.

**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** ✅
  - Display determines if an element behaves like a block, inline, flex, or grid container.
- A property used to set the opacity and transparency of an element
  - The opacity property handles transparency; display handles layout behavior.
- A property that determines the resolution of images in the browser
  - Resolution is determined by the source file and device-pixel-ratio, not display.
- A property used to set the alignment of text within a block
  - Text alignment is controlled by the text-align property.

**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** ✅
  - Block elements naturally stack vertically and occupy the entire width of their parent.
- Places an element on the same line as its neighboring elements
  - This describes the behavior of inline elements rather than block elements.
- Completely removes an element from the page and the DOM
  - This is the function of display: none; block ensures the element is visible.
- Centers an element horizontally within its containing parent
  - Centering a block usually requires margin: auto; or a flexbox 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** ✅
  - Inline elements only take up as much width as necessary and do not force line breaks.
- Forces an element to follow the width and height of its parent
  - Inline elements actually ignore manual width and height property settings.
- Prevents any other elements from appearing on the same line
  - This is the opposite of inline; block elements prevent horizontal neighbors.
- Automatically hides an element when the screen size is reduced
  - Hiding elements is done via media queries or display: none, not display: inline.

**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** ✅
  - Inline-block allows horizontal flow like inline but allows sizing and padding like block.
- Forces an element to be invisible while still occupying space
  - This describes visibility: hidden; inline-block remains visible by default.
- Converts an element into a flex container with row orientation
  - This is the function of display: inline-flex, not standard inline-block.
- Stretches an element to be exactly half the width of its parent
  - Width must be set manually (e.g., width: 50%); it is not automatic for inline-block.

**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** ✅
  - Padding adds internal breathing room within the element boundaries.
- To define the thickness of the line surrounding the element
  - This is the role of the border-width property, not padding.
- To set the distance between the borders of two adjacent boxes
  - This describes the margin property, which handles external spacing.
- To align the text content to the center of the available space
  - Text alignment is handled by the text-align property.

**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** ✅
  - Borders provide a visual edge between the padding and the margin of a box.
- To create a shadow effect that glows around the element
  - This is handled by box-shadow or drop-shadow filters, not the border property.
- To ensure that text does not overflow out of its container
  - Overflow behavior is managed by the overflow property (e.g., hidden, scroll).
- To set the transparency level of the background color
  - Transparency is handled by the opacity property or RGBA color values.

**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** ✅
  - Text-align centers, justifies, or pushes text to the left/right within its container.
- To control the vertical positioning of text inside a table cell
  - Vertical positioning is typically handled by the vertical-align property.
- To change the spacing between lines of text in a paragraph
  - This is the function of the line-height property, not text-align.
- To transform text into all uppercase or all lowercase letters
  - This is handled by the text-transform property.

**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** ✅
  - Float was originally designed for wrapping text around images in a document.
- Causes an element to stay fixed at the top of the browser window
  - This describes position: fixed; float does not fix elements to the viewport.
- Allows an element to be dragged and moved around by the user
  - Draggable behavior requires JavaScript or specific HTML attributes, not CSS float.
- Creates a 3D effect where the element appears to hover over others
  - This is achieved via z-index and box-shadows, not the float property.

**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** ✅
  - Pseudo-classes like :hover or :active style elements based on user interaction or position.
- A fake class used as a placeholder during the development phase
  - Pseudo-classes are functional CSS features, not temporary placeholders.
- A method for selecting the parent of a currently targeted element
  - While the :has() selector can do this, pseudo-classes generally target states.
- A class that is automatically generated by JavaScript libraries
  - Pseudo-classes are a native part of the CSS specification, not generated by JS.

**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** ✅
  - Pseudo-elements style specific parts of an element or insert "virtual" content.
- An element that is hidden from screen readers for accessibility
  - Hiding elements is done via aria-hidden or display: none, not pseudo-elements.
- A custom HTML tag created by the developer using Web Components
  - Custom tags are part of HTML/JS, whereas pseudo-elements are a CSS feature.
- A selector that targets elements based on their current visibility
  - Pseudo-elements target specific structural parts, not visibility states.

**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** ✅
  - Relative positioning allows an element to be moved from its original spot without affecting neighbors.
- Static allows for z-index; relative ignores all stacking orders
  - Only positioned elements (like relative) respect z-index; static ignores it.
- Static removes elements from flow; relative keeps them in flow
  - Both properties keep the element in the normal document flow.
- Static is used for mobile; relative is used for desktop layouts
  - Both properties are used across all devices and screen sizes.

**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** ✅
  - Absolute elements are removed from flow and look for a parent with relative/absolute/fixed position.
- Pins an element to a fixed location on the screen while scrolling
  - This describes position: fixed; absolute elements scroll with the page.
- Centers an element automatically within the center of the body
  - Absolute positioning requires top/left and transforms to achieve centering.
- Forces an element to be at the very bottom of the stacking order
  - Stacking order is controlled by z-index, not by the absolute property alone.

**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** ✅
  - Higher z-index values place elements on top of those with lower values.
- Changes the magnification level of the text and image content
  - Magnification is handled by the zoom property or CSS scale transforms.
- Sets the width of an element based on the depth of the screen
  - Width is a 2D property; z-index only affects 3D stacking order.
- Determines the transparency of the background color layer
  - Transparency is handled by opacity or alpha channels in color values.

**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** ✅
  - Flexbox allows for easy alignment and space distribution in one dimension (row or column).
- A tool used for creating complex 3D animations and transitions
  - 3D effects are handled by the transform and perspective properties.
- A framework for building mobile applications using only HTML
  - Flexbox is a CSS module, not an external framework or programming language.
- A method for compressing images to make websites load faster
  - Image compression is a file optimization task, not a CSS layout module.

**Hint:** Think about flexible, responsive layouts.

### 28. What does justify-content do in flexbox?

- **Aligns items along the main axis (usually horizontally)** ✅
  - Justify-content handles spacing between items in the direction of the flex-flow.
- Aligns items along the cross axis (usually vertically)
  - This describes the function of the align-items property in a flex container.
- Determines if flex items should wrap onto multiple new lines
  - This is the role of the flex-wrap property, not justify-content.
- Sets the specific width for every child element in the container
  - Width is set via flex-basis or the width property on individual items.

**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)** ✅
  - Align-items handles the positioning of items perpendicular to the flex-flow.
- Aligns items along the main axis (usually horizontally)
  - This is the function of the justify-content property in a flex container.
- Controls the order in which items appear within the container
  - The order property is used to reorder individual flex items.
- Sets the background color for all items within the flexbox
  - Background colors must be set on individual items or the container itself.

**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** ✅
  - Resetting starts from zero; normalizing aims for a uniform look across all browsers.
- Reset is for mobile; normalize is used for desktop browsers
  - Both techniques are used for cross-browser compatibility on all devices.
- Reset speeds up the site; normalize adds extra security features
  - Neither technique impacts security; they are purely for visual consistency.
- Reset only affects fonts; normalize affects the entire layout
  - Both techniques impact the entire stylesheet and all HTML elements.

**Hint:** Think about removing default browser styles.