It’s easy to overlook the cascading features of style-sheets. Most designers/developers are aware of the inherit keyword but there are a few new inheritance features in CSS3 you may not be aware of…

css3-inheritance-tips-and-tricks-inherit-initial-unset

property: inherit;

The inherit keyword means “use whatever value is assigned to my parent”. If no value was explicitly defined on the parent element, the browser works up the DOM tree until the property is found. Ultimately, it ends at the browser default, e.g.

#myparent{
    margin: 10px;
    border: 1px solid #000;
}

/* use the same border as the parent */
#myparent p{
    border: inherit;
}

In practice, it’s rarely necessary to use inherit. Many of the more useful properties automatically cascade down, e.g. fonts, font sizes, colors, etc.

inherit is safe to use. It’s not supported in IE6 and IE7 but your design is unlikely to break without it.

property: initial;

Ooo, a shiny new CSS3 keyword! initial sets a property back to its starting value — the default defined by the browser, e.g.

body{
    font-size: 0.5em;
}

/* reset paragraphs to 1em */
p{
    font-size: initial;
}

Is it useful? Potentially, although you can’t necessarily depend on all browsers having the same default value.

Support is reasonable — Chrome, Firefox, Safari and Opera 15+. It won’t work in IE, but I’m struggling to think of a situation where that would be a catastrophic problem.

property: unset;

This is a slightly unusual one. When unset is used, it acts as if it were inherit when an inherited value is available. If it can’t find one — for example, it’s a non-inherited property such as box-shadow— it acts like initial and applies the default browser value.

Admittedly, I can’t think of many uses for unset and it has little support at this time.

all: [ inherit | initial | unset ];

Finally, all is a property rather than a value. You can assign either inheritinitial or unset to affect all properties, e.g. to reset every CSS property back to the browser default:

#mywidget{
    all: initial;
}

This could be an alternative to scoped CSS if you’re adding third party widgets to a page and want to avoid stylesheet clashing.

Unfortunately, you won’t be able to depend on consistent cross-browser support for some time yet, but it could be a useful property to watch.

You can support this website by sharing. Thank you!DhirajCSS - Cascading Style SheetsHTMLJAVASCRIPTjQueryMobile Web Technologyadvance web technology,configurable settings,core code,CSS,CSS 3,CSS 4,CSS code,css document,CSS framework,css hacks,css initial,css initial value,css namespaces,css opacity,CSS properties,css properties and values,css properties not inherited,css property,css property value initial,css reset,css rules,css selector,css selectors,CSS technique,css text-shadow,CSS trick,css3,css3 box shadow,inherit css,inherit css class,inherit css property,inherit css style,inheritance,manipulating CSS,mobile,mobile CSS,optimized CSS,optimizing the CSS file,page elements,paragraph text,style inherit,style reset,style-sheet,style-sheets,stylesheet,technology,transparent background image,unset css,unset css jquery,unset css property,unset css valueIt’s easy to overlook the cascading features of style-sheets. Most designers/developers are aware of the inherit keyword but there are a few new inheritance features in CSS3 you may not be aware of… property: inherit; The inherit keyword means “use whatever value is assigned to my parent”. If no value was explicitly defined on the parent element, the...Web design / development tutorials covering HTML, jQuery & CSS. Cool tips and tricks of web designing using HTML5, CSS3 & jQuery Library. Latest updates in responsive or mobile web technology.