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.

Practice

1. Which CSS property is commonly used to add space inside a button to make it easier to click?

easy

A. font-size

B. margin

C. padding

D. border

Solution

1. Step 1: Understand padding's role

   Padding adds space inside an element, between its content and border, making buttons larger and easier to click.

2. Step 2: Differentiate from margin

   Margin adds space outside the element, not inside. Border and font-size do not add internal space.

3. Final Answer:

   padding -> Option C

4. Quick Check:

   Internal space in buttons = padding [OK]

Hint: Padding adds inside space; margin adds outside space [OK]

Common Mistakes:

• Confusing margin with padding
• Using border to add space
• Changing font-size to add space

2. Which CSS selector correctly targets all buttons with the class primary?

easy

A. button.primary

B. .button primary

C. #primary button

D. button#primary

Solution

1. Step 1: Understand class selector syntax

   To select elements with a class, use a dot (.) before the class name. Combining with element name is element.class.

2. Step 2: Analyze each option

   button.primary selects all button elements with class primary. .button primary is invalid syntax. #primary button selects buttons inside an element with id primary. button#primary selects button with id primary.

3. Final Answer:

   button.primary -> Option A

4. Quick Check:

   Class selector with element = element.class [OK]

Hint: Use dot before class name, no spaces for element.class [OK]

Common Mistakes:

• Using space instead of dot
• Confusing id (#) with class (.)
• Wrong order of selectors

3. What will be the background color of the button when hovered, given this CSS?

button {
  background-color: blue;
  color: white;
}
button:hover {
  background-color: green;
}

medium

A. Blue

B. Green

C. White

D. No change

Solution

1. Step 1: Understand the hover pseudo-class

   The :hover selector changes styles when the mouse is over the element.

2. Step 2: Check the hover background-color

   On hover, the background-color changes from blue to green as defined.

3. Final Answer:

   Green -> Option B

4. Quick Check:

   Hover changes background to green [OK]

Hint: Hover styles override normal styles on mouse over [OK]

Common Mistakes:

• Ignoring :hover effect
• Confusing color with background-color
• Assuming no style change on hover

4. This CSS code is intended to center a card horizontally, but it doesn't work:

.card {
  width: 300px;
  margin: 0 auto 0 auto;
  display: inline-block;
}

What is the main reason it fails?

medium

A. 'display: inline-block' prevents 'margin: 0 auto' from centering block elements

B. Width is missing units

C. Margin syntax is incorrect

D. The card needs 'text-align: center' on parent

Solution

1. Step 1: Understand margin auto centering

   Margin auto centers block elements with a fixed width horizontally.

2. Step 2: Check display property effect

   Setting display: inline-block makes the element inline-level, so margin: 0 auto does not center it.

3. Final Answer:

   'display: inline-block' prevents 'margin: 0 auto' from centering block elements -> Option A

4. Quick Check:

   Inline-block disables margin auto centering [OK]

Hint: Use block display for margin auto centering [OK]

Common Mistakes:

• Using inline-block instead of block
• Wrong margin syntax
• Forgetting width units

5. You want to create a responsive navigation bar with evenly spaced links that wrap on small screens. Which CSS layout method is best suited for this?

hard

A. Use inline-block links with fixed margins

B. Grid with fixed column widths

C. Float each link left with fixed widths

D. Flexbox with flex-wrap: wrap and justify-content: space-between

Solution

1. Step 1: Identify layout needs

   We want links spaced evenly and wrapping on small screens, so flexible layout and wrapping are needed.

2. Step 2: Evaluate layout methods

   Flexbox supports flexible spacing and wrapping with flex-wrap: wrap and justify-content: space-between. Grid with fixed columns won't wrap well. Floats and inline-block are outdated and less flexible.

3. Final Answer:

   Flexbox with flex-wrap: wrap and justify-content: space-between -> Option D

4. Quick Check:

   Responsive spacing and wrapping = Flexbox wrap + space-between [OK]

Hint: Use flex-wrap and justify-content for responsive nav bars [OK]

Common Mistakes:

• Using fixed widths preventing wrap
• Relying on floats for layout
• Ignoring flex-wrap property