This is a very useful value to have since some elements, like buttons, have a specific font-family set in the browser style sheet, but you most likely want to inherit that font-family to match the rest of your site. If I set the border property to inherit on the child, though, then that child will also have a 1px solid black border. If the parent is inheriting that property then it will continue to go up the chain until it finally finds a specific value set on one of the parent's.įor example, if I give a div a 1px solid black border and put a child inside that div then we know the border will only show up on the parent div and not the child. By setting a CSS property's value to inherit you are saying that you want the value of the CSS property to be equal to the value of it's parent's property. This is why you can set the color of a div to green and have all that div's children also have green text. For example, font-family, color, and many other properties inherit their values by default.
In CSS many properties inherit values from their parent. Tying all this back to initial, we can see that the value of initial is great to use if you really want to remove all browser specific styles. This means that browser styles will override the default/initial styles and your custom styles will override all browser styles. These three styles are then combined using specificity and cascade rules where the default/initial styles are the least specific, followed by browser styles, followed by custom styles. This can be anything from inline CSS to a CSS stylesheet you link in the head of the HTML. They have two separate browser stylesheets.įinally, we have custom styles which are any styles that you write or include on the page. This is why a button in Safari looks much different than a button in Chrome. These can easily be found by checking the documentation for any CSS property on MDN.īrowser styles are the specific styles that each browser assigns to elements such as buttons, block quotes, headings, etc. The default or initial styles are just the default values of every CSS property defined in the CSS specifications. In order to understand a bit more how this works we need to talk about the three layers of CSS, default/initial styles, browser styles, and custom styles. This means if you set a div's display property to initial then it will become an inline element. The initial value for the display property in CSS is actually inline.
Everyone knows that a div is a display block element, but that display block value actually comes from the default styles of the browser. You may be confused when using this, though, because the initial CSS value for properties is not always what you think it is since it often differs from the browser's default styles. This value just resets the CSS property to its initial value. The easiest CSS value to understand is initial.
0 kommentar(er)
