Create a simple page layout with CSS

Last update on August 19 2022 21:50:30 (UTC/GMT +8 hours)

This slide presentation shows how to create a simple web page layout with CSS. Useful for when you have learned core CSS and looking to create a webpage with by your own.

Transcript

<!doctype html>
<html lang="en">
<head>
<title>A simple CSS layout</title>
</head>
<body>
</body>
</html>

Save this as layout.html on Desktop.

To create a navigation with unordered list, add following within <body> and </body>

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>

Add <style> and </style> after </title> and before </head>

Add following CSS code within <style> and </style>, don't write text after //, those are comments to help you understand what that code does. Follow this for all of the CSS code.

.navigation {
list-style-type:none;
//removes bullets before list items
width: 100%;
//Sets the width of the navigation to full browser window
margin:0;
// sets margin of naviagtoin to zero
padding:0;
//sets padding of navigation to zero
height:30px;
//sets height of the navigation to 30 pixelbackground-color:
#600;
// sets the background color of the navigation
font-family:Arial;
//sets the font style of the text within the navigation
font-size:100%;
//sets the size of the font of the text within the navigation
}

This creates a new class .navigation.

Now add navigation class to the ul

<ul class=”navigation”>

keep the remaining code unaltered. Save the file and run it on browser and see how it looks.

You may find some whitespace above the navigation.

Add following before the navigation class within <style> and </style>

body{
margin: 0;
padding: 0;
}

This removes the any default margin or padding of the html page. Save the file, run the file and see the difference.

Add following after navigation class within <style> and </style>

.navigation li {
// to set style for list items within navigation class
float:left;
//places list items next to each other
height:30px;
// sets height of the list items
line-height:30px;
//sets line height, i.e. Height of the text within list items
}

Save and run the file. See the difference.

Add following code after .navigation li block

.navigation li a {
// style for links within list items within navigation class
display:block;
// links will be treated as blocks (like rectangles)
padding: 5px; //sets 5 pixel padding on all four sides of the links
color:#FFF;
//sets color of the text within links
text-decoration:none;
// removes underline from the links
}

Save and run the file, see the difference.

Add following after .navigation li a block

.navigation li a:hover {
//for hover style, i.e. When you place your mouse on the links
display:block;
// creates blocks
padding: 5px; //sets padding
color:orange;
//sets color on hover
text-decoration:none;
// removes underline
}

Save and run the file, see the difference.

For creating page structure where you place your content, we create Grids. Grids and made up of rows and columns. We will see how to do that in a moment.

Add following code after .navigation li a:hover block

.row {
// creates a new class row
width: 100%;
//sets the width of the row to full browser window
}

Add follwing after .row block

.row:before, .row:after {
// this makes sure that if there are multiple rows they will not overlap
display: table;
content: "";
}

Save the code.

Add follwing within body after </ul>

<div class="row">
</div>

Save the code.

We will now create three columns within the row. First colum will be of width 25%, second column of 50% and third again of 25%. For that first add follwing code within <div class=”row”> and </div>.

<div class="col1">
<h1>This is column one</h1>
</div>
<div class="col2">
<h1>This is column two</h1>
</div>
<div class="col3">
<h1>This is column three</h1>
</div>

Save the code and run the file and see how it looks on browser.

Now, within <style> and </style>, after .row:before, .row:after block, add following

.col1 {
float: left;
width: 23%;
margin: 1%;
}
.col2 {
float: left;
width: 48%;
margin: 1%;
}
.col3 {
float: left;
width: 23%;
margin: 1%;
}

float: left places columns next to each other. Width defines the width of the columns and margin sets margin of the columns. Note how the width is calculated :

for first column: 23%(main width)+1%(margin left)+1%( margin right) = 25 for second column: 48%(main width)+1%( margin left)+1%( margin right) = 50 for second column: 23%(main width)+1%( margin left)+1%( margin right) = 25 Total width = 25%+50%+25% = 100% which is equal ot the width defined for row (i.e. 100%).

Save and run the file. See the difference.

We will now create a footer section for our webpage. Which will lie at the bottom of the page.

For that add following code after .col3 block and before </style>

.footer {
// creates a new class footer
clear: both;
//makes sure that no other content overlaps
position: absolute;
// position is exactly what we will define
height: 30px; // height of the footer is 30 pixel
bottom:0;
// footer will be placed zero pixels from the bottom of the page
background-color:#600;
// sets background color of the footer
width:98%;
//sets width of the footer
color: #fff;
//sets color of the text written within the footer section
font-size: 100%;
//sets size of the font
padding: 1%;
//sets padding
}

Save the file.

Add following after last </div> and before </body>

<div class="footer">
<p>This is footer</p>
</div>

Save and run the file. See how it looks on browser. This is how you can create a simple webpage with HTML and CSS.

Try adding an image on col2 replacing the paragraph. And see how it looks.