CSS Universal Selector

« Prev Next »

The universal selector (*) in CSS is used to select all elements in an HTML document. It’s used to apply styles to every element in the document without exception.

Syntax

 * {
  property: value;
}

The asterisk (*) represents all elements.

 

css-universal-selector

Example

<!DOCTYPE html>
<html>
<head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: Arial, sans-serif;
    }

    h1 {
      color: darkblue;
      text-align: center;
    }

    p {
      font-size: 18px;
      color: #555;
    }
  </style>
</head>
<body>

<h1>CSS Universal Selector Example</h1>
<p>This paragraph inherits styles from the universal selector.</p>

</body>
</html>
Run ›

Common Use Cases

CSS Reset — Remove default browser styles:

* {
  margin: 0;
  padding: 0;
}

Global Box-Sizing Rule — Prevent unexpected sizing issues:

* {
  box-sizing: border-box;
}

Apply Global Font or Color:

* {
  font-family: 'Segoe UI', sans-serif;
  color: #333;
}

Advantages

  • Selects all elements globally in a document.
  • Perfect for resetting or global styling.
  • Allows for shortcuts like applying box-sizing: border-box globally.

Disadvantages

  • May not be very specific (depending on use).
  • Not recommended for styling specific elements (combine with other selectors).
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.