CSS id Selectors | HTML Style id

Ad Banner Image

CSS id selector

id selector is used to apply the CSS Style to an HTML element with the use of id attribute. CSS id selector is defined by the Hash(#) character.

id selector is used to apply the CSS Style to a unique HTML Element. The id of an HTML Element define unique in the Web Page

Example 1 – Style with CSS id selector

<!DOCTYPE html>
<html>
  <head>
    <style>
     #red{
        color: orange;
        background-color: olive;		
		}
	</style>   
  </head>	   
  <body>
     <h1 id="red">This is a heading</h1>
  </body>
</html> 

The above syntax shows that how can you apply the id CSS Style. Here an id with name is red create for the heading design specification.

css id Selector
Fig.1 – Shows how you can use id Selector for h1 tag.

Application of CSS id for Designing p HTML Elements

Their are different-different ways to apply the CSS Style through id selector.

Example 2 – Another example of CSS id to provide design specification for an HTML element

<!DOCTYPE html>
<html>
  <head>
    <style>
     #top {
		    color: yellow;
		    background-color: teal;	
             }
      #right {
	        color: olive;
			background-color: darksalmon;
	        }
	</style>   
  </head>	   
  <body>
     <p>This is a first paragraph<p>
     <p id="top">This is a second paragraph.</p>
     <p id="right">This is a third paragraph.</p>
  </body>
</html> 

Here three p elements and I want to have different look and feel in all the three p elements. In this example I have been provided CSS Style with two different id(top and right).

In the HTML part I have one p Element without any id, and browser will apply default design style to this p element.

In the HTML part I have one p Element with id attribute value as top, and browser will apply design style of top id to this p element.

In the HTML part I have one p Element with id attribute value as right, and browser will apply design style of right id to this p element.

HTML id CSS
Fig.2 – Designing Multiple p HTML elements with id Selector

Example 3 – You can apply an id to the different HTML Elements.

<!DOCTYPE html>
<html>
  <head>
    <style>
     #right {
	        color: olive;
			background-color: darksalmon;
	        }
	</style>   
  </head>	   
  <body>
     <h1 id="right">This is a heading.</h1>
     <p id="right">This is a paragraph.</p>
  </body>
</html> 

Here p and h1 two HTML elements and I want to have same look and feel in both HTML element.

In the HTML part I have one h1 Element with id attribute value as right, and browser will apply design style of right id to this h1 element.

In the HTML part I have one p Element with id attribute value as right, and browser will apply design style of right id to this p element.

CSS id Selectors Style id CSS id
Fig.2 -Same CSS id Selectors used in different HTML tags

Caution: class and id both selector work similar but the weightage of the id selector is more than class selector.

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