Watch this video first:
This video is useful as well.
Read the following tutorials on styling various elements of your HTML page:
Once you tried all these, do the following exercises:
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.
In this lesson you will learn:
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:
When done, sign up for the following codeacademy online course that will help you revise your knowledge of HTML and CSS.
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.
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.