CSS#3 The All Property


CSS 3 the all property is use to reset the element to its initial sate. this change is not effect on unicode-bidi properties .This property have three value which below i cover up very well.
It is a "shorthand" property which give ability to control the value of every CSS property in a single declaration,and it has no sub-properties. In this lesson we will show you how actually the all:; property of CSS3 works.

All property have three values first is initial second one is inherit and the last one unset. below
i mention all property values have a look. 

Values

Initial : its change and resets all element properties to their default values stats.

Inherit : is use to inherit the all styling of from its parent element's ,its inherit style deeply which not normally inheritable.

Unset: value is use to pass inherit value from child element to parent element . when there is no inheritable value available then it will automatically set to its initial value .

Make sure there are some of the properties which did not have any initial default value  like color and font-family etc. when all property initial or unset value is applied  then user agent will set default value as the initial value for these properties.



all: Initial;


 .content {
 width: 100%;
 padding: 2em;
 border: 1px solid #ccc;
 font-size:22px;
 background: #fff;
 box-shadow: 0px 0px 19px #B3B3B3;
 text-align:center;
 }
 .box1{
 all:initial;
 }
Initial

all: Inherit;


     .content {
 width: 100%;
 padding: 2em;
 border: 1px solid #ccc;
 font-size:22px;
 background: #fff;
 box-shadow: 0px 0px 19px #B3B3B3;
 text-align:center;
 }
 .box2{
 all: inherit;
 }
Inherit

all: Unset;


     .content {
 width: 100%;
 padding: 2em;
 border: 1px solid #ccc;
 font-size:22px;
 background: #fff;
 box-shadow: 0px 0px 19px #B3B3B3;
 text-align:center;
 }
 .box3{
 all: unset;
 }
Unset
You can also checkout  CSS 3 align-content and align-item properties .

If you found this post helpful then please share it and you can also follow us on twitter and like our facebook page.thank u:)

Browser Support

Firefox
Chrome
Opera
Safari
27
37
24
NOT

Comments