Universal selector in CSS - Mini Project: Build & Apply

Styling All Elements with the Universal Selector

📖 Scenario: You are creating a simple webpage and want to apply a basic style to every element to ensure consistent spacing and font style.

🎯 Goal: Use the CSS universal selector * to apply a margin of 0 and a font family of Arial, sans-serif to all elements on the page.

📋 What You'll Learn

Create a CSS rule using the universal selector *

Set the margin property to 0 for all elements

Set the font-family property to Arial, sans-serif for all elements

💡 Why This Matters

🌍 Real World

Web designers often use the universal selector to reset or normalize styles across all elements to create a consistent base for their designs.

💼 Career

Understanding the universal selector helps in writing efficient CSS that applies broad styles quickly, a common task in front-end web development.

1

Create the CSS universal selector

Write a CSS rule using the universal selector * to select all elements.

CSS

/* Write a CSS rule using the universal selector * */
/* Your code here */

Need a hint?

The universal selector is a single asterisk *. Start your CSS rule with * { and close it with }.

2

Add margin property to the universal selector

Inside the universal selector * rule, add a CSS property to set margin to 0.

CSS

* {
  /* Set margin to 0 for all elements */
  /* Your code here */
}

Need a hint?

Use the syntax property: value; inside the curly braces.

3

Add font-family property to the universal selector

Add a CSS property inside the universal selector * rule to set font-family to Arial, sans-serif.

CSS

* {
  margin: 0;
  /* Set font-family to Arial, sans-serif for all elements */
  /* Your code here */
}

Need a hint?

Remember to separate multiple properties with semicolons inside the CSS rule.

4

Complete the CSS rule for universal styling

Ensure the CSS rule using the universal selector * includes both margin: 0; and font-family: Arial, sans-serif; properties.

CSS

* {
  margin: 0;
  font-family: Arial, sans-serif;
  /* Final check: all properties included */
}

Need a hint?

Make sure your CSS rule is complete and correctly formatted.