How to select all the HTML element tags on a page and apply CSS styles to it?

To select all the HTML element tags in a page, we can use the * (asterisk) character, or called the wildcard character in CSS, and add the styles needed in that CSS block.

For example, let's consider we have some html elements, like div, p and article tag that are wrapped inside the body and html tags like this,

<!-- Some random HTML element tags -->
<html>
  <body>
    <div>I'm a div</div>
    <p>I'm a paragraph</p>
    <article>I'm an article</article>
  </body>
</html>

Now let's say we want all these elements to have a 1px border with a color of black, to achieve that here we can use the * (asterisk) character in the CSS stylesheet and add the styles needed like this,

/* Apply styles to every HTML element tags */
* {
  border: 1px solid black;
}

It will look like this,

You can see from the above output that not only the div, p, and the article HTML elements have borders, but also the html and body tags.

  • The * asterisk character is commonly used in CSS stylesheets to set common styles across all HTML element tags.

See the above code live in JSBin.

That's all 😃!

Feel free to share if you found this useful 😃.

27

Categories:

Css

Tags:

Css