CSS inheritance

Now that you've seen a bunch of

properties, I want to point out something that

you might have already figured out yourself

already. A concept called inheritance;

some CSS properties are inherited, which

means they get passed down to all the

children tags underneath them. For

example, the font family is an inherited

property. Just by setting it on the body

tag, we can see it get picked up

automatically by the children tags, like

the h1, and paragraphs. It only stops

taking effect once another rule steps in.

Like--this rule--changing the font family

of all the headings to cursive. Another

inherited property is color. If we set it

on body, we can see it trickle down to

all the tags inside body, until other

rules override it. Like--this rule here--

setting the h2's to green. Other

inherited properties that we've seen are

font weight, font size, font style, line

height, text align--actually, a lot of

the ones we've seen are inherited, because

they have to do with text styling--and

browsers figured that web designers would

want text styles to trickle down, so they

don't have to keep defining the styles at

each level. Going forward, though, most of

the new properties you see won't be

inherited. If you're not sure if a

property is inherited or not, either stick

it on the body tag, and see what happens,

or look up the property on the internet,

and read the documentation about it.