<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   
Scales the page properly on  mobile 

 MDN Web Docs — Meta viewport 

body {
    margin: 0px;
    
          
<body> has a margin of 8px by default 
}

<main>
    <section id='hero'></section>
    <section id='about'></section>
    <section id='contact'></section>
</main>

main {
  
This style can be applied to either:

main · the  container
section · individual  sections
* · all content  elements

This allows for full bleed layouts 
    max-width: 720px;
    
              
Set the  page width
    margin-inline: auto;
    
   
 Horizontally center the content on  Desktop
    padding-inline: 1em;
    
    
 Horizontally space the content on  mobile
    display: flow-root;
    
    
Ensure children margin is contained in  section or  container


flex · grid achieve the same result
}

<header>
    <!-- logo -->
    <a href="/" class="logo">
        <img src="/logo.svg" width="64" height="64" alt="Logo"/>
    </a>
    <!-- pages -->
    <nav>
        <ul>
            <li><a href="/blog">Blog</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
    </nav>
    <!-- mobile menu -->
    <label class="menu">
        <input type='checkbox' name='menu' hidden/>
        <img src="/menu.svg" width="64" height="64" alt="Menu"/>
    </label>
</header>

header {
Tweaked <main> — 4 collapsed lines
    max-width: 720px; 
    margin-inline: auto;
    padding-inline: 1em;
    /* display: flow-root; */ 
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    
  
 Horizontally center the middle content on  Desktop
    align-items: center;
    
   
 Vertically center the content
    gap: 1em;

    nav {
    
  
<nav> Layout on  Desktop
        display: flex;
        justify-content: center;
        gap: 1em;
    }

    a { margin-block: 1em; }
    
       
 Vertically space the content

    .logo {
        justify-self: start;
        
    
 Left align the icon in the  first cell
    }

    .mobile {
        justify-self: end;
        
    
 Right align the mobile menu icon in the  last cell
        grid-column: 3;
        
  
Ensure the mobile menu icon is in the  last cell on  mobile
        display: none;
        
    
The mobile menu icon is only  displayed on  mobile
    }

    ul, li { display: contents; }
    
             
Remove the default  list styling
}

@media (max-width: calc(175px + 4em)) {
   
Navbar layout on  mobile

Size of <nav> · 175px + Size of total spacing 4em
@media does not support var()

    header {
        padding-bottom: 1em;

        .menu { display: block; }
        
            
The mobile menu icon is  displayed on  mobile

        nav {
            grid-row: 2;
            grid-column: 1 / 4;
            
  
Rearrange the <nav> within the  grid on  mobile

Move to the  second row of the grid

Grow to take up  all columns

            flex-direction: column;
            
  
The <nav> is  Vertical on  mobile
            gap: 0.5em;
        }
    }

    header:has(input[name='menu']:not(:checked)) {
    
                                       
The <nav> is  displayed only when the menu is open on  mobile
        padding-bottom: 0em;

        nav {
            display: none;
        }
    }
}

<footer>
    <section id="footer">
Brand — 19 collapsed lines
        <!-- brand --> 
        <hgroup class="brand">
            <!-- logo -->
            <h2>
                <a href="/" class="logo">
                    <img src="/logo.svg" width="64" height="64" alt="Logo"/>
                </a>
            </h2>
            <!-- headline -->
            <p>...</p>
            <!-- social media -->
            <nav class="social-media" aria-label="Social Media">
                <ul>
                    <li><a rel="me" href="https://github.com/..."  aria-label="GitHub">GitHub</a></li>
                    <li><a rel="me" href="https://discord.com/..." aria-label="Discord">Discord</a></li>
                    <li><a rel="me" href="https://twitter.com/..." aria-label="X">X</a></li>
                </ul>
            </nav>
        </hgroup> 
        <!-- pages -->
        <nav>
            <hgroup>
                <h3>About</h3>
                <ul>
                    <li><a href="/story">Story</a></li>
                    <li><a href="/help">Help</a></li>
                    <li><a href="/community">Community</a></li>
                </ul>
            </hgroup>
            <hgroup>
                <h3>Blog</h3>
                <ul>
                    <li><a href="/getting-started">Getting Started</a></li>
                    <li><a href="/technical-notes">Technical Notes</a></li>
                    <li><a href="/news">What's New</a></li>
                </ul>
            </hgroup>
        </nav>
    </section>
Additional sections — 15 collapsed lines
    <section id="legal"> 
        <!-- copyright -->
        <p>&copy; 2026 Site, Inc. All rights reserved.</p>
        <!-- legal documents -->
        <nav aria-label="Legal Navigation">
            <ul>
                <li><a rel="privacy-policy" href="/privacy">Privacy Policy</a></li>
                <li><a rel="terms-of-service" href="/terms">Terms of Service</a></li>
            </ul>
        </nav>
    </section>
    <section id="credit">
        <!-- credit -->
        <p>Designed and built by <a href="/about" rel="author">Stephcraft</a></p>
    </section> 
</footer>

footer {
Tweaked <main> — 4 collapsed lines
    max-width: 720px; 
    margin-inline: auto;
    padding-inline: 1em;
    section { display: flow-root; } 

    section#footer {
        margin-bottom: 1em;

Brand — 9 collapsed lines
        display: flex; 
        flex-wrap: wrap;
        gap: 1em;

        hgroup.brand > nav.social-media {
            display: flex;
            justify-content: center;
            gap: 1em;
        } 

        nav {
        
  
 Row layout
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        hgroup {
        
 Column layout
            display: flex;
            flex-direction: column;
            margin-bottom: 1em;
        }
    }

Additional sections — 8 collapsed lines
    section#legal { 
        nav {
            display: flex;
            justify-content: center;
            gap: 1em;
            margin-block: 1em;
        }
    } 

    p { text-align: center; }

    ul, li { display: contents; }
    
             
