Common UI use cases in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What CSS property is commonly used to create a flexible layout that adjusts to different screen sizes?

The flexbox layout is created using the display: flex; property. It helps arrange items in rows or columns and adapts well to different screen sizes.

beginner

How do you center content both vertically and horizontally using CSS Flexbox?

Use display: flex; on the container, then add justify-content: center; to center horizontally and align-items: center; to center vertically.

intermediate

What CSS technique is best for creating a responsive navigation bar that stacks on small screens?

Use Flexbox with flex-wrap: wrap; and media queries to change the layout. On small screens, the navigation items can stack vertically for easier tapping.

beginner

Which CSS property controls the space between grid items in a CSS Grid layout?

The gap property controls the space between rows and columns in a CSS Grid layout. It replaces older margin hacks and is easier to manage.

beginner

How can you make a button visually accessible and easy to use on all devices?

Use sufficient color contrast, add padding for touch targets, use the button element for semantics, and include focus styles for keyboard users.

Which CSS property is used to create a flexible box layout?

A position: absolute;

B display: flex;

C float: left;

D display: block;

The display: flex; property activates the flexbox layout, which helps arrange items flexibly.

What does the CSS property gap do in a grid layout?

A Sets the background color

B Aligns text

C Changes font size

D Controls space between grid items

gap sets the spacing between rows and columns in CSS Grid.

How do you center content vertically and horizontally with Flexbox?

A justify-content: center; align-items: center;

B text-align: center;

C margin: auto;

D float: center;

Using justify-content and align-items both set to center centers flex items in both directions.

Which CSS feature helps make navigation menus stack on small screens?

A Media queries

B Text shadows

C Box shadows

D Font weights

Media queries allow CSS to change styles based on screen size, enabling responsive stacking.

What is important for making buttons accessible?

A No padding

B Using only images

C High contrast and focus styles

D Removing outlines

High contrast and visible focus styles help all users, including keyboard users and those with vision impairments.

Explain how Flexbox helps create responsive layouts in common UI use cases.

Think about how items adjust and align inside a flexible box.

Describe how media queries work with CSS Grid or Flexbox to improve UI on small screens.

Consider how CSS changes when the screen is narrow.