CSS Universal Selector

The CSS universal selector is used to apply styles to all elements in a document. It is represented by an asterisk (*) and can be particularly useful when you want to reset or apply global styles to every element.

The syntax for the universal selector is:

</>
Copy
* {
    property: value;
}

Where:

ParameterDescription
*The universal selector, which matches all elements in the document.
propertyA CSS property (e.g., margin, padding, etc.).
valueThe value assigned to the CSS property.

Examples

Resetting Margins and Padding using Universal Selector

In this example, we use the universal selector to reset the default margin and padding for all elements to 0.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <h1>Heading 1</h1>
    <p>This is a paragraph.</p>
</body>
</html>

Applying a Default Font using Universal Selector

Here, we use the universal selector to set a default font-family and color for all elements in the document.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        * {
            font-family: Arial, sans-serif;
            color: #333;
        }
    </style>
</head>
<body>
    <h1>Default Font Applied</h1>
    <p>This paragraph inherits the global styles.</p>
</body>
</html>

Adding a Border to All Elements using Universal Selector

In this example, we use the universal selector to add a thin border to every element on the page for debugging purposes.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        * {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div>
        <h1>Debugging Borders</h1>
        <p>Every element now has a border.</p>
    </div>
</body>
</html>