CSS things you thought you knew Quiz

Explore foundational CSS knowledge to clarify common misconceptions and boost your frontend confidence. Perfect for refreshing your understanding of layout, selectors, and modern techniques.

1. Display vs. Visibility

   What is the main difference between 'display: none' and 'visibility: hidden' when applied to an element in CSS?

   1. visibility: hidden removes the element from the DOM
   2. display: none only hides text; visibility: hidden hides images
   3. Both completely hide the element and its space
   4. display: none removes the element from layout; visibility: hidden hides it but keeps its space

   Explanation: The correct answer highlights that 'display: none' removes the element from both layout and rendering, while 'visibility: hidden' makes it invisible but the space remains occupied. The second option ignores this crucial difference, the third confuses content types, and the fourth incorrectly links visibility to the DOM structure.

2. Selector Specificity

   Between '.card .title' and '#card .title', which CSS selector has higher specificity?

   1. Specificity does not matter for these selectors
   2. #card .title
   3. .card .title
   4. They have equal specificity

   Explanation: #card .title has higher specificity because IDs are more specific than classes. '.card .title' contains only class selectors, and 'They have equal specificity' is incorrect. The fourth option ignores how CSS resolves conflicts.

3. Box Sizing

   What does 'box-sizing: border-box' change about an element's sizing in CSS?

   1. Makes the element's height auto-adjust to content
   2. Only content is included in the width and height
   3. Padding and border are included inside the element's width and height
   4. Only the border is added outside the width and height

   Explanation: 'box-sizing: border-box' means the total width and height include content, padding, and border, simplifying layout. The second option describes the default 'content-box', the third option misstates behavior, and the fourth understates what is included.

4. Flexbox Main Axis Alignment

   In a flex container, which property controls alignment of items along the main axis?

   1. align-items
   2. justify-content
   3. flex-direction
   4. order

   Explanation: 'justify-content' aligns items along the main axis. 'align-items' aligns along the cross axis, 'flex-direction' sets axis direction, and 'order' changes display order, not alignment.

5. Grid Auto-Filling

   What does 'grid-auto-flow: dense' do in a CSS Grid layout?

   1. Keeps items in strict source order without filling gaps
   2. Forces all items into one row
   3. Attempts to back-fill gaps by reordering auto-placed items when possible
   4. Automatically doubles the number of columns

   Explanation: With 'grid-auto-flow: dense', the grid tries to fill gaps in the layout by moving auto-placed items forward when possible. The other options are incorrect as they misrepresent gap-filling or grid structure behavior.

6. Default Position Property

   What is the default value of the 'position' property for most HTML elements?

   1. fixed
   2. absolute
   3. relative
   4. static

   Explanation: The default 'position' is 'static', meaning elements are positioned according to normal document flow. 'Relative', 'absolute', and 'fixed' must be set explicitly to change positioning context.

7. CSS Grid Minmax Function

   What does 'minmax(200px, 1fr)' mean when used in a CSS Grid template?

   1. The column or row never grows beyond 200px
   2. It alternates between 200px and 1fr on hover
   3. The column or row is at least 200px and can grow to take up leftover space
   4. The size is always exactly 200px

   Explanation: 'minmax(200px, 1fr)' means the track is a minimum of 200px and can expand to a fraction of remaining space. The other options misunderstand minmax or incorrectly attribute interactivity or fixed size.

8. Margin Collapsing

   Why can a 'margin-top' on a first child element sometimes cause the parent element to move in CSS?

   1. Because margin collapsing merges margins between parent and child
   2. Because the margin is doubled automatically
   3. Because the parent ignores child margins
   4. Because only the parent's margin is applied

   Explanation: Margin collapsing allows the parent and child's adjacent vertical margins to combine. The other options misstate how margins interact or imply doubling/ignoring which isn't accurate.

9. Clamp Function Use

   What is the effect of using 'clamp(16px, 2vw, 24px)' for font-size in CSS?

   1. The font-size is set to 16px only
   2. It sets the font-size to 2vw regardless of screen size
   3. The size starts at 24px and grows with the viewport
   4. The font-size stays between 16px and 24px, scaling with 2vw within that range

   Explanation: 'clamp(16px, 2vw, 24px)' means the size scales with 2vw but is limited between 16px minimum and 24px maximum. The other choices ignore clamping behavior or limit scaling.

10. Text Overflow Ellipsis Requirement

    What key CSS properties are needed for 'text-overflow: ellipsis' to display an ellipsis?

    1. Only 'overflow: auto' must be set
    2. Any block element will automatically show an ellipsis
    3. The element needs 'overflow: hidden' (or clipped), 'white-space: nowrap', and a constrained width
    4. A background color must be applied

    Explanation: 'text-overflow: ellipsis' only works when an element is single-line, has a limited width, and has overflow hidden or clipped. The other options either ignore these requirements or add unrelated styling.