header и footer к соответствующим тегам.Стили непосредственно соответствующих элементов всегда предпочитаются унаследованным стилям, независимо от специфичности унаследованного правила.
pink из элементов вложенных в блоки header и footer 1) Правильно ли я понял, что в статье говорится про position: absolute и position: relative?
position: absolute и position: relative являются частным случаем использования обертки, например:.some-wrapper {
position: relative;
}
.some {
position: absolute;
}<div class="some-wrapper">
<div class="some">content</div>
</div>Элемент <div> следует использовать только в том случае, если никакой другой семантический элемент (такой как <article> или <nav>) не подходит.
footer, лучше использовать его для сохранения семантики, вместо div. style, изображения сконвертировать в base64 и заменить в соответствующих атрибутах src и значениях свойств background-*<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>example</title>
<style>
.bg-img{
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==");
background-repeat: no-repeat;
padding-top: 10px;
}
</style>
</head>
<body>
<div>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
<p>Изображение красной точки в base64 (img src)</p>
</div>
<div class="bg-img">Изображение красной точки в base64 (background-image)</div>
</body>
</html>If you want to get full control, you should consider using a library with good facilities for styling form widgets, or try rolling your own dropdown menu using non-semantic elements, JavaScript, and WAI-ARIA to provide semantics.