inherit<\/code>. Before we go straight into that, know the following:<\/p>\nEach element in HTML is part of a ‘tree’, and every element (except the initial html<\/code> element) has a parent element that encloses it. <\/p>\nWhatever styles applied to the parent element can be applied to the elements inside it if the properties are inherited.<\/p>\n
Below, we’re going to have a look at several cases of inheritance property.
\n
\n[ulp id=’nAkUl5IbAjqlXSla’]<\/p>\n
1. Prerequisites <\/h2>\n
Create a html<\/code> document with the basic syntax inside like this:<\/p>\n\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>CSS Inheritance Property Value<\/title>\r\n<\/head>\r\n<body>\r\n\r\n\t<!-- STYLE SECTION -->\r\n\t<style type=\"text\/css\">\r\n\r\n \t<\/style>\r\n\r\n\t<!-- HTML SECTION -->\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nIn the html section, we’ll add some elements to show their relation to other elements and understand when they automatically inherit property values from their parents and when not. <\/p>\n
Lets first see a basic application of the inherit<\/code> property value.<\/p>\n 2. Basic Application of Inherit <\/h2>\n
The inherit property value is at some cases automatically applied to child elements, and at other cases needs to be applied manually.<\/p>\n
2.1 Automatic Inheritance <\/h3>\n
I always tend to give the body<\/code> element a custom font-family so that all elements have the same font applied. <\/p>\nIn other words, all elements inherit<\/code> the font-family property from the body parent.<\/p>\nLook at the code below:<\/p>\n
\r\n<!-- HTML SECTION -->\r\n\t\r\n<div class=\"parent\"> This is a <span>parent<\/span> element.\r\n\r\n<div class=\"child\">This is a <span>child<\/span> element.\r\n\r\n<p>This is a <a href=\"#\">link<\/a> inside a paragraph<\/p>\r\n\r\n<\/div><!-- end child element -->\r\n<\/div><!-- end parent element -->\r\n<\/pre>\nI have added a parent division and inside that two children, another div and a paragraph.<\/p>\n
The classes given are so that we can give attributes to parent and see the results to children.<\/p>\n
Now below look at the some initial properties I’ve given to these elements:<\/p>\n
\r\n<!-- STYLE SECTION -->\r\n\r\n<style type=\"text\/css\">\r\n\r\nbody {\r\n\tfont-family: \"Aller\",\"sans-serif\";\r\n}\r\n\r\n.parent {\r\n\twidth: 15em;\r\n\theight: 5em;\r\n\tcolor: gray;\r\n\tfont-weight: bold;\r\n\tfont-size: 2em;\r\n\tborder: 0.1em solid red;\r\n}\r\n\r\n.parent span {\r\n\tcolor: green;\r\n}\r\n\r\n<\/style>\r\n<\/pre>\nNow to see what what properties have been inherited look at the browser view:
\n![\"Initial](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/inherit1.jpg\")
<\/a>Initial Test on Inheritance<\/figcaption><\/figure><\/p>\nSeen this result, we can state that the following elements get inherited properties automatically:<\/p>\n
1. All elements inherit<\/code> the font-family<\/code> property from a higher level parent, which is body.
\n Notice all three lines have the same font applied.<\/p>\n2. All child elements inherit<\/code> the color<\/code> (font-color) from the parent element.
\n Notice all the lines have the same gray color applied (except span and link).<\/p>\n3. The parent span<\/code> element is set to have a green color, but also the child span gets a green font-color.
\n So the child inherits from parent automatically span elements too.<\/p>\nThink everything is inherited?<\/p>\n
The a<\/code> anchor element has not been styled, but it shows in blue and underlined. That’s because these two properties are set to be default ones for all anchor tags over the page.<\/p>\nThe link did not inherit the color from its parent element, because it has a different color (blue). Look at the border. It has only been applied to the parent element, and it shows only there. That’s why we sometimes need to apply inheritance manually to make these element fit the desired view.<\/p>\n
2.1 Forced\/Applied Inheritance <\/h3>\n
Simple as that, refer to the .child<\/code> class and inherit the border<\/code> for the child and color<\/code> property from parent for the link:<\/p>\n\r\n.parent a {\t\t\t\t\/* you can refer even to the child class *\/\r\n\tcolor: inherit;\t\t\/* inherited color from the parent class *\/\r\n}\r\n\r\n.child {\t\t\t\t\t\r\n\tborder: inherit;\t\/* inherited the border attributes to child and elements inside *\/\r\n}\r\n<\/pre>\nThe browser view:
\n![\"Inherit](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/inherit2.jpg\")
<\/a>Inherit Value Applied to Color and Border<\/figcaption><\/figure><\/p>\nNotice that:<\/p>\n
1. The link became the same color as the parent<\/strong> (its parent can be considered both the parent class element and the child class element, becuase the paragraph is nested inside the child element).<\/p>\n2. The border attributes got applied to the child element which contains another element inside, that’s why you see the second smaller red border wrapping both the second and third line (child and paragraph elements).<\/p>\n
That was a basic application of the inherit property value. Now let’s see other cases and examples.<\/p>\n
3. Cases and Examples <\/h2>\n
Here we look at some essential cases and examples where we can use the inherit<\/code> property value.<\/p>\n 3.1 Size and Background Inheritance <\/h3>\n
Change the html code to accommodate the following image and text elements:<\/p>\n
\r\n<div class=\"parent-image\">\r\n<h4>Everything you can imagine is real.<br>-The Parent Image<\/h4>\r\n\r\n<div class=\"child-image\">\r\n<h4>Glad to have looked after you.<br>-The Child Image<\/h4>\t\r\n\r\n<\/div><!-- end child image -->\r\n<\/div><!-- end parent image -->\r\n<\/pre>\nand the css code accordingly:<\/p>\n
\r\n.parent-image {\r\n\twidth: 30em;\r\n\theight: 30em;\r\n\tbackground-image: url(\"images\/img1.jpg\");\r\n\tbackground-repeat: no-repeat;\r\n}\r\n\r\n.parent-image h4 {\r\n\tcolor: gray;\r\n\ttext-align: center;\r\n\tline-height: 1.5em;\t\t\/* vertically align text in the center *\/\r\n\tpadding: 1em;\t\t\t\/* just to differentiate the two elements *\/\r\n}\r\n\r\n.child-image {\r\n\twidth: inherit;\t\t\t\t\t\/* inherited width *\/\r\n\theight: inherit;\t\t\t\t\/* inherited height *\/\r\n\tbackground-image: inherit;\t\t\/* inherited background *\/\r\n\tbackground-repeat: inherit;\r\n}\r\n<\/pre>\nNow notice the child element inherits the background and size attributes from the parent:
\n![\"Size](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/inherit3.jpg\")
<\/a>Size and Background Values Inherited<\/figcaption><\/figure><\/p>\n 3.2 Inheritance Manipulations <\/h3>\n
You can also use the inherit property value to avoid inheritance from one level higher parent.<\/p>\n
Look at the codes below: <\/p>\n
HTML<\/p>\n
\r\n<!-- HTML SECTION -->\r\n\r\n<div class=\"parent\">\r\n\r\n<div class=\"child1\">\r\n<h3>A title here<\/h3>\r\n<p>A paragraph text here<\/p>\r\n<button>A button here<\/button>\r\n<\/div><!-- end child1 element -->\r\n\r\n<div class=\"child2\">\r\n<h3>A title here<\/h3>\r\n<p>A paragraph text here<\/p>\r\n<button>A button here<\/button>\r\n<\/div><!-- end child2 element -->\r\n\r\n<\/div><!-- end parent element -->\r\n<\/pre>\nCSS:<\/p>\n
\r\n.parent h3 {\r\n\tfont-variant: small-caps;\r\n\tcolor: red;\r\n}\r\n\r\n.parent p {\r\n\ttext-indent: 1em;\r\n\tcolor: blue;\r\n}\r\n\r\n.parent button {\r\n\tpadding: 1em 2em;\r\n\tbackground-color: gray;\r\n\tcolor: white;\r\n\tborder-radius: 0.5em;\r\n\tborder: 0.1em solid gray;\r\n}\r\n\r\n.child2 p {\t\t\t\t\t\t\/* declined inherited attributes from parent *\/\r\n\ttext-indent: inherit;\t\r\n\tcolor: inherit;\r\n}\r\n\r\n.child2 h3 {\t\t\t\t\t\/* declined inherited attributes from parent *\/\r\n\tfont-variant: inherit;\r\n\tcolor: inherit;\r\n}\r\n\r\n.child2 button {\t\t\t\t\/* declined inherited attributes from parent *\/\r\n\tbackground-color: inherit;\r\n\tcolor: inherit;\r\n}\r\n<\/pre>\nLets look at the browser view and then comment it:
\n![\"Vice-Versa](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/inherit4.jpg\")
<\/a>Vice-Versa Inheritance<\/figcaption><\/figure>
\nNotice that the parent attributes are applied to the first child but not to the second one.<\/p>\nThat is because we chose to inherit attributes when they were already automatically inherited.<\/p>\n
This case would result in an inheritance of the default attributes of a higher level parent (i.e body).<\/strong><\/p>\n 3.3 Tag and Location Inheritance<\/h3>\n
<\/p>\n
– Tag Inheritance<\/strong><\/p>\nTo explain this, take for example the button<\/code> tag of html:<\/p>\n<button>Button<\/button><\/pre>\nWith no styling at all, this element has already a view (attributes):
\n![\"Tag](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/inherit5.jpg\")
<\/a>Tag Inheritance – Button Example<\/figcaption><\/figure><\/p>\nYou can see it has a border<\/code>, a gradient background<\/code>, a hover<\/code> state ect.<\/p>\nThis is called tag inheritance, it means the element inherits default properties\/attributes pre set by the browser.<\/p>\n
Whenever you style a button, you just override the browser default properties for that element.
\n<\/p>\n
– Location Inheritance<\/strong><\/p>\nBasically, location inheritance means using the same attributes for a set of elements under the same tag\/class.<\/p>\n
For example, if you want to have all titles styled with a green color and bold you could just refer to the following:<\/p>\n
\r\n.title {\r\n\tcolor: green;\r\n\tfont-weight: bold;\r\n\tfont-size: 2em;\r\n}\r\n<\/pre>\nAnd apply this class to all elements wrapping a title like so:<\/p>\n
\r\n<div class=\"title\">2. Why us? <\/div>\r\n\r\n<p>Just a paragraph to show that this is not a title.<\/p>\r\n<ul>\r\n\t<li>First<\/li>\r\n\t<li>Second<\/li>\r\n\t<li>Third<\/li>\r\n<\/ul>\r\n\r\n<div class=\"title\">3. Help Center <\/div>\r\n<\/pre>\n