DEV Community

Cover image for How to select HTML elements tags directly inside CSS?
MELVIN GEORGE
MELVIN GEORGE

Posted on • Updated on <time datetime="2021-07-10T13:27:22Z" class="date-no-year">Jul 10</time> • Originally published at melvingeorge.me

How to select HTML elements tags directly inside CSS?

Originally posted here!

To select an HTML element tag directly inside the CSS stylesheet, you can use the name of the HTML element tag directly in the CSS. These selectors are also called type selectors in CSS.

For example, consider 2 p (paragragh) tags in HTML like this,

<!-- Paragragh tags-->
<p>Hello World!</p>
<p>Hello Devs</p>
Enter fullscreen mode Exit fullscreen mode

Now in the CSS stylesheet, we can select the p HTML tags by wrting the name of the HTML tag in the CSS like this,

/* Select p tags from HTML */
p {
  /* Your styles */
}
Enter fullscreen mode Exit fullscreen mode

Like this, you can select any valid HTML element tags.

Now, Let's set the color of all the text in the p tags to red like this,

/* Select p tags from HTML */
p {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

This rule will set all the p HTML tags text to have the color red.

The output will look like this,

paragragh HTML tags having red color

See the above code live in JSBin.

That's all 😃!

Feel free to share if you found this useful 😃.


Discussion (0)