1
00:00:00,880 --> 00:00:05,210
You might have seen the term 
inheritance used regarding certain 

2
00:00:05,210 --> 00:00:11,811
CSS properties. Inherited properties 
in CSS means that an HTML element's 

3
00:00:11,811 --> 00:00:16,930
style values are copied from its 
parent or containing element.

4
00:00:18,060 --> 00:00:24,570
A good example of inheritance in a CSS
property is with the color property.

5
00:00:24,570 --> 00:00:27,442
If a color value is applied 
to an element,

6
00:00:27,442 --> 00:00:31,390
any child of that element will
inherit that color value.

7
00:00:32,460 --> 00:00:36,976
The one exception is the text
color in links since

8
00:00:36,976 --> 00:00:41,725
browsers assign specific 
color styles for those.

9
00:00:41,725 --> 00:00:44,357
For example, in our CSS,

10
00:00:44,357 --> 00:00:49,394
we have our paragraph set
to a text color of olive.

11
00:00:49,394 --> 00:00:51,334
In our HTML, where I have

12
00:00:51,334 --> 00:00:56,080
the name of Developer Diane's
field of study at Treehouse,

13
00:00:56,080 --> 00:01:00,358
let's make an edit to emphasize
the phrase "web development".

14
00:01:11,747 --> 00:01:17,809
Note that we don't specify the color
of the em element anywhere in the CSS.

15
00:01:17,809 --> 00:01:23,630
How did the browser know to use olive
to color the words "web development"?

16
00:01:25,810 --> 00:01:30,450
That's because text color
is an inherited property.

17
00:01:30,450 --> 00:01:35,199
The element inherits the text color
from the parent element, 

18
00:01:35,199 --> 00:01:41,936
the paragraph. Not all CSS properties 
are inherited, however.

19
00:01:41,936 --> 00:01:44,977
Non-inherited properties
are properties that

20
00:01:44,977 --> 00:01:49,880
default to the initial value regardless
of the styles assigned to the parent.

21
00:01:51,800 --> 00:01:56,060
For instance, let's look at the 
section with an ID of education.

22
00:01:57,090 --> 00:02:02,860
We used a CSS rule to set a 3px
red border around the section.

23
00:02:04,040 --> 00:02:08,604
However, the h2 and ul elements 
found inside the education

24
00:02:08,604 --> 00:02:13,540
section don't each have their
own individual border, do they?

25
00:02:14,550 --> 00:02:18,860
That's because border is a 
non-inherited property. So the

26
00:02:18,860 --> 00:02:24,360
h2 and ul default to their initial
value of having no border at all.

27
00:02:26,130 --> 00:02:30,671
I've included an article from
Sitepoint on CSS inheritance that

28
00:02:30,671 --> 00:02:34,610
includes a list of
inherited CSS properties.

29
00:02:34,610 --> 00:02:38,900
Anything not on this list will
default to the initial value.