От вашего вопроса у меня сложилось впечатление, что вы думаете, что есть некоторые OO (объектно-ориентированные) логики c, прикрепленные к HTML и CSS. Это не вариант. Признано, что дочерние элементы могут «наследовать» от своих родителей, но только при конкретном присвоении значения inherit их атрибутам, таким как .someSelector { background-color: inherit }. Это будет единственная ссылка на «OOP», которую вы можете сделать. Потерять мысль, полностью.
Обязательное чтение w3school: CSS Ссылка селектора . Получите хорошее представление о CSS классах, селекторах и специфике селекторов, почему они используются, когда и как они используются. Html знание включает в себя значение вложенных родительских и дочерних конструкций.
В вашем случае вам понадобятся два отдельных родственных контейнера внутри вашего документа parent контейнер: <body>.
- a
.header родительский контейнер (черный фон) с внутренним пространством 10px, содержащий h1 и p дочерний elements - a
.content родительский контейнер (белый фон) с внутренним пространством 10px, содержащий p child element
Чтобы полностью выровнять оба контейнера по сторонам документа, сначала необходимо потерять html значение по умолчанию <body>, равное 8 пикселей: body { margin: 0 }
Затем создать два контейнера внутри <body> (заголовок и содержимое) и назначьте интервалы и цвета, как показано ниже.
Дружеский совет, НЕ меняйте атрибут display элементов, если вы не знаете, как его использовать (согласно вашему двойному display назначению в body {...}). Макет Flexbox великолепен, когда вы знаете, о чем он. Html по умолчанию display: flex ориентировано на row, вам нужен column ориентированный FBL.
body {
display: flex;
flex-direction: column;
font-family: sheepman, serif;
/* font-weight: 400; /* html default */
/* font-style: normal; /* html default */
margin: 0;
}
.header {
background-color: black;
color: white;
/* never again use PX (search online "MDN units")*/
padding: 0.625rem /* rem is px-value/16 => 10px/16 */
}
h1 {
font-size: 3.125rem /* 50px/16 */
}
.content {
/* already has html default colors black on white */
padding: 0.625rem /* 10px/16 */
}
<div class="header">
<h1>Occulture</h1>
<p class="Phead">Sign up to learn more! <br> <br>
<input type="email" name="email" placeholder="email" />
<input type="submit" value="Subscribe" /></p>
</div>
<div class="content">
<p>This is a simple test Paragraph to see if this will inherit the body tag elements </p>
</div>