The Universal Selector and When to Use It

If you’re just starting with CSS, you’ll quickly meet something that looks a bit strange: the * symbol. This is called the universal selector, and it’s one of the simplest tools in CSS — but also one that’s easy to misuse.

In this guide, you’ll learn:

What the universal selector is
How it works in real code
When it’s helpful — and when it’s better to avoid it
Practical examples you can copy, paste, and experiment with

By the end, you’ll feel confident using * the right way in your own projects.

What Is the Universal Selector?

In CSS, a selector is how you tell the browser which elements to style.

p selects all <p> (paragraph) elements
h1 selects all <h1> headings
.button selects all elements with class="button"

The universal selector is just a star: *

* {
  /* styles go here */
}

It means: “select every element on the page.”

So if you write:

* {
  color: red;
}

Every visible piece of text on your page will turn red.

This can be powerful, but also dangerous if you’re not careful. Let’s walk through how to use it step by step.

Example 1: Your First Universal Selector

Let’s start with a tiny HTML page and add some basic CSS using the universal selector.

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Universal Selector Demo</title>
  <style>
    /* We'll add CSS here in a moment */
  </style>
</head>
<body>
  <h1>Welcome!</h1>
  <p>This is a simple page.</p>
  <button>Click me</button>
</body>
</html>

Add the universal selector

Inside the <style> tag, add:

* {
  font-family: Arial, sans-serif; /* Use a clean, simple font */
  color: darkblue;               /* Make all text dark blue */
}

Now your <style> section looks like this:

<style>
  * {
    font-family: Arial, sans-serif;
    color: darkblue;
  }
</style>

What happens?

The <h1> heading text becomes dark blue
The <p> paragraph text becomes dark blue
The button text becomes dark blue
All of them now use the Arial font (or a similar sans-serif font)

You didn’t have to style each element separately. * took care of everything.

Try it yourself

Open a new file called index.html
Paste the full HTML example above
Open the file in your browser
Change darkblue to another color (like green or purple)
Refresh and see the difference

This is your first win with the universal selector.

Example 2: Resetting Margin and Padding

Different browsers (Chrome, Firefox, Safari, etc.) apply their own default styles to elements. For example, most browsers give headings and paragraphs some space (called margin) around them.

Sometimes, you want to start from a “clean slate” with no extra spacing. The universal selector can help.

Reset with the universal selector

Update your <style> block to this:

* {
  margin: 0;   /* Remove default outer spacing */
  padding: 0;  /* Remove default inner spacing */
}

body {
  font-family: Arial, sans-serif;
  color: darkblue;
}

What this does

margin: 0; removes the outer space around all elements
padding: 0; removes the inner space inside all elements
The body rule sets the font and text color instead of using * for that

Now your page might look a bit “squished” — everything is stuck to the top-left corner. That’s okay. The idea is that you are now in control of all spacing.

You can add spacing back exactly where you want it:

h1 {
  margin: 20px;        /* Add space around the heading */
}

p {
  margin: 10px 20px;   /* Top/bottom: 10px, left/right: 20px */
}

button {
  margin: 20px;
  padding: 10px 15px;  /* Inner space around the text */
}

Try it yourself

Remove margin: 0; from the universal selector and refresh
Notice how the heading jumps down a bit? That’s the browser’s default margin
Put margin: 0; back and see the difference again

You’ve just used the universal selector as a simple reset tool.

Example 3: Box-Sizing with the Universal Selector

Now let’s use the universal selector for something many developers do on almost every project: controlling how element sizes are calculated.

By default, when you set a width on an element (like a button or a card), the browser adds padding and border on top of that width. This can make layout confusing.

To fix this, many developers use:

* {
  box-sizing: border-box;
}

What does `box-sizing: border-box;` mean?

It tells the browser:

“When I say something is 200px wide, I mean the whole thing, including padding and border.”

This makes layouts easier to understand.

Full example

Replace your current CSS with this:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;  /* Make sizing easier to work with */
}

body {
  font-family: Arial, sans-serif;
  color: #222;
  padding: 20px;           /* Add some overall page padding */
}

button {
  padding: 10px 20px;
  border: 2px solid #0066cc;
  background-color: #e6f2ff;
}

What you’ll see

The whole page has space around the edges (20px padding on body)
The button has padding and a border, but its size is easier to predict because of box-sizing: border-box;
Every element uses this easier sizing model, thanks to the universal selector

