Introduction to CSS root

CSS root is a selector that is said to be the topmost element of the web page within the HTML. This element is available within the “structural pseudo-class” library, we can use this for style the topmost parent content from the child content. In CSS, the root element is playing a crucial role in selecting HTML elements. The selector is mainly used for refer <HTML> element of any web page. In an, any HTML document file HTML element will always the highest level parent. This makes us predict the behavior of the root element easily. CSS is a page styling language that can be used for other document formats also, for example XML and SVG. The root selector pseudo-class can refer to different elements in such cases. So we can conclude that the root element always the topmost element of the HTML page. Real-Time Scenario: When we want to style the entire page into different background colors and middle portion of div tags with different colors then we go for root selector.

Note: If we apply any settings to either “body” tag or “root” tag then both will result in root is on top of the body tag.

Syntax

This root selector is used to perform root-level CSS styles like the background color.

:root {
//CSS styles
}

Examples to Implement CSS root

Here are some examples mentioned:

Example #1

Code:

<!DOCTYPE html>
<html>
<head>
<style>
:root {
background-color: purple;
padding: 100px;
}
body {
background-color: white;
padding: 50px;
font-size: 22px;
color: brown;
}
h1
{
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>Introduction to root selector</h1>
<p> CSS root is a selector which is said to be top most element of the web page within the HTML. This CSS root element is available within the “structural pseudo class” library, we can use this for style the top most parent content from the child content. In CSS the root element is really play crucial role for selecting HTML element.  The CSS :root selector is mainly used for refer <HTML> element of any web page. In an any HTML document file HTML element will always the highest level parent. Which makes us to predict the behavior of root element easily. As CSS is page styling language that can be used for other document formats also, for example XML and SVG. The root selector pseudo class can refer to different elements in such cases. So we can conclude that root element always the top most element of the HTML page.<p>
</body>
</html>

Output:

Explanation: As you can see root selector applies styles to the topmost element of the HTML. The body element applies the CSS styles for just below the portion of the root selector.

Example #2

Code:

<!DOCTYPE html>
<html>
<head>
<!--CSS Styles-->
<style>
:root { /*root selector top most element styles*/
background-color: red;
transition: background-color .6s;
padding: 140px;
}
:root:hover {
background-color: blue;
}
body {/*body for just below of the root element styles*/
background-color: lightgreen;
padding: 50px;
font-size: 22px;
color: navy;
}
h1
{
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>Introduction to root selector</h1>
<p> CSS root is a selector which is said to be top most element of the web page within the HTML. This CSS root element is available within the “structural pseudo class” library, we can use this for style the top most parent content from the child content. In CSS the root element is really play crucial role for selecting HTML element. .  The CSS :root selector is mainly used for refer <HTML> element of any web page. In an any HTML document file HTML element will always the highest level parent. Which makes us to predict the behavior of root element easily. As CSS is page styling language that can be used for other document formats also, for example XML and SVG. The root selector pseudo class can refer to different elements in such cases. So we can conclude that root element always the top most element of the HTML page.<p>
</body>
</html>

Output:

Explanation: As you can see in the above root background color is red initially and when we hover the mouse on to red color area then the red color becomes blue up to 0.6 seconds vice versa. The body element applies the CSS styles for just below the portion of the root selector.

Example #3

Code:

<!DOCTYPE html>
<html>
<head>
<!--CSS Styles-->
<style>
:root { /*root selector top most element styles*/
background-color: fuchsia;
padding: 140px;
}
:root::before {
content: "This is root selecot area. I am just top element of the body.";
color: blue;
font-weight: bold;
font-size: 30px;
/* ... */
}
body {/*body for just below of the root element styles*/
background-color: lightpink;
padding: 50px;
font-size: 22px;
color: red;
}
h1
{
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>Introduction to root selector</h1>
<p> CSS root is a selector which is said to be top most element of the web page within the HTML. This CSS root element is available within the “structural pseudo class” library, we can use this for style the top most parent content from the child content. In CSS the root element is really play crucial role for selecting HTML element. .  The CSS :root selector is mainly used for refer <HTML> element of any web page. In an any HTML document file HTML element will always the highest level parent. Which makes us to predict the behavior of root element easily. As CSS is page styling language that can be used for other document formats also, for example XML and SVG. The root selector pseudo class can refer to different elements in such cases. So we can conclude that root element always the top most element of the HTML page.<p>
</body>
</html>

Output:

Explanation: As you can see we can see separate text in the root selector and body area. This can conclude we root is the topmost element in HTML.