no ids nor classes used

it is not because you can that you must. Keep thinking.

by GCyrillus

HTML

<header>
    	<h1>header</h1>

</header>
<article>
    <div>
        <header>
            	<h1>header</h1>

        </header>
        <div>
            <nav>
                <ul>
                    <li><a href="#">Home</a>
                    </li>
                    <li><a href="#">About</a>
                    </li>
                    <li><a href="#">Clients</a>
                    </li>
                    <li><a href="#">Contact Us</a>
                    </li>
                </ul>
            </nav>
            <section>
                	<h1>HTML Ipsum Presents</h1>

                <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
                
<h2>Header Level 2</h2>

                <ol>
                    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                    <li>Aliquam tincidunt mauris eu risus.</li>
                </ol>
                <blockquote>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
                </blockquote>
                
<h3>Header Level 3</h3>

                <ul>
                    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing...

CSS

/* classless  */
 html {
    height:100%;
    width:100%;
    background:#555
}
body {
    display:table;
    height:100%;
    width:100%;
    border-spacing:0.25em;
    margin:0;
}
/*level 0 */
 body > * {
    display:table-row;
    height:1em;
}
body > header {
    background:tomato;
}
body > article {
    background:#def;
    height:100%;
}
body > footer {
    background:#159
}
/*level 1 */
 body > *> * {
    display:table-cell;
    margin:0;
    text-align:center;
    background-image :linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.5));
}
article > div {
    display:table;
    /*colspan */
    width:100%;
    height:100%;
}
/* level 3 */
 article > div > * {
    display:table-row;
    height:1em;
    background:rgba(255, 255, 255, 0.2);
    text-align:left;
}
article > div > div {
    display:table;
    /*colspan */
    width:100%;
    height:100%;
    border-spacing:0
}
/* level 4 */
 article > div > * > * {
    display:table-cell;
    background:orange;
    background-image :linear-gradient(-90deg, transparent, rgba(0, 0, 0, 0.1));
}
article > div > div > aside {
    width:180px;
    border-left:solid 0.25em #789;
}
/* 
# any level , 
# defaut, 
# reset, why those should be ahead ? it treats here left overs, here is a good place !
*/
 header, footer, section, aside, h1, p {
    padding:5px;
    line-height:1.5em;
}
nav {
    width:100px;
    border-right:0.25em solid #cde;
}
ul {
    padding:0 0.15em;
    ;
    list-style-type:none;
}

JavaScript

// no need at this point