CSS Element Selector | CSS Tag Selector

February 27th, 2019

Nilesh Chaurasia

CSS Element Selector

CSS Element Selector is used to apply the CSS Style to the HTML Elements.
It is also known as CSS Tag Selector.
CSS Tag Selector design specification apply to all the HTML Element of same type.
Suppose you have specified design specification for p element, than this style apply to all the HTML p Element on the page.

It is mainly used to apply CSS to the particular HTML Elements. For Example you can set the design CSS to the h1 element and than that CSS applies to all the h1 element on that Web Page.

Example – Apply CSS Style with Tag Selector to an HTML Element.

<!DOCTYPE html>
<html>
  <head>
    <style>
     p{
       color: green;
       text-align: center;
       }
	</style>   
  </head>	   
  <body>
     <p>This is a paragraph</p>
     <p>This is an another paragraph</p>	 
  </body>
</html>

The above syntax shows that how can you apply CSS to the HTML Element. Here p is a selector. And through this p you can apply the CSS Style to the HTML Element in that Web Page.

CSS Element Selector — Fig.1 – Application of p Tag Selector

Caution: The Tag Selector is need to be valid HTML Tag. Just Like, if you specify CSS Style for h7 CSS than it will not work, because h7 is not a valid HTML Tag.

If you want to apply CSS Style to the different HTML Element than you can also apply.

Example – Use of Tag Selector to different HTML Elements

<!DOCTYPE html>
<html>
  <head>
    <style>
     h1, h2, p{
       color: green;
       text-align: center;
       }
	</style>   
  </head>	   
  <body>
     <h1>This is a heading</h1>
     <p>This is a paragraph</p>	
     <h2>This is a second level heading.</h2> 	 
  </body>
</html>

The above syntax is used to apply the CSS to the group of HTML Elemets and below shows that how it will appealing.