CSS Element Selector | CSS Tag Selector

Ad Banner Image

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.

CSS Tag Selector
Fig.1 – CSS Tag Selector for h1, p and h2 tag

Note: You can apply CSS Style to multiple tag at the same time by specifying tag list separated by the comma.

Sponsor Banner
You can leave a response, or trackback from your own site.
Leave a Reply to the article


Learn CSS

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!

Powered by Wordpress