Common Property Value

Next ❯all Property

Values which are common in all CSS/CSS3 properties also called as 'Global values'

  • turned_in_notCommon Properties
    • initial
    • inherit
    • unset


Initial

It sets specific property to its default value


Hello friends , Welcome back 
h1 { color:red; }
i { color:initial; }
Initialsubject
Initialclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
h1 { color:red; }
i { color:initial; }
</style>
</head>
<body>
  <h1 style="text-align:center;">Hello <i>friends</i> , Welcome <i>back</i></h1>
</body>
</html>

Hello friends , Welcome back 

h1 {color:red; }
Without Initialsubject
Without Initialclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
h1 { color:red; }
</style>
</head>
<body>
  <h1 style="text-align:center;">Hello <i>friends</i> , Welcome <i>back</i></h1>
</body>
</html>


Inherit

It sets specific property value of a child element from its parent element


Hello friends , Welcome back

Hello friends , Welcome back

Here, above all the child italic elements color is green except the one which is declared inside <p> element. Since, italic elements inside <p> inherits the color from its parent <p>

h1 {color:red; }
i {color:green;}
p { color:orange;}
p i {color:inherit;}
Inheritsubject
Inheritclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
h1 {color:red; }
i {color:green; }
p { color:orange; }
p i {color:inherit; }
</style>
</head>
<body>
  <h1 style="text-align:center;">Hello <i>friends </i>, Welcome <i>back</i> </h1>
  <p style="text-align:center;">Hello <i>friends </i>, Welcome <i>back</i> </p>
</body>
</html>
  • Remember! If a child element inherits some specific property and is not found in his direct parent element then it will check for that specific property in parent's parent element, again not found then it will check on further in next grand parent element and so on


unset

It act as a inherit if some child element unset some specific property else act as initial


Hello friends , Welcome back

Hello friends , Welcome back

Here, above all the child italic elements color is green except the one which is declared inside <p> element. Since, italic elements inside <p> inherits the color from its parent <p>

h1 {color:red; }
i {color:green;}
p { color:orange;}
p i {color:unset;}
unset as inheritsubject
unset as inheritclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
h1 {color:red; }
i {color:green; }
p { color:orange; }
p i {color:unset; }
</style>
</head>
<body>
  <h1 style="text-align:center;">Hello <i>friends </i>, Welcome <i>back</i> </h1>
  <p style="text-align:center;">Hello <i>friends </i>, Welcome <i>back</i> </p>
</body>
</html>

Hello friends , Welcome back
Only italic, Not inside any parent element

Here, above all italic elements color is red except the one with no parent (Well, technically it has parent <body> but we didn't declare any color property to it, so it sets italic element color to default value)


h1 {color:red; }
i {color:unset;}
unset as initialsubject
unset as initialclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
h1 {color:red; }
i {color:unset; }
</style>
</head>
<body>
  <h1>Hello <i>friends </i>, Welcome <i>back</i> </h1>
  <i>Only italic, Not inside any parent element</i>
</body>
</html>

  • all Property
❮ Prev Grid Extra Properties
Next ❯all Property
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