CSS - Universal Selectors

Quiz

Universal Selectors in CSS

CSS universal selector is a special selector that selects all the elements in an HTML document. It is denoted by an asterisk mark (*). Universal selector is used to set a similar style for the entire document.

Syntax

The syntax for the CSS universal selector is as follows:

* {
    margin: 0;
    padding: 0;
}

Using Universal Selector Setting Background Color

To set the background color and text color of the web page, universal selector is used:

Example

Let us see an example to set the background color and text color of the HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Universal Selectors</title>
    <style>
        * {
            background-color: #04af2f;
            color: white;
        }
    </style>
</head>
<body>
    <p>Welcome to Tutorials Point</p>
</body>
</html>

Using Universal Selector Setting Border

We have used the Universal Selector to set the border of the HTML document.

Example

Here is an example of setting the border of an HTML web page.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Universal Selectors</title>
    <style>
        * {
            border: 2px solid #04af2f;
        }
    </style>
</head>
<body>
    <p>Welcome to Tutorials Point</p>
</body>
</html>

Using Universal Selector Setting Font

Use the universal selector to set a similar font for all the elements in the web page.

Example

Here is an example to set the font and font size of the document.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Universal Selectors</title>
    <style>
        * {
            font-size: 16px;
            font-family: Verdana, sans-serif;
        }
    </style>
</head>
<body>
    <p>Welcome to Tutorials Point</p>
</body>
</html>

Print Page