Mastering the CSS Reset with the Universal Selector šŸš€

Mastering the CSS Reset with the Universal Selector šŸš€
The `*` (universal selector) in CSS applies the specified styles to all elements. Using it at the beginning of a project allows you to reset default styles and gain better control over layout behavior.

Here's a common CSS reset example:

<pre class="preFormatted"><code class="codeFormatted">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</code></pre>

Let's break down what each rule does:

āœ” `margin: 0;` removes any default margin around elements, giving you a clean slate to work with.  
āœ” `padding: 0;` removes any default padding inside elements.  
āœ” `box-sizing: border-box;` ensures that padding and border are included in the total width and height of an element, preventing unexpected size changes.

šŸ” Having style issues?  
CSS is reliant on how styles are applied based on specificity and the order in which they are declared. Always check the cascade to resolve conflicts!

Published: May 2024

ā† Back to Blog