×

Inheritance [2/18]

In CSS, inheritance is the mechanism used to propagate the property values from parents to children.

Styles assigned to an element are inherited by all its descendants (i.e., nested elements), if not explicitly overridden. For example, you can set the font size and color for body, and all the nested elements will have this very size and color.

Inheritance helps you to reduce your style sheet size, but if you have many styles, it is not so easy to track which ancestor element has propagated a given property.


Do it
HTML
<!DOCTYPE html> <html> <head> <title>Inheritance</title> <meta charset="utf-8"> <link href="http://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css"> </head> <body> <h1>Heading</h1> <ul> <li>List item</li> <li>List item</li> <li>List item</li> </ul> <p>Text of the first paragraph.</p> <p>Text of the second paragraph.</p> </body> </html>
CSS
body { font-family: "PT Sans", sans-serif; } li { }
HTML Academy
  1. For all the text on the site, set the font color as color: #2980b9; and the font size as font-size: 12px;.
  2. Override the color of the list items with #1abc9c.
Theory Check Next