Introduction to web development

Basis

CSS Syntax and Page Layout

CSS layout

Some 'classical' methods

There are several methods allowing to position HTML elements on the page in CSS.

Some of them are more widely used than others, some of them are more classical ... and all of them have their advantages and shortcomings.

The best way to learn is to try them out and make up your mind!

Have a first glance on the links provided below, then move towards the exercise... and return to the links to answer the questions.

Exercise 4

We'll work on the page on which we drew boxes in the exercise 2. With colors added to the elements, it now looks like this:

html colored page
  1. Download here the archive that contains the HTML ans CSS files. Open the CSS file in your text editor, and answer the questions written as comments in the code.
  2. (Optional) Create a new style sheet, so that the page looks like the one below.
    Warning 1: you're not allowed to modify a single line of the HTML file!
    Warning 2: there's plenty of good answers. Feel free to test various properties!
  3. html colored page

New methods:

New convenient modules, such as Flexible Box, allow to build more efficiently the page layout. However, as they are not currently supported by all browsers, we'll expose them later, in an advanced CSS section of the course.

Warning!

'Playing' with margins may also help you to set up the layout!

Fixed layout, fluid layout, responsive design...

The types of layouts sum up in a few words and a short video.

<< Previous

Words cloud created with tagul.com - images sourced from flickr.com

Online resources for further information