CSS MCQs: 12 Practice Questions with Worked Explanations

CSS MCQs often look like vocabulary checks, but their distractors target deeper confusion: content size versus outer size, descendant versus child selectors, main versus cross axes, and cascade versus specificity. The deciding rules become clearer when they are tested against small numerical and selector examples. Choose each answer before reading its explanation, then record the deciding rule in one line. Refresh weak areas through Free Courses & Guidance by Prashant Sir, or follow the structured sequence in the Complete CSS Course.

CSS MCQ rules to fix before you start

For .card { width: 300px; padding: 20px; border: 5px solid; }, the default content-box calculation is 300 + 20 + 20 + 5 + 5 = 350px. That is the outer border-box width. With box-sizing: border-box, the outer width remains 300px, while the content width becomes 300 - 40 - 10 = 250px. Margin stays outside both results.

Now compare #checkout .price span, with specificity (1,1,1), and .page .card span.sale, with (0,3,1). The first selector wins because its ID component is 1, while the second selector's ID component is 0. You do not add the three columns into one score. If two matching selectors have equal specificity within the same cascade context, the later declaration wins. Keep these rules visible while answering, but commit to an option before checking the explanation.

CSS box model MCQs 1-3: sizing, centring and layers

Question 1

How does the 'box-sizing: border-box' property affect the total width and height of an element in relation to its padding and border?

• A. It includes only the content in the total width and height

• B. It includes the content and padding in the total width and height

• C. It includes the content, padding, and border in the total width and height

• D. It includes the content, padding, border, and margin in the total width and height

Correct answer: C. It includes the content, padding, and border in the total width and height.

For the 300px card, the padding and borders are inside the declared width. The content gets 300 - 40 - 10 = 250px. Under content-box, the outer border box is 350px. Margin remains outside, so D is incorrect.

Question 2

In the context of the Box Model, how does setting the 'margin:auto' property affect block-level elements with a fixed width?

• A. It aligns the element to the left of its container

• B. It aligns the element to the right of its container

• C. It centers the element horizontally within its container

• D. It stretches the element to fill the entire width of its container

Correct answer: C. It centers the element horizontally within its container.

A 320px block inside a 960px parent leaves 960 - 320 = 640px. Automatic left and right margins split it into 640 / 2 = 320px each. That centres the block without changing its 320px width, so it does not stretch.

Question 3

Which component of the Box Model is the innermost layer where text, images, or other media are housed?

• A. Margin

• B. Border

• C. Padding

• D. Content

Correct answer: D. Content.

From inside to outside, the order is content, padding, border and margin. Content houses the text or image. In Question 1, 250px was the space available to this innermost layer.

CSS selector MCQs 4-7: combinators, attributes and specificity

Question 4

Which selector is used to select elements that are the direct children of a specified element?

• A. child selector ('>')

• B. Descendant selector (' ')

• C. Adjacent sibling selector ('+')

• D. General sibling selector ('~')

Correct answer: A. child selector ('>').

Given <article><p>A</p><section><p>B</p></section></article>, article > p selects only direct child A. article p selects both A and B as descendants. The + and ~ combinators compare siblings.

Question 5

Which CSS selector targets an element immediately following a specified sibling element?

• A. Adjacent sibling selector ('+')

• B. General sibling selector ('~')

• C. child selector ('>')

• D. Descendant selector (' ')

Correct answer: A. Adjacent sibling selector ('+').

The stem says "property", but this is a selector combinator. h2 + p matches only the first p immediately after the h2; h2 ~ p can match every later sibling p under the same parent.

Question 6

Which of the following are types of attribute selectors?

• A. '[attribute]'

• B. '[attribute="value"]'

• C. '[attribute#="value"]'

• D. '[attribute*="value"]'

Correct answers: A, B and D.

This is an MSQ, so all three valid choices are required. [disabled] tests presence, [type="email"] tests exact equality, and [href*="docs"] tests whether a value contains docs. CSS has no #= operator, so C is invalid.

Question 7

Which attribute selector is used to select elements whose attribute value ends with a specific string?

