HomeSubjectsUniversityBlogAbout

CSS Fundamentals

Topic in Web Development

210 total MCQsShowing 30 with explanations10 Easy10 Medium10 Hard
Start Timed Quiz on CSS FundamentalsBack to Web Development

About This Topic

CSS (Cascading Style Sheets) is the language used to describe how HTML elements are displayed, controlling layout, colour, typography and spacing. The most tested idea is the cascade: how specificity is calculated for inline styles, IDs, classes and element selectors, how source order and !important break ties, and which properties inherit. The box model is next, with content, padding, border and margin, and how box-sizing: border-box changes width calculations. Expect questions on selector types, pseudo-classes and pseudo-elements, position values (static, relative, absolute, fixed, sticky), display values, z-index, and relative units like em, rem, vh and percentages compared with px.

Below are 30 practice questions from a pool of 210 CSS Fundamentals MCQs, one of 17 topics in Web Development. Each shows the correct answer with an explanation; when you are ready, take a timed quiz to test recall under exam conditions.

Practice Questions

Each question below shows the correct answer with a full explanation. Use these to build conceptual understanding before attempting a timed quiz.

CSS FundamentalsEasy

Q1. What does CSS stand for?

  1. A.Colorful Style Sheets
  2. B.Computer Style Sheets
  3. C.Creative Style System
  4. D.Cascading Style Sheets✓ Correct

Explanation

CSS stands for Cascading Style Sheets.

Report an error in this question

CSS FundamentalsEasy

Q2. Which CSS property changes the text color?

  1. A.text-color
  2. B.color✓ Correct
  3. C.font-color
  4. D.fg-color

Explanation

The color property sets the color of text content.

Report an error in this question

CSS FundamentalsEasy

Q3. How do you select an element with the ID 'header' in CSS?

  1. A.#header✓ Correct
  2. B.header
  3. C..header
  4. D.*header

Explanation

The # selector selects elements by their ID.

Report an error in this question

CSS FundamentalsEasy

Q4. Which CSS property sets the background color?

  1. A.color-property
  2. B.back-color-css
  3. C.background-color✓ Correct
  4. D.bgcolor-attr

Explanation

The background-color property sets the background color of an element.

Report an error in this question

CSS FundamentalsEasy

Q5. How do you select elements with the class 'active' in CSS?

  1. A.active
  2. B.*active
  3. C.#active
  4. D..active✓ Correct

Explanation

The dot (.) selector selects elements by their class name.

Report an error in this question

CSS FundamentalsEasy

Q6. Which property changes the font size?

  1. A.text-font
  2. B.text-size
  3. C.font-size✓ Correct
  4. D.text-style

Explanation

The font-size property sets the size of text.

Report an error in this question

CSS FundamentalsEasy

Q7. What is the correct CSS syntax to change font to Arial?

  1. A.text-font: Arial;
  2. B.font-family: Arial;✓ Correct
  3. C.family-font: Arial;
  4. D.font: Arial;

Explanation

The font-family property specifies the font for text content.

Report an error in this question

CSS FundamentalsEasy

Q8. Which property adds space inside an element's border?

  1. A.padding✓ Correct
  2. B.spacing
  3. C.margin
  4. D.gap

Explanation

Padding adds space between content and border.

Report an error in this question

CSS FundamentalsEasy

Q9. Which property adds space outside an element's border?

  1. A.spacing
  2. B.margin✓ Correct
  3. C.padding
  4. D.outer-space

Explanation

Margin adds space outside an element's border.

Report an error in this question

CSS FundamentalsEasy

Q10. How do you add a comment in CSS?

  1. A.<!-- comment -->
  2. B./* comment */✓ Correct
  3. C.// comment
  4. D.# comment

Explanation

CSS comments are written between /* and */.

Report an error in this question

CSS FundamentalsMedium

Q11. What is the CSS Box Model?

  1. A.A responsive layout framework for components
  2. B.A model of content, padding, border, margin✓ Correct
  3. C.A 3D modeling technique for page effects
  4. D.A CSS animation model for element transitions

Explanation

The CSS Box Model describes how every element is rendered with content, padding, border, and margin.

Report an error in this question

CSS FundamentalsMedium

Q12. What is the difference between display: none and visibility: hidden?

  1. A.display: none only hides text content but keeps the element
  2. B.visibility: hidden removes elements from the document flow
  3. C.display: none removes from flow; visibility: hidden keeps space✓ Correct
  4. D.They behave identically in every rendering situation

Explanation

display:none removes the element from layout, while visibility:hidden hides it but preserves space.

Report an error in this question

CSS FundamentalsMedium

Q13. Which CSS property is used to float an element?

  1. A.position
  2. B.align
  3. C.float✓ Correct
  4. D.display

Explanation

The float property positions an element to the left or right.

Report an error in this question

CSS FundamentalsMedium

Q14. What does position: relative do?

  1. A.Makes element fixed on scroll
  2. B.Positions element relative to the viewport
  3. C.Positions element relative to its normal position✓ Correct
  4. D.Removes element from document flow

Explanation

position:relative offsets an element from its normal position without removing it from flow.

Report an error in this question

CSS FundamentalsMedium

Q15. What is specificity in CSS?

  1. A.The algorithm determining which CSS rule applies when multiple match✓ Correct
  2. B.The order in which CSS properties are declared
  3. C.The speed at which the browser renders CSS styles
  4. D.The total number of CSS files loaded on the page

Explanation

Specificity determines which CSS rule takes precedence when multiple selectors match.

Report an error in this question

CSS FundamentalsMedium

Q16. Which CSS pseudo-class applies when the user hovers over an element?

  1. A.:focus
  2. B.::hover
  3. C.:hover✓ Correct
  4. D.:active

Explanation

