Css Layouts

Using CSS attributes, HTML layouts can be directly stylized, without the need for ID and CLASS selectors.
Moreover, if there is a need to edit the details of the layout elements, it is possible to add new CSS attributes via the ID and CLASS selectors.



EXAMPLE



<!DOCTYPE html> 
<html> 
<head> 
    <title>CSS Layouts</title>
 <style>
#wrap {
width:75%;
background-color: #56A5EC;
border:6px ridge gray;
}
header {
background-color: aqua;
border:2px ridge white;
padding:2px;
margin:5px;

nav {
background-color: white;
border:2px ridge white;
height:50px;
margin:5px;

main {
background-color: #BCC6CC;
border:2px ridge white;
display:inline-block;
width:77%;
margin:6px;
}
section {
background-color: green;
border:4px ridge white;
width:90%;
margin:5px;


article {
background-color: red;
border:3px ridge white;
width:90%;
height:50px;
margin:5px;
}

aside {
background-color: yellow;
border:5px ridge white;
width:16%;
float:right;
height: 530px; 
margin:5px;
}

footer {
background-color: blue;
border:5px ridge white;
height:50px;
margin:5px;

 </style>
</head> 
<body> 
 <div id="wrap">
   <header>
    <h2>HEADER</h2>
   </header>
   <nav>
    <h2>NAVIGATION BAR</h2>
   </nav> 
  <main>
      <h2>MAIN</h2>
    <section>
      <h2>SECTION 1</h2>
     <article>
      <h2>ARTICLE 1</h2>
     </article>
     <article>
       <h2>ARTICLE 2</h2>
     </article>
    </section>
    <section>
       <h2>SECTION 2</h2>
     <article>
        <h2>ARTICLE 1</h2>
     </article>
     <article>
        <h2>ARTICLE 2</h2>
     </article>
     <article>
       <h2>ARTICLE 3</h2>
     </article>
    </section>
  </main>
    <aside>
       <h2>ASIDE</h2>
   </aside>
   <footer>
    <h2>FOOTER</h2>
   </footer>
  </div> 
</body> 
</html> 





result:

HEADER

MAIN

SECTION 1

ARTICLE 1

ARTICLE 2

SECTION 2

ARTICLE 1

ARTICLE 2

ARTICLE 3

FOOTER


JSFiddle








EXAMPLE



<!DOCTYPE html> 
<html> 
<head> 
    <title>CSS Layouts</title>
 <style>
#wrap {
width:75%;
background-color: #56A5EC;
border:6px ridge gray;
}
header {
border:2px ridge white;
padding:2px;
margin:5px;

nav {
border:2px ridge white;
height:50px;
margin:5px;

main {
border:2px ridge white;
display:inline-block;
width:77%;
margin:6px;
}
section {
border:4px ridge white;
width:90%;
margin:5px;


article {
border:3px ridge white;
width:90%;
height:50px;
margin:5px;
}

aside {
border:5px ridge white;
width:16%;
float:right;
height: 530px; 
margin:5px;
}

footer {
border:5px ridge white;
height:50px;
margin:5px;

 </style>
</head> 
<body> 
 <div id="wrap">
   <header>
    <h2>HEADER</h2>
   </header>
   <nav>
    <h2>NAVIGATION BAR</h2>
   </nav> 
  <main>
      <h2>MAIN</h2>
    <section>
      <h2>SECTION 1</h2>
     <article>
      <h2>ARTICLE 1</h2>
     </article>
     <article>
       <h2>ARTICLE 2</h2>
     </article>
    </section>
    <section>
       <h2>SECTION 2</h2>
     <article>
        <h2>ARTICLE 1</h2>
     </article>
     <article>
        <h2>ARTICLE 2</h2>
     </article>
     <article>
       <h2>ARTICLE 3</h2>
     </article>
    </section>
  </main>
    <aside>
       <h2>ASIDE</h2>
   </aside>
   <footer>
    <h2>FOOTER</h2>
   </footer>
  </div> 
</body> 
</html> 





result:

HEADER

MAIN

SECTION 1

ARTICLE 1

ARTICLE 2

SECTION 2

ARTICLE 1

ARTICLE 2

ARTICLE 3

FOOTER