โ† All CSS Flashcard Decks

(Layout & Images) Flashcards

7 cards from real CSS practice questions. Tap to flip, then mark Knew It or Still Learning โ€” missed cards come back until you master them.

Read the first 7 (Layout & Images) flashcards as text
  1. Which display value creates an inline-level flex container?

    Answer: inline-flex

    display: inline-flex creates a flex container that flows inline with surrounding content.

  2. What does the 'aspect-ratio' property do?

    Answer: Sets a preferred width-to-height ratio for an element

    aspect-ratio defines the ratio between an element's width and height.

  3. Which property and value enable a sticky header that stays at the top when scrolling?

    Answer: position: sticky; top: 0;

    position: sticky with top: 0 keeps the element fixed once it reaches the top during scroll.

  4. Which image format supports transparency and is best for logos with sharp edges?

    Answer: PNG

    PNG supports lossless compression and an alpha channel for transparency.

  5. What does 'align-items: center' do in a flex row?

    Answer: Centers items along the cross (vertical) axis

    In a flex row, align-items: center aligns items vertically on the cross axis.

  6. Which property in Grid lets an item span multiple columns?

    Answer: grid-column: span 2

    grid-column: span 2 makes the item occupy two column tracks.

  7. Which modern image format offers smaller file sizes than JPEG with similar quality?

    Answer: WebP

    WebP provides superior compression for both lossy and lossless web images.