The :hover pseudo-class applies styles when the pointer hovers over an element.

Report an error in this question

CSS FundamentalsMedium

Q17. What is the z-index property used for?

  1. A.Setting the zoom level of an element
  2. B.Setting the total width of an element
  3. C.Creating 3D visual effects on elements
  4. D.Controlling the stack order of elements✓ Correct

Explanation

z-index controls the vertical stacking order of positioned elements.

Report an error in this question

CSS FundamentalsMedium

Q18. What does box-sizing: border-box do?

  1. A.Sets the box model back to the content-box
  2. B.Adds a shadow effect around the element box
  3. C.Includes padding and border in total dimensions✓ Correct
  4. D.Removes the border from around the element

Explanation

border-box includes padding and border within the specified width and height.

Report an error in this question

CSS FundamentalsMedium

Q19. Which selector targets the first child element?

  1. A.:first
  2. B.::first-child
  3. C.:first-child✓ Correct
  4. D.:child(1)

Explanation

The :first-child pseudo-class selects an element that is the first child of its parent.

Report an error in this question

CSS FundamentalsMedium

Q20. What is the inherit value in CSS?

  1. A.A reserved keyword in the JavaScript language
  2. B.Takes the same computed value as parent element✓ Correct
  3. C.A CSS variable declared with a custom property
  4. D.Resets the property to its initial default value

Explanation

inherit forces a property to take the computed value from its parent element.

Report an error in this question

CSS FundamentalsHard

Q21. What is the difference between em and rem units?

  1. A.em is an absolute unit measured in exact pixels
  2. B.em is relative to parent font; rem to the root✓ Correct
  3. C.rem is relative to parent; em is relative to root
  4. D.They are identical in how they calculate sizing

Explanation

em is relative to the parent element's font size, while rem is relative to the root element's font size.

Report an error in this question

CSS FundamentalsHard

Q22. What are CSS custom properties (variables)?

  1. A.A type of CSS selector for targeting elements
  2. B.JavaScript variables referenced from within CSS
  3. C.User-defined values with -- prefix and var() access✓ Correct
  4. D.Predefined CSS values built into the browser

Explanation

CSS custom properties are declared with -- and accessed using var().

Report an error in this question

CSS FundamentalsHard

Q23. What is the will-change CSS property?

  1. A.An animation delay property for scheduling effects
  2. B.A transition property controlling animation timing
  3. C.A property used to change element content
  4. D.A hint about which properties will change for optimization✓ Correct

Explanation

will-change informs the browser about expected changes for rendering optimization.

Report an error in this question

CSS FundamentalsHard

Q24. How does the CSS calc() function work?

  1. A.It calculates the total page loading time
  2. B.It performs math with mixed units in CSS values✓ Correct
  3. C.It calculates JavaScript expressions in CSS
  4. D.It counts the number of DOM elements on page

Explanation

calc() allows mixing units in mathematical expressions for dynamic sizing.

Report an error in this question

CSS FundamentalsHard

Q25. What is the stacking context in CSS?

  1. A.A method of combining multiple CSS stylesheets
  2. B.A CSS Grid feature for placing items in cells
  3. C.A method for stacking div elements vertically
  4. D.A 3D conceptualization of elements along z-axis✓ Correct

Explanation

A stacking context determines the rendering order of elements along the z-axis.

Report an error in this question

CSS FundamentalsHard

Q26. What does the @supports rule do in CSS?

  1. A.Provides support for external web fonts
  2. B.Checks if a browser supports a CSS feature✓ Correct
  3. C.Enables support for older browser versions
  4. D.Adds browser support for legacy features

Explanation

@supports applies CSS rules only if the browser supports the specified property and value.

Report an error in this question

CSS FundamentalsHard

Q27. What is the difference between :nth-child() and :nth-of-type()?

  1. A.:nth-child only counts elements sharing the same type
  2. B.They are identical in their selection behavior
  3. C.:nth-of-type counts all siblings regardless of their type
  4. D.:nth-child counts all siblings; :nth-of-type counts same type✓ Correct

Explanation

:nth-child() counts among all siblings, while :nth-of-type() counts only siblings of the same element type.

Report an error in this question

CSS FundamentalsHard

Q28. What is a CSS combinator?

  1. A.A color combination and palette tool
  2. B.A CSS framework for rapid prototyping
  3. C.A character explaining selector relationships✓ Correct
  4. D.A CSS minification and optimization tool

Explanation

Combinators define the relationship between selectors in CSS.

Report an error in this question

CSS FundamentalsHard

Q29. What is the contain property in CSS?

  1. A.A flexbox property for aligning child items
  2. B.A property indicating subtree independence for optimization✓ Correct
  3. C.A property to contain overflowing text content
  4. D.A text wrapping property for long strings

Explanation

The contain property isolates an element's subtree from the document for rendering optimization.

Report an error in this question

CSS FundamentalsHard

Q30. What is the CSS clamp() function?

  1. A.A function constraining a value between min and max✓ Correct
  2. B.A function to lock the scroll position on a page
  3. C.A function to fix element positions in a container
  4. D.A function to group elements together visually

Explanation

clamp(min, preferred, max) constrains a value between a minimum and maximum.

Report an error in this question

More Web Development Topics

Introduction to Web Development

Practice MCQs with explanations

Web Architecture & Protocols

Practice MCQs with explanations

HTML Fundamentals

Practice MCQs with explanations

Advanced CSS & Responsive Design

Practice MCQs with explanations

JavaScript Fundamentals

Practice MCQs with explanations

Advanced JavaScript

Practice MCQs with explanations

Ready to test yourself on CSS Fundamentals?

Take a timed quiz drawn from 210+ questions on this topic. No signup required — your progress saves in your browser.

Start CSS Fundamentals Quiz