• A. '[attribute^="value"]'

• B. '[attribute*="value"]'

• C. '[attribute$="value"]'

• D. '[attribute="value"]'

Correct answer: C. '[attribute$="value"]'.

[data-file$=".pdf"] matches report.pdf but not report.pdf.tmp. $= means suffix, ^= prefix, *= substring, and = exact equality. An attribute selector contributes one class-level component, so this selector has specificity (0,1,0).

CSS Flexbox MCQs 8-9: main-axis and cross-axis alignment

Question 8

What does the 'justify-content: space-around;' property do in a flex container?

• A. Distributes items evenly with equal space around them.

• B. Aligns items at the center of the container.

• C. Distributes items with space between them.

• D. Aligns items at the start of the container.

Correct answer: A. Distributes items evenly with equal space around them.

An 800px row with three 100px items has 800 - 300 = 500px free. space-around gives each item 500 / 3 = 166.67px around it, about 83.33px per side. Adjacent halves form 166.67px gaps; outer edges keep 83.33px. space-between leaves no outer gap.

Question 9

What does the 'align-self' property do in a flex container?

• A. Aligns flex items along the main axis.

• B. Aligns a specific item along the cross-axis.

• C. Sets the order of the flex items.

• D. Specifies how much a flex item will grow.

Correct answer: B. Aligns a specific item along the cross-axis.

The canonical spelling is align-self. It overrides cross-axis alignment for one item. In a 300px-tall row, centring a 60px-high item places it (300 - 60) / 2 = 120px from the top, overriding align-items: stretch for that item.

CSS Flexbox MCQs 10-12: wrapping, shrinking and axis choice

Question 10

Which CSS property helps in setting up a flexible container that wraps items?

• A. 'flex-direction'

• B. 'flex-wrap'

• C. 'flex-flow'

• D. 'align-content'

Correct answer: B. 'flex-wrap'.

In a 500px row, three 220px flex bases request 3 x 220 = 660px. flex-wrap: wrap lets later items move to another line. nowrap invokes shrinking or overflow. flex-flow is shorthand, but flex-wrap is the direct property asked for.

Question 11

In CSS, what does 'flex-shrink' control?

• A. The ability of an element to grow to fit the space.

• B. The ability of an element to reduce its size relative to others.

• C. The alignment of elements along the main axis.

• D. The order of the elements within the flex container.

Correct answer: B. The ability of an element to reduce its size relative to others.

Three 200px flex bases total 600px inside a 500px container, so 600 - 500 = 100px must go. With equal factors and bases, each loses 100 / 3 = 33.33px and finishes near 200 - 33.33 = 166.67px. A larger flex-shrink factor absorbs more negative space when the bases are equal.

Question 12

Which CSS property is used to align items in a Flexbox container along the main axis?

• A. align-items

• B. justify-content

• C. flex-direction

• D. flex-wrap

Correct answer: B. justify-content.

flex-direction chooses the main axis; justify-content distributes space on it. It acts horizontally in the default row and vertically with flex-direction: column. align-items controls the cross axis, while flex-wrap permits multiple lines.

CSS MCQ review: turn each wrong answer into a rule

If you missed a definition, revise the rule. If you knew the rule but chose the wrong option, trace the supplied numbers or DOM. If you partly solved the MSQ, test every option independently. Rewrite only the missed rules, then attempt those questions again.

For broader practice across programming and core computer science, use MCQ Practice. For placement-oriented revision that combines CSS with the rest of technical-interview preparation, continue with Placement Preparation.

CSS MCQs: the short version and next step

Remember four rules: declared width depends on box-sizing; combinators encode element relationships; specificity is compared component by component; and Flexbox alignment depends on the chosen main axis. Retry only the questions you missed, first without looking at the options.

For structured work on selectors, layout and responsive styling, continue with the Complete CSS Course. If you only need more questions, use the Complete CSS learning hub.

Finish with one concrete exercise. Create a single HTML file containing the 300px card, the article > p selector test and the 800px Flexbox row. Predict every result, then verify it in the browser.