Inheritance

I thought the font-family style was inheritable, but my code doesn’t agree with it.

In the code below, the second p element is nested within an h3 element, yet it doesn’t inherit the font-family style of its parent element.

HTML code

Document

Let's see how this practice session goes

element 2

Here's a paragraph

This is a parent element

This is it's child element

CSS Code

.potato {
font-family: Helvetica;
background-color: rgb(22,47, 178);
color: orange;
padding: 20px;
border-radius: 30%;
margin: 100px;
border-color: palegreen;
border: 2px solid palegreen
}

.tomato {
border: 7px dotted red;
border-radius: 50%;
padding: 30px;
align-content: center;
width: 150px;
margin: 200px;
}

h3 {
background-color: palegreen;
font-family: ‘Times New Roman’, Times, serif;
}

Hello! Could you please post your code according to the formatting guide written in ->this<- post-so we can see the HTML as well?

Hi codeneutrino,

Sorry, thought this website’s text editor for HTML code doesn’t actually produce the rendered result like it would with an HTML file.

Here’s the HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="Practice_boxing_model_properties.css" type="text/css" rel="stylesheet">
</head>
<body>
    <h1><span class="potato">Let's see how this practice session goes</span></h1>
    <h2>element 2</h2>
        <p><span class="tomato">Here's a paragraph</span></p>
    <h3>This is a parent element</h3>
        <p>This is it's child element</p>
</body>
</html>

Hello! <p> and <h1> (all of the heading tags, actually), can’t be parents/children to another-they are independent tags of one another; you could say siblings.


An element (say el1) is only a child of another element(say el2) if el1 comes between the opening and closing tags of el2:

<div>
<p></p><!--This is a child element-->
</div>
<p></p>
<h2></h2><!--This is not a child element-->
4 Likes

Ah ok, makes sense, thank you very much!

I think I was confusing indentation as the nesting prerequesite, when in fact its just for code clarity.

Thanks codeneutrino!

1 Like