Common UI use cases in CSS - Mini Project: Build & Apply

Common UI Use Cases with CSS

📖 Scenario: You are building a simple webpage with common user interface elements: a navigation bar, a button, and a card layout. These are typical parts of many websites.

🎯 Goal: Create CSS styles to make a navigation bar with horizontal links, a button with hover effect, and a card with shadow and padding. The page should look neat and user-friendly.

📋 What You'll Learn

Use Flexbox to layout the navigation bar horizontally

Style the button with background color and change color on hover

Create a card style with padding, border radius, and subtle shadow

Use CSS variables for colors

Make the layout responsive for smaller screens

💡 Why This Matters

🌍 Real World

These CSS styles are common in many websites and apps to create clean, user-friendly interfaces that work well on different devices.

💼 Career

Knowing how to style navigation bars, buttons, and cards with responsive design is essential for front-end web development jobs.

1

Set up CSS variables and basic styles

Create CSS variables for --primary-color as #3498db and --secondary-color as #2ecc71. Then set the body background color to #f0f0f0 and font family to Arial, sans-serif.

CSS

/* Your code here */

Hint

Use :root to define CSS variables. Then style the body selector with background and font.

2

Style the navigation bar with Flexbox

Create a CSS rule for nav to use display: flex and justify-content: center. Also style nav a links to have no underline, padding of 1rem, and color using var(--primary-color).

CSS

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
}

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

/* Your code here */

Hint

Use Flexbox on nav to center links horizontally. Remove underline from links and add padding and color.

3

Add button styles with hover effect

Create a CSS rule for button with background color var(--secondary-color), white text color, border radius 0.5rem, and padding 0.5rem 1rem. Add a hover effect that changes background color to #27ae60.

CSS

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
}

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

nav {
  display: flex;
  justify-content: center;
}

nav a {
  text-decoration: none;
  padding: 1rem;
  color: var(--primary-color);
}

/* Your code here */

Hint

Style the button with background, text color, rounded corners, and padding. Add a hover style to change background color.

4

Create card style with padding, border radius, and shadow

Create a CSS rule for .card with background color white, padding 1rem, border radius 1rem, and box shadow 0 4px 6px rgba(0, 0, 0, 0.1). Add a media query for screens smaller than 600px that sets .card width to 90%.

CSS

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
}

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

nav {
  display: flex;
  justify-content: center;
}

nav a {
  text-decoration: none;
  padding: 1rem;
  color: var(--primary-color);
}

button {
  background-color: var(--secondary-color);
  color: white;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #27ae60;
}

/* Your code here */

Hint

Style the card with white background, padding, rounded corners, and shadow. Use a media query to make it narrower on small screens.

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