CSS root

The <html> element is always the root element. The :root is similar to the HTML selector because both of them target the same element, but the :root selector has a higher specificity.

Syntax:

:root { 
   // CSS property 
}

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>:root selector</title>
    <style> 
      :root {
         background: pink;
         color: black;
         text-align: center;
             }
    </style>
  </head>
  <body>
    <h1>Welcome to the I2tutorials</h1>
    <h2>Example of :root selector</h2>
  </body>
</html>

OUTPUT:

CSS root

Example:

Similar properties in HTML selector as well as in :root selector.

<!DOCTYPE html>
<html>
  <head>
    <title>:root selector</title>
    <style> 
      :root {
         background-color: pink;
         color: black;
         text-align: center;
             }
      html{
      background-color: red;
      color: white;
      font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to the I2tutorials</h1>
    <h2>Example of :root selector and html selector</h2>
  </body>
</html>

OUTPUT:

CSS root