DEV Community

loading...
Cover image for How to select all the HTML element tags on a page and apply CSS styles to it?

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

MELVIN GEORGE
Hi, I'm Melvin George, A web developer, and a blogger.
Originally published at melvingeorge.me Updated on ・1 min read

Originally posted here!

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

It will look like this,

all html element tags having 1px border with black color

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 😃.


Discussion (0)