CSS Layout Exercise
CSS Layout Exercise
EXERCISE
<div id="footer">
Copyright © 2010 Natcoll DIGITAL TECHNOLOGIES TEACHER RESOURCES: LEVEL 1: CSS LAYOUT EXERCISE 1
L1 WEB DESIGN
EXERCISE
Create the container style
1 Open your CSS file.
2 Create a new id style for your container div.
3 Set its width to 750 pixels wide.
4 Set the left and right margins to auto. This will make the container sit in the middle of
the browser window.
Other optional settings
• You could change the background colour of the container. In the example (screenshot
at the end of this exercise), this has been set to white.
• You could run a border down the left and right hand sides of the container.
• If you do either of these things, you will also need to add some padding to the
container, so the content does not sit hard up against the edges of the container.
2 DIGITAL TECHNOLOGIES TEACHER RESOURCES: LEVEL 1: CSS LAYOUT EXERCISE Copyright © 2010 Natcoll
L1 WEB DESIGN
EXERCISE
Create the footer section styles
1 Create a new id style for your footer div.
2 Give it a background colour and add a little bit of top margin, so that the main content
does not sit hard up against the top of the footer:
–
3 In case you have any pages where the main content is shorter than the menu, you need
to add a clear property to the footer; this will always make the footer sit underneath any
floated sections (including the floated image):
–
4 Create a new style which targets the p tag inside the footer div.
5 Change the size and the colour. You might also want to align the text to the centre:
–
6 So you can get the text to sit in the vertical centre of the footer, set the margins to 0,
then add some padding at the top and bottom:
–
–
–
7 Create new styles for #footer a:link, #footer a:visited, #footer a:hover and #footer a:active.
Copyright © 2010 Natcoll DIGITAL TECHNOLOGIES TEACHER RESOURCES: LEVEL 1: CSS LAYOUT EXERCISE 3
L1 WEB DESIGN
EXERCISE
Your finished page should look something like this when you preview it in a browser:
Extensions
If you have extra time for this exercise, try the following:
• Replace heading 1 with a text heading image you create in your image manipulation
software.
• Use this initial page as a template for more pages in the same site. Save the page with
one of the names you have already put into the menu, then find some appropriate text
online to copy and paste (or invent some text), and find a public domain or Creative
Commons licensed image to use to replace the tiger picture.
• Add a background image to the body tag style.
4 DIGITAL TECHNOLOGIES TEACHER RESOURCES: LEVEL 1: CSS LAYOUT EXERCISE Copyright © 2010 Natcoll