CSS - ID Selector


CSS - ID Selector

  • The id selector is used to specify a style for a single, unique element.
  • Id selector is represented by ‘#’ symbol (# Id Name)
  • Id Selectors are used as a base for descendant selectors.

Syntax :

#para1 {
        text-align: center;
        color: red;
       }


Sample Code :

<!DOCTYPE html>
<html>
<head>
   <style>
     #para1 
        {
          text-align: center;
          color: blue;
      	}
    </style> 
</head>
  <body>
    <p id="para1"><b>Wikitechy is enhanced for learning, testing, and training</b>
    </p> 
    <p>Normal Paragraph</p>
  </body>
</html>


Code Explanation :


    In this above example, id selector is declared as “#para1” which is the id attribute value being called by hash symbol(#) followed by the id name.

    Using text-align property we have assigned the text (“Wikitechy is enhanced for learning, testing, and training“) to display in the center of the web page.
    color:blue; defines the text (“Wikitechy is enhanced for learning, testing, and training“)  to be displayed in blue color .

    <p id="para1"> using the id name (#para1) , the styles declared in the para id will be applied to that paragraph with its font style as Bold.

Output :


    The text “Wikitechy is enhanced for learning, testing, and training“ will be displayed in blue color with its alignment as center.

    This is just a normal paragraph which does not have any css styles, so simply it displays the text “Normal Paragraph”.