Universal Selector

Part of the Styling with CSS section of Coddy's HTML journey — lesson 15 of 76.

The universal selector is a powerful selector in CSS that targets every HTML element on a page. It is represented by an asterisk (*).

When used, the universal selector applies the specified styles to all elements, regardless of their type, class, or ID. This can be useful for setting global styles or resetting default styles across the entire document.

Here's the basic syntax for using the universal selector:

* {
    property: value;
}

For example, let's say you want to set the default text color and font size for all elements on a page. You can use the universal selector like this:

* {
    color: black;
    font-size: 14px;
}

Challenge

Easy

You are given an HTML document with various elements, including headings (<h1>, <h2>), paragraphs (<p>), and a division (<div>). Your task is to use the universal selector to style these elements. Follow the steps below:

Write a CSS rule using the universal selector that sets the text color of all elements to darkgray and the font size to 16 pixels.

Cheat sheet

The universal selector targets every HTML element on a page using an asterisk (*):

* {
    property: value;
}

Example setting global text color and font size:

* {
    color: black;
    font-size: 14px;
}

Try it yourself

<html>
<head>
    <title>Universal Selector</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <h2>This is a subheading</h2>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>