What Children Inherit in JavaScript

Elements sit inside other elements: a paragraph inside the note, the note inside main, everything inside body. Some properties are inherited. Set one on an element, and every element inside it gets the same value, unless it has a rule of its own. The text properties are inherited: color, font-family, line-height.

The box properties are not. border, padding and margin stay on the one element whose rule sets them. For example:

footer {
  font-style: italic;
  border-top: 1px solid #ccc;
}

The footer's paragraph gets font-style: italic too, inherited from footer. But only the footer has the border-top: the paragraph inside it gets no border. And an element's own rule always beats an inherited value: your h1 keeps #0a7, whatever color body sets.

The check prints where each value comes from. inherited, body means the element took it from its ancestor body. For the note, the note's paragraph and the footer's paragraph, it must print:

aside.side-note
  color: #333   <- inherited, body
  font-family: Arial, sans-serif   <- inherited, body
  line-height: 1.5   <- inherited, body
  border: 1px solid #ddd   <- .side-note
  padding: 8px   <- .side-note
p (in the note) and p (in the footer)
  color: #333   <- inherited, body
  font-family: Arial, sans-serif   <- inherited, body
  line-height: 1.5   <- inherited, body
  border: (not set)
  padding: (not set)

Your task: add color: #333 and line-height: 1.5 to the body rule, so every paragraph inherits them. Then give the note a box of its own: a .side-note rule with border: 1px solid #ddd and padding: 8px.

Assignment
Follow the Coding Tutorial to add two inherited text properties to body, and a border and padding to the note, in styles.css.

Hint
Text properties go on body once and reach every element. A border or padding on body would stay on body, so they go in the note's own rule, .side-note.