Introduction to web development


CSS Syntax and Page Layout


In this course, we'll assume that (basic) HTML5 has no more secrets for you, so let's move towards the presentation layer provided by CSS3!

Do you remember our first "hello world"?
We've added, in the HTML code displayed below, a link to a CSS file named "mystylesheet.css", whose content appears in the second frame.

Click the button to see how the page differs from what it was without CSS!

<!DOCTYPE html>
        <title>Exercise 1</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="mystylesheet.css">
        <h1>Hello World!</h1>


  color: red;
See result

Adding colors and other 'decorations' to the severe pages seems pretty fun... We won't, however, begin with this feature of the 'presentation layer'.
Indeed, we'll start with the layout, which is paramount to structure the information within the page (remember low fidelity mockups!).

Words cloud created with - images sourced from

Expected outcomes

By the end of this lesson you should:

  • be able to link a CSS file to your web page
  • understand that information in an HTML page is made up with 'boxes'
  • be capable of sizing and positioning these boxes on the page