systematic-css

Optimise the default layout for mobile devices. Then progressively enhance for largerviewports (and printers, too, if you need to support those). Write media queries immediatelyafter the selectors that they modify..BANNER {background: hsl(0, 0%, 93%);padding: 2rem 0;}@media screen and (min-width: 56.25rem) {.BANNER { padding: 4rem 0; }}@media screen and (min-width: 75rem) {}.BANNER {padding: 6rem 0;position: absolute;right: 0;top: 0;width: 250px;}@media print {.BANNER { display: none; }}Later the layout sections will be populated with content. Some of that content will be markedup as stand-alone HTML elements, and some of it may be encapsulated in widget structures.These constructs are covered in the next two chapters. The layout rulesets are concernedexclusively with establishing a basic visual structure in which to place that content. Layoutsections may be positioned and they may be given backgrounds, borders, padding and margins.But layout classes must never set any typographic styles, or alter the presentation of formcontrols, or try to influence the presentation of anything that may be placed within any sectionof the layout.The aim is to have the freedom to move content around in the layout without needing tomake changes to the CSS.To this end, do not set any inheritable properties via layout classes. Apply only noninheritableproperties to layout sections. They will not cascade down and affect nested content.Non-inheritable properties include:Layout 35