Remove the default  list styling
}

<aside id='documents'></aside>
<main>
    <section id='hero'><section>
    <section id='about'></section>
    <section id='contact'></section>
</main>
<aside id='table-of-contents'></aside>

body {
  
Apply a full bleed  grid layout template


Each  line is named to be referenced later 
    display: grid;
    /*
       [  1fr ][ min/max ][  1fr  ]
       [ left ][ content ][ right ]
       [           full           ] */
    grid-template-columns:
        [full-start left-start]
        1fr
        [content-start left-end]
        minmax(auto, calc(720px + 1em * 2))
        
                     
Set the  page width

The  Horizontal spacing should be defined in either calc() or gap
minmax(auto, 720px) is equivalent to max-width: 720px
        [content-end right-start]
        1fr
        [full-end right-end];
}

main, header, footer {
    grid-column: content;
    
  
Place <main> <header> <footer> in the  column content
Tweaked <main> — 5 collapsed lines
    max-width: 720px; 
    /* margin-inline: auto; */
    padding-inline: 1em;
    display: flow-root;
    box-sizing: border-box; 
}

/* left <aside> */
aside:has(+ main) {
    grid-column: left;
    
  
Place <aside> in the  column left
    justify-self: end;
    
    
 Right align <aside> next to  content
}

/* right <aside> */
main + aside {
    grid-column: right;
    
  
Place <aside> in the  column right
    justify-self: start;
    
    
 Left align <aside> next to  content
}

aside {
    grid-row: 1 / 1000;
    
  
Grow <aside> to take up  all columns


1 aligns alongside the  content
0 aligns at the  top of the  page
1000 a large number · closest equivalent to auto
}

@media (max-width: calc(720px + 150px + 150px)) {
   
 Remove <aside> on  smaller screens · this one is removed first

Size of <main> · 720px + Size of both <aside> 150px + 150px
@media does not support var()
    aside#table-of-contents {
        display: none;
    }
}

@media (max-width: calc(720px + 150px)) {
   
 Remove <aside> on  smaller screens · this one is removed last

Size of <main> · 720px + Size of this <aside> 150px
@media does not support var()
        aside#documents {
            display: none;
    }
}

<img src="image.png"/>

img {
    display: block;
    
    
 Images are inline by default causing a bottom offset defect

Inline elements follow the text baseline height
    max-inline-size: 100%;
    
        
Ensure  Images don't overflow the container

Equivalent to max-width

    block-size: auto;
    
     
Ensure  Images aspect ratio is maintained

Equivalent to height

}

<picture>
    <source srcset="image-portrait.png" media="(orientation: portrait)"/>
    
    
 Image displayed in  portrait orientation
    <source srcset="image-landscape.png" media="(orientation: landscape)"/>
    
    
 Image displayed in  landscape orientation
    <img src="image-landscape.png"/>
    
   
Fallback  Image
</picture>

<video autoplay loop>
    <source src="image-portrait.png" type="video/mp4" media="(orientation: portrait)"/>
    
    
 Video displayed in  portrait orientation
    <source src="image-landscape.png" type="video/mp4" media="(orientation: landscape)"/>
    
    
 Video displayed in  landscape orientation
</picture>

video {
    max-inline-size: 100%;
    
        
Ensure  Video doesn't overflow the container

Equivalent to max-width

    block-size: auto;
    
     
Ensure  Video aspect ratio is maintained

Equivalent to height

}

body {
    font-size: clamp(0.75rem, 0.75rem + 1vw, 1rem);
    
              
 Fluid font size with clamp(min, formula, max) allows to dynamically scale text


The  formula must use vw units to scale
The font size is between min and max

 Web.dev Docs — Clamping text 
}

p.ellipsis {
    white-space: nowrap;
    
      
Disable  Text wrap
    overflow: hidden;
    
    
Clip  Text overflow
    text-overflow: ellipsis;
    
       
Enable  Text ellipsis
}

p strong {
    white-space: nowrap;
    
      
Disable  Text wrap for small terms on  Desktop
}

@media (max-width: 200px) {
    p strong {
        white-space: normal;
        
      
Enable  Text wrap for small terms on  mobile
    }
}

body {
    overflow-wrap: anywhere;
    
       
Ensures  Words wrap on  mobile
}

<h1>Title</h1>
<h2>Subtitle</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Paragraph</p>

h1 {
    font-size: 2em;
    margin-block: 0.67em; /* 2:3 */
}

h2..h6 — 24 collapsed lines
h2 { 
    font-size: 1.5em;
    margin-block: 0.83em; /* 5:6 */
}

h3 {
    font-size: 1.17em;    /* 7:6 */
    margin-block: 1em;
}

h4 {
    font-size: 1em;
    margin-block: 1.33em; /* 4:3 */
}

h5 {
    font-size: 0.83em;    /* 5:6 */
    margin-block: 1.67em; /* 5:3 */
}

h6 {
    font-size: 0.67em;    /* 2:3 */
    margin-block: 2.33em; /* 7:3 */
} 

p {
    font-size: 1em;
    margin-block: 1em;
}

<link rel="stylesheet" href="/style.css"/>
<link rel="alternate stylesheet" href="/desktop.css" media="(min-width: 800px)"/>
<link rel="alternate stylesheet" href="/mobile.css"  media="(max-width: 800px)"/>

@import "style.css";
@import "desktop.css" (min-width: 800px);
@import "mobile.css"  (max-width: 800px);

@media (min-width: 720px) {}
@media (max-width: 720px) {}
@media (hover: none) {}

.container {
    container-type: inline-size;
}

@container (min-width: 400px) {}