[Basic Web Design] Part 3 - Styling web layout

Now, we are going to styling web layout and we can see how its look.

Add this style at the <head> tag (After <title> tag)

<style>
body {
    background: #F5F4EF;
    color: #000305;
    font-size: 87.5%; /* Base font size: 14px */
    font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    line-height: 1.429;
    margin: 0;
    padding: 0;
    text-align: left;
    }
/* Enabling HTML5 tags */
header, section, footer, aside, nav, article, figure {
    display: block;
    }

header {
    width: 950px;
    height: 150px;
    margin: 5px auto;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }

nav {
    width: 950px;
    height: 50px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }

/***** Hightlight Section *****/
#highlight {
    width: 950px;
    height: 300px;
    margin: 10px auto;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }

/***** Content Section *****/
#content {
    display: table;
    margin: 0 auto;
    width: 950px;
    }

/***** Left Aside *****/
#left-side {
    display: table-cell;
    float: left;
    width: 450px;
    height: 250px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }

/***** Right Aside *****/
#right-side {
    display: table-cell;
    float: right;
    width: 450px;
    height: 250px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }

/***** Footer *****/
footer {
    width: 950px;
    height: 50px;
    margin: 10px auto;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }
</style>
Done. You can fill the web layout with your content

Write by Arafa Daming