HTML CSS

Advanced

40 mins

Teacher/Student led

205 points

What you need:
Chromebook/Laptop/PC or iPad/Tablet

CSS Website Layout

Delve into the world of CSS website layouts with this step-by-step lesson. Learn about the common areas of a website, how to code a header, content and footer, and how to structure your layout with columns. Experiment with HTML and CSS code to create your own website layout.

Learning Goals Learning Outcomes Teacher Notes

Warning: Your screen size is quite small for viewing this. Rotate your device into landscape mode if you can.

1 Introduction
2 Header
3 Content
4 Columns
5 Footer
6 Putting it all together
Quiz

1 - Introduction

Websites can come in hundreds of different layouts and in this lesson we will take a look at some of the most common layouts and how to code them in CSS.

A website is normally broken into the following areas:

Header - that contains the logo or branding of the website and the navigation menu. This normally stays the same on each page in the website.
Content - that contains the main content of the web page. This changes from page to page on the website.
Footer - this normally contains some secondary links such as for social media channels or contact us information.

Header

Content

Footer

30 points

2 - Header

The header appears at the top of the web page and would normally contain:

The logo or branding of the website. This usually acts as a link to the "homepage" of the website.
The navigation for the website. This will have links to the main areas of the website.

Here is an example of HTML and CSS that creates a simple header for a website. Take a look at the HTML and CSS code and see how we have used CSS to style the header, brand and menu a.

<div class="header">
    <a href="http://www.acmecarsales.com" class="brand">Acme Car Sales</a>
    <div class="menu">
        <a href="http://www.acmecarsales.com/NewCars">New Cars</a>
        <a href="http://www.acmecarsales.com/UsedCars">Used Cars</a>
        <a href="http://www.acmecarsales.com/Servicing">Servicing</a>
    </div>
</div>

.header {
    background-color: lightblue;
    text-align: center;
    padding: 20px;
    border-bottom: solid blue 3px;
}

.brand {
    float: left;
    font-family: Verdana;
    font-size: 20px;
    color: black;
    text-decoration: none;
}

/* this styles each <a></a> tag inside the .menu class */
.menu a {
    font-family: Arial;
    font-size: 18px;
    color: darkblue;
    margin-right: 10px;
}

30 points

3 - Content

The layout of content on a website can vary from page to page. For example the layout for a page that has a list of products is going to be different from a page an "About Us" page that has text and images.

Usually though the content area will be broken into one of the following layouts:

1 column layout

Header

Footer

2 column layout

Header

Footer

3 column layout

Header

Footer

30 points

4 - Columns

We can use CSS to set the width of the columns to lay them out the way we want. In the following example we have 2 columns laid out with widths of 31% and 65% (and a 2% padding all around).

We use float: left property to specify that the <div></div> column elements float to the left, otherwise they would appear stacked on top of each other.

<div class="content">
    <div class="leftCol">
        Left Column
    </div>
    <div class="rightCol">
        Right Column
    </div>
</div>

.leftCol {
    float: left;
    width: 31%;
    padding: 1%;
    background-color: lightblue;
}

.rightCol {
    float: left;
    width: 65%;
    padding: 1%;
    background-color: lightgreen;
}

Try changing the values in the width and the padding properties and see how it affects the columns. Note that if the total of the width and padding for both of the columns goes over 100%, then the right column will move down under the left column as they are greater than the 100% screen width.

E.g. (1% + 31% + 1%) + (1% + 65% + 1%) = 100%

30 points

5 - Footer

The footer appears as the bottom of the web page and would normally contain some information about the company/website and some secondary links.

Here is an example of HTML and CSS that creates a simple footer for a website. Take a look at the HTML and CSS code and see how we have used CSS to style the footer, info and links a.

<div class="footer">
    <div class="info">
        Acme Car Sales<br />
        123 The Street<br />
        Townsville
    </div>
    <div class="links">
        <a href="http://www.acmecarsales.com/AboutUs">About Us</a>
        <a href="http://www.acmecarsales.com/ContactUs">Contact Us</a>
        <a href="http://www.acmecarsales.com/Terms">Terms and Conditions</a>
    </div>
</div>

.footer {
    background-color: lightblue;
    text-align: center;
    padding: 20px;
    border-top: solid blue 3px;
}

.info {
    font-family: Verdana;
    font-size: 15px;
    color: black;
    margin-bottom: 20px;
}

/* this styles each <a></a> tag inside the .links class */
.links a {
    font-family: Arial;
    font-size: 12px;
    color: darkblue;
    margin-right: 10px;
}

30 points

Unlock the Full Learning Experience

Get ready to embark on an incredible learning journey! Get access to this lesson and hundreds more in our Digital Skills Curriculum.

Get started

CSS Website Layout

Live Class Feed

1 - Introduction

2 - Header

3 - Content

4 - Columns

5 - Footer

Unlock the Full Learning Experience

Learning Points