Introduction to web development

Basis

CSS Syntax and Page Layout

Introduction


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>
<html>
    <head>
        <title>Exercise 1</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="mystylesheet.css">
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>

mystylesheet.css

                          
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!).

Next >>


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

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