all Property

Written by

in

CSS all property resets all properties of an element, with the exception of unicode bidi, direction and CSS custom properties. It can reset properties to their original or inherited values or to the values explicitly defined in another cascade layer or in the stylesheet origin.

Syntax

all: initial | inherit | unset;

Property Values

Value	Description
initial	It changes all the properties applied to an element or to its parent to their initial value.
inherit	It changes all the properties applied to an element or to its parent to their parent value.
unset	It changes all the properties applied to the element or the element’s parent to their parent value if they are inheritable else to their initial value if not

Examples of CSS All Property

The following example explains the all property with different values.

All Property with Initial Value

To let an element’s properties be set to their default values assigned by the browser such that no defined styling is applicable to them, we use the initial value. This is shown in the following example.

Example

<!DOCTYPE html><html><head><style>
  html {
     font-size: 25px;
     color: lightcoral;
     font-style: italic;
  }
  #custom1 {
     background-color: #ecf0f1;
     color: #e74c3c;
  }
  #custom2 {
     all: initial;
  }   </style></head><body><h2>
  CSS all property   </h2><div id="custom1">
  See how this sentence changes!- 
  This is reference sentence   </div><br/><div id="custom2">
  See how this sentence changed. This sentence 
  is using initial value so it does not inherit
  anything from its parent element or html element,
  this is evident from the text style and color.
   </div></body></html>

All Property with Inherit Value

To let an element’s properties be set to the properties of the element’s parent or the html element then, we use the inherit value. The properties defined by the parent if present will be applied if not then the html element properties will be applied. This is shown in the following example.

Example

<!DOCTYPE html><html><head><style>
  html {
     font-size: 25px;
     color: lightcoral;
     font-style: italic;
  }
  #custom1 {
     background-color: lightgreen;
     font-weight: bold;
     padding: 10px;
     color: #e74c3c;
  }
  #custom2 {
     all: inherit;
  }   </style></head><body><h2>
  CSS all property   </h2><div id="custom1">
  See how this sentence changes!- 
  This is reference sentence   </div><br/><div id="custom2">
  See how this sentence changed. This sentence
  is using inherit value so it inherits the properties
  from its parent or from the html element, in this 
  case the html element. It has inherited font-size, 
  color and font-style.
   </div></body></html>

All Property with Unset Value

To let the properties of an element be obtained from its parent if present or from html element if absent or from the default values decided by the browser (behave like initial) in the absence of both then, we use unset value. This is shown in the following example.

Example

<!DOCTYPE html><html><head><style>
  .parent {
     color: purple;
     font-weight: bold;
     font-size: 20px;
     text-align: center;
     background-color: lightgrey;
  }
  .custom1 {
     font-weight: bold;
     padding: 10px;
  }
  .custom2 {
     all: unset;
  }   </style></head><body><h2>
  CSS all property   </h2><div class="parent"><div class="custom1">
     This sentence is using the 'unset' value and also
     has a parent, so it inherits the parent properties.
  &lt;/div&gt;&lt;/div&gt;&lt;br/&gt;&lt;div class="custom2"&gt;
  This sentence is also using the 'unset' value but it
  doesnt have a parent, so it follows the initial value
  getting default values.
   </div></body></html>

Comments

Leave a Reply Cancel reply

More posts