Global styles

CSS is global and functional.

By leveraging the “cascade”—the global scope of any stylesheet—we can define inherited properties for type and reset layout for block-level elements.


            * {
            /* inherit type properties */
            font-family: inherit;
            font-size: inherit;
            font-weight: inherit;
            line-height: inherit;
            color: inherit;
            
            /* reset block-level elements */
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            }

To write concise global styling for basic markup now becomes a simple task.


            html {
            /* system fonts */
            font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, “Helvetica Neue”, Helvetica, sans-serif;
            
            }
            
            body {
            /* primary type styles */
            font-size: 141.4%;
            font-weight: 400;
            line-height: 1.414;
            color: #333333;
            }
            
            @media (max-width: 33.3em) {
            body {
            /* scale down for small screens */
            font-size: 112.5%;
            }
            }

            @media (min-width: 61.8em) {
            body {
            /* scale up for medium screens */
            font-size: 161.8%;
            }
            }

            @media (min-width: 80em) {
            body {
            /* scale up for large screens */
            font-size: 200%;
            }
            }

            body * + * {
            /* block-level element margins */
            margin-top: 1em;
            }

            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
            /* secondary type styles */
            font-size: 1.25em;
            font-weight: 700;
            line-height: 1.25;
            }

            p {
            /* paragraph measure */
            max-width: 25em;
            }

            ul {
            /* remove list styling */
            list-style-type: none;
            }

            img {
            /* responsive images */
            width: 100%;
            display: block;
            }

            a {
            /* set link styling... */
            color: #0413a2;
            }

            a:focus,
            a:hover,
            a:active {
            /* ...and interaction */
            color: initial;
            text-decoration: none;
            background: #fbec5d;
            }

            ::selection {
            /* highlight */
            background: #d5d5d5;
            }

When the global scope emerges, functional classes allowing for rapid design in the browser begin to effectively write themselves.