css inheritance properties and specificity with explanation

In this tutorial, discussed CSS inheritance, it works on a property by property basis.
therefore, When CSS defined properties applied to an element in a document, a property with the value ‘inherit’ will use the same value as the parent element has for that property.

For example, if the font-size property is declared in CSS Document for the BODY element, then font-size properties is automatically applied to all the elements present inside the BODY element.

the most advantages of CSS inheritance is that it saves your time in writing the repeated
code segment in documents for every single element that consists of the Web page.

.footer_design {
  background-color: #fff;
  color: #000;
}

.back_design{
  background-color: inherit;
  color: inherit;
  font-weight: 500;
}

.footer_design {

background-color: #fff;

color: #000;

}

.back_design{

background-color: inherit;

color: inherit;

font-weight: 500;

}

And see this in HTML fragment:

<div class="footer_design">
  <p class="back_design">
    Welcome! to tututorialscan for learning CSS properties.
  </p>
</div>

Welcome! to tututorialscan for learning CSS properties.

</p>

</div>

Automatically Inherited CSS Properties

font-weight	font-size	font-variant	font-style
font-family	font-stretch	font-size-adjust	font-variant-position
font-variant-caps	font-variant-caps	text-decoration	text-overflow
text-anchor	text-rendering	text-indent	text-shadow
text-transform	border-top	border-bottom	border-right
border-left	border-style	border-spacing	border-color
border-width	padding	padding-right	padding-left
padding-bottom	padding-top	margin	margin-bottom
margin-top	margin-right	margin-left	column-rule
color-profile	caption-side	counter-reset	cursor
column-fill	column-width	color-interpolation	counter-increment
column-span	column-gap	background	background-attachment
background-origin	background-repeat	background-color	background-size
backface-visibility	background-position	background-image	background-clip

Styles can be inherited from a parent

Some styles, like font-size, text-alignment, font family etc., are automatically inherited by child elements
from their parent element

Others properties style is not automatically inherited.

<div style="font-size:20px; font-family:arial; border:1px solid blue; padding:15px;">
<p>
Change the following settings to override their global values. Only changes (shown yellow)
are applied. Future changes to the global settings under
</p>
</div>

<p>

Change the following settings to override their global values. Only changes (shown yellow)

are applied. Future changes to the global settings under

</p>

</div>

Later styles over-rule earlier styles

first, define style property, and later define an alternative style property for the same thing (HTML Documents), the later definition over-rules the earlier one.

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		body {
background-color:green;
font-weight:800;
padding: 10px;
}
div {
background-color:#efefef;
font-weight:normal;
padding: 15px;
}
	</style>
</head>
<body>
<p>Tutorialscan is online web tutorial platform</p>
<div>
<p>Change the following settings to override their global values. Only changes 
(shown yellow) are applied. Future changes to the global settings under</p>
</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

body {

background-color:green;

font-weight:800;

padding: 10px;

}

div {

background-color:#efefef;

font-weight:normal;

padding: 15px;

}

</style>

</head>

<body>

<p>Tutorialscan is online web tutorial platform</p>

<div>

<p>Change the following settings to override their global values. Only changes

(shown yellow) are applied. Future changes to the global settings under</p>

</div>

</body>

</html>

css inheritance properties and specificity with explanation

Automatically Inherited CSS Properties

Styles can be inherited from a parent

Later styles over-rule earlier styles

Related Posts

About Author

admin