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