Unit 1 - the essentials

Watch this video first:

This video is useful as well.

• Now ,read the following page and try out the example in PSPad.
• Check out the capabilities of CSS by exploring the different designs on CSS Zen Garden.
• Read the "CSS Introduction" page and try out the examples mentioned.
• Now, read the "CSS Syntax" page, try out the examples and do the four exercises at the bottom.
• If you wish to see all the theory in one PDF, you can use this CSS Primer.
• CSS3 Quick Reference Guide

Unit 2 - styling html elements

Read the following tutorials on styling various elements of your HTML page:

• Background
• Text
• Font
• Border

Once you tried all these, do the following exercises:

Task 2.1

Format your HTML test file with CSS so that it looks similar to the picture below - of course, you can change the pictures and colors. Email me the HTML file as attachment, please.

Unit 3- margins and padding

In this lesson you will learn:

• how to set up the outer margin for your HTML elements - the margin property,
• how to set up the inner margin for your HTML elements - the padding property

Remember, that the margin/padding width should be ideally set up as a percentage of the screen width e.g. "margin-top: 2%;" as opposed to setting it up by using pixels. This way, the margin and padding will always stay relative to the current page width (for instance, when resizing the window, zooming in/out, or just simply viewing the page using a different screen resolution).

Study the following pages and do the exercises listed at the bottom of each page:

• W3Schools HTML unit on the DIV tag
• W3Schools CSS unit on margin
• W3Schools CSS unit on padding
• W3Schools CSS unit on the Box Model

When done, sign up for the following codeacademy online course that will help you revise your knowledge of HTML and CSS.

Task 3.1

Reformat the document you styled in Unit 2, Task 1, applying margins and padding to the different HTML elements. An example of how you could do it follows below. Please, make sure the border image (a PNG file with transparent background) is set to repeat vertically on the right hand side of the screen.

Task 3.2

Try to make the background color of the table less opaque (more see-through) by adjusting its opacity property. You can read more on opacity (opposite of transparency) here. You can then modify the opacity of other elements on your page, such as pictures, paragraphs or background images.