fbpx
April 6, 2020
css layout
CSS

CSS LAYOUT | Steps To Structure a Beautiful Layout Using CSS

In this tutorial we will be discussing about CSS LAYOUT and how you can design layout with simple CSS style properties. In our previous tutorial we discussed about CSS PRINTING and how you can set a different appearance for your web page when printed on paper to when shown on screen. If you haven’t gone through the tutorial you can do so using the link below

Read previous tutorial on: CSS PRINTING | Change the Appearance Of Web Page When Printed

CSS LAYOUT

Earlier on we discussed about using HTML to design tables and layout using simple HTML properties but we can carry out same process using CSS. Due to improvement in coding and web functionalities, most browsers are beginning to adopt slowly to more CSS properties and most HTML properties are gradually been phased out. You might want to learn how to design tables and layout using CSS properties for the purpose of using them in future where there is need for it.  But we suggest you make use of whatever coding style you feel comfortable with.

Below is an example of how you can use CSS to structure tables on your web page

<table style = "table-layout:fixed;width:760px;">
   <tr height = "50px">
      <td width = "200">CSS table layout cell 1</td>
      <td width = "200">CSS table layout cell 2</td>
      <td width = "360">CSS table layout cell 3</td>
   </tr>
</table>

From the above illustration you should observe that the total width of all the columns when summed together is equal to the width of the table specified in the table layout which is set to fixed.

Steps to Build Sample Column Layout

step1

We set the basic HTML structure which contains the head and body as shown below

<!DOCTYPE html>
<html lang="en">
<head>
   
   <title>SAMPLE COLUMN LAYOUT </title>
</head>
<body>
   
</body>
</html>

step2

we structure the column layout using <div> elements with different ids, which will be added to the body of the web document.

<!DOCTYPE html>
<html lang="en">
<head>
   
   <title>SAMPLE COLUMN LAYOUT </title>
</head>
<body>
 <div id="level1">
      <div id="level2">
         <div id="level3">
            <div id="level4">
               <div id="main">
                 Main section
      
               </div>
            </div>
         </div>     
      </div>
   </div>
</body>
</html>

step3

we continue by styling each of the <div> elements using the internal styling method of adding the style element to the head section of the web page. Below is the styling structure

  <style>
      body{
         margin: 12px 12px 0 13px;
         padding: 0;
         background: cornsilk;
      }

   #level1{
      background-color: yellow;
   }
   #level2{
      background-color:white;
      margin-left: 250px;
      padding-left: 10px;
      padding-right: 10px;
   }
#level3{
   background-color: red;
   margin-right: 0px;
   padding-right: 100px;
}
#level4{
   background-color:white;
   margin-right: 100px;
   padding-right: 10px;

}
#main{
   background-color: grey;

}
   </style>

step4

Now we add all codes together to get the final result as shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      body{
         margin: 12px 12px 0 13px;
         padding: 0;
         background: cornsilk;
      }

   #level1{
      background-color: yellow;
   }
   #level2{
      background-color:white;
      margin-left: 250px;
      padding-left: 10px;
      padding-right: 10px;
   }
#level3{
   background-color: red;
   margin-right: 0px;
   padding-right: 100px;
}
#level4{
   background-color:white;
   margin-right: 100px;
   padding-right: 10px;

}
#main{
   background-color: grey;

}
   </style>
   
   <title>SAMPLE COLUMN LAYOUT </title>
</head>
<body>
   <div id="level1">
      <div id="level2">
         <div id="level3">
            <div id="level4">
               <div id="main">
                 Main section
      
               </div>
      
            </div>
      
         </div>
      
      </div>

   </div>

   
</body>
</html>

RESULT

SAMPLE COLUMN LAYOUT
Main section

CONCLUSION

Now you have learnt a little tweak on how to create CSS layout and how to structure tables using basic CSS style properties . lets move on to the next topic on CSS ROUNDED CORNER

Leave a Reply

Your email address will not be published. Required fields are marked *