Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
107 views

HTML & CSS - Lesson 4

This document discusses using CSS to control the layout and positioning of HTML elements on a webpage using <div> tags. It provides examples of applying CSS styles to <div> elements to produce a page header, navigation bar, and main content section. CSS properties like background, text-align, width, height, float, and padding are used to position the <div> elements and control formatting. The document encourages readers to experiment with these CSS techniques to customize a sample webpage code provided.

Uploaded by

Eliana Fellema Bulla
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
107 views

HTML & CSS - Lesson 4

This document discusses using CSS to control the layout and positioning of HTML elements on a webpage using <div> tags. It provides examples of applying CSS styles to <div> elements to produce a page header, navigation bar, and main content section. CSS properties like background, text-align, width, height, float, and padding are used to position the <div> elements and control formatting. The document encourages readers to experiment with these CSS techniques to customize a sample webpage code provided.

Uploaded by

Eliana Fellema Bulla
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

HTML & CSS – CSS, DIVs and Layouts

Introduction

Previously we learnt how <div> tags allow us to separate our HTML code into sections. And
by giving each section a unique name (ID), we can apply CSS code to only elements
within these sections, as opposed to globally.

Interestingly, we can also apply CSS code to the DIV elements themselves, and by doing
so we can completely change the layout of a webpage.

DIVs and Layouts

Consider the HTML code below, which shows HTML contained inside 3 different <div>
elements. Currently, the code simply displays the contents of each <div> in a linear
fashion.
By applying CSS code to the <div> elements themselves, we can begin to restructure the
sections so that they appear in different locations of the page.

Let’s take a look.

Producing the Page Header

By applying these two lines of CSS code to the first <div> element, we can add a
background and centre align the text, which produces the following result:

Producing the Navigation Bar

By applying the above CSS code to the second <div>, we can alter the width and height
of the <div> element, so that it is narrow and doesn’t expand across the page.
Furthermore, by adding the CSS code float: left; the <div> is positioned on the left side of
its invisible container, allowing other elements to wrap around it.
Repositioning the ‘Main Page’ Section

After the last bit of CSS code was added, you will have noticed that the ‘main’ <div>
element was repositioned so it was next to the ‘nav’ <div>. This is how applying CSS code
to <div> elements can alter the layout of our webpages!

However, you will see that the contents of the ‘main’ <div> is right up close to the ‘nav’
<div>, which is not desirable.

By adding the following piece of CSS code, applying it to the ‘main’ <div> element, we
can add a little padding to its left and further improve the wrapping of our <div>
elements, resulting in better positioning of the ‘main’ <div>.

…and there you have it! Amazing what a little CSS code can do to the layout of a
webpage!
Now it’s your turn…

TASKS
Activity 1: Setting Up the Starter Code

a) Visit the following website: https://coder.computerscienceuk.com/htmlcoder/

b) Delete the code provided by the HTML editor.


c) Copy and paste the following HTML code into your file.
Activity 2: Organising the ‘Page Divisions’ on the page using CSS

1. Add the appropriate CSS code to give the header a background


colour and to centre any text in that section.

2. Now let’s add some CSS to make the ‘Nav’ section appear under the
header and positioned to the left of the screen.

3. Now let’s finish off the CSS to add a little space between the Nav and
the Main and to ensure that the ‘Main’ section always appear to the
right of the Nav section no matter what content we add to it.
4. Add some more CSS code to alter how the page looks (look at the
workbooks from the previous lessons to help you) and develop the
webpage with your own information / images.

Examples:

- Change the fonts of the text in the various page sections


- Change the background colours (maybe try adding a background
with two colours that mix, or a background image)
- Add an image to the main section
- Add a page border

…think of what you have been taught over the last 4 lessons and show off
your skills!

You might also like