The global selector applies a style rule to every element on the page. This selector is represented by an asterisk (*). Using the global selector allows you to set default styles across the entire document.

When you use the global selector, the styles you define affect all HTML elements unless they are overridden by a more specific selector.

Syntax

Follow below syntax to use the global selector in CSS code.

* {
  property: value;
}

Explanation:

• *: The asterisk targets every element in the document.
• property: The style attribute you want to change (e.g., margin, padding).
• value: The setting for that style attribute (e.g., 0, 10px).

Example 1: Resetting Default Margin and Padding

In this example, we will reset the margin and padding of all elements to create a consistent starting point for styling.

.

Explanation:

• Global Rule:
  • Margin: All elements now have a margin of 0.
  • Padding: All elements now have a padding of 0.
• Outcome:
  • Consistency: The page starts without the default browser spacing, making it easier to apply your own styles.

Note: We will learn about margin and padding in the upcoming chapters.

This lesson demonstrates the power of the global selector by applying styles that affect all elements. You learned how to reset default properties and ensure consistent element sizing using the universal selector