0
0
CSSmarkup~5 mins

Universal selector in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

The universal selector helps you style all elements on a webpage at once. It saves time when you want a common style everywhere.

You want to set a common font or color for the entire page.
You want to remove default spacing or margins from all elements.
You want to apply a background color to every element.
You want to reset styles before adding your own.
You want to quickly test how a style looks on all elements.
Syntax
CSS
* { property: value; }
The asterisk (*) means 'all elements'.
Put the styles inside curly braces { }.
Examples
This removes all default margin and padding from every element.
CSS
* { margin: 0; padding: 0; }
This sets the font for all elements to Arial or a similar font.
CSS
* { font-family: Arial, sans-serif; }
This changes how width and height are calculated for all elements, making layouts easier.
CSS
* { box-sizing: border-box; }
Sample Program

This example uses the universal selector (*) to remove all default margin and padding, set a font, and add a light background color to every element. Then it adds some spacing and colors to specific elements.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Universal Selector Example</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      background-color: #f0f8ff;
    }
    body {
      padding: 1rem;
    }
    h1 {
      color: #333;
      margin-bottom: 1rem;
    }
    p {
      color: #555;
    }
  </style>
</head>
<body>
  <h1>Welcome!</h1>
  <p>This page uses the universal selector to style all elements.</p>
</body>
</html>
OutputSuccess
Important Notes

The universal selector can slow down your page if overused with complex styles.

It applies to every element, so be careful when combining it with other selectors.

Use it mainly for simple, broad styles like resets or fonts.

Summary

The universal selector (*) targets all elements on the page.

It is useful for setting common styles like margin, padding, and fonts.

Use it wisely to avoid unexpected style changes or performance issues.