Try it yourself

Remove box-sizing: border-box; from *
Keep everything else the same
Add a fixed width to the button, like:

button {
  width: 200px;
  padding: 10px 20px;
  border: 2px solid #0066cc;
  background-color: #e6f2ff;
}

Toggle box-sizing: border-box; on and off and watch how the button’s size changes

You just used the universal selector to make all elements behave more predictably.

When Not to Use the Universal Selector

It can be tempting to use * for everything because it’s so simple. But there are times when it’s not a good idea.

1. Avoid heavy styles on `*`

Don’t do this:

* {
  font-size: 30px;
  background-color: yellow;
  border: 1px solid red;
}

Why it’s a problem:

Every element (even small ones) will get huge text
The whole page will be yellow with borders everywhere
It can slow down the browser on large pages

2. Don’t rely on it for everything

Instead of:

* {
  color: green;
}

Use more targeted rules:

body {
  color: green;  /* Most text becomes green */
}

button {
  color: white;  /* Override for buttons */
  background-color: green;
}

This is easier to control and understand later.

3. Be careful in large projects

On a small demo page, * is usually fine. But in a big app with many components, using the universal selector carelessly can:

Override styles you didn’t mean to touch
Make debugging harder (“Why is this element green?”)
Affect performance

Use it mostly for simple resets (margin, padding, box-sizing) and avoid adding lots of visual styles to it.

Example 4: A Safe, Common Pattern

Here’s a pattern used in many real-world projects. It’s a safe, practical way to use the universal selector.

/* Apply box-sizing to everything */
* {
  box-sizing: border-box;
}

/* Optional: also include pseudo-elements */
*:before,
*:after {
  box-sizing: border-box;
}

/* Basic reset for margin and padding */
body,
h1,
h2,
h3,
p,
ul,
ol,
li {
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #222;
  line-height: 1.5;
  padding: 20px;
}

Why this is good practice

* is used for one thing only: easier sizing
Common elements get a simple reset
You still have full control to style specific elements later

This is a clean, beginner-friendly foundation for your styles.

Quick Recap: Key Takeaways

The universal selector * means “select every element.”
It’s great for global settings like margin: 0;, padding: 0;, and box-sizing: border-box;.
Avoid using it for heavy visual styles (like big fonts, bright backgrounds, borders) because it touches everything.
On small pages, you can experiment freely. On larger projects, use it mainly for resets and sizing.
When in doubt, prefer more specific selectors (body, p, .button) instead of *.

Learning CSS takes time, and it’s normal to feel a bit overwhelmed at first. You’ve just mastered one of the core building blocks — the universal selector — and that’s real progress.

What’s next?

Practice by building a small page and adding a universal reset
Experiment with changing fonts and colors using body instead of *
Look up other selectors (like .class, #id, and element) to expand your toolkit

Every small experiment you try makes you a better coder. Keep going, keep tweaking, and let your curiosity lead the way.

Mudzinga

The Universal Selector and When to Use It

What Is the Universal Selector?

Example 1: Your First Universal Selector

HTML

Add the universal selector

What happens?

Try it yourself

Example 2: Resetting Margin and Padding

Reset with the universal selector

What this does

Try it yourself

Example 3: Box-Sizing with the Universal Selector

What does `box-sizing: border-box;` mean?

Full example

What you’ll see

Try it yourself

When Not to Use the Universal Selector

1. Avoid heavy styles on `*`

2. Don’t rely on it for everything

3. Be careful in large projects

Example 4: A Safe, Common Pattern

Why this is good practice

Quick Recap: Key Takeaways

About Percy Mudzinga

Related Articles

The Universal Selector and When to Use It

What Is the Universal Selector?

Example 1: Your First Universal Selector

HTML

Add the universal selector

What happens?

Try it yourself

Example 2: Resetting Margin and Padding

Reset with the universal selector

What this does

Try it yourself

Example 3: Box-Sizing with the Universal Selector

What does box-sizing: border-box; mean?

Full example

What you’ll see

Try it yourself

When Not to Use the Universal Selector

1. Avoid heavy styles on *

2. Don’t rely on it for everything

3. Be careful in large projects

Example 4: A Safe, Common Pattern

Why this is good practice

Quick Recap: Key Takeaways

About Percy Mudzinga

Related Articles

Never Miss an Update

What does `box-sizing: border-box;` mean?

1. Avoid heavy styles on `*`