Welcome to


ReDI School Munich - Spring 2021

But first...

Let us recap!

  • Selectors
  • Selectors
  • And Selectors...

The Box Model

Everything is boxes!

Lets have a look to these boxes


Types of boxes

We can say there are two main types of boxes

  • Block boxes
  • Inline Boxes

This will tell us how do they interact with other elements and how they behave

Block Boxes

  • Take up the entire space of the container
  • Breaks into a new line
  • width and height properties will be respected
  • Padding, margin and order will push others away
  • <h1>, <p> are block elements

Inline Boxes

  • Take only the space they need
  • width and height don't apply
  • Breaks into a new line
  • Vertical margin, border and padding apply but dont move other boxes
  • Horizontal margin, border and padding will apply and move other boxes
  • <a>, <span> are inline elements
  • They cannot contain other block elements

Let's take a look!

How do we change it?

In order to change the type of the box we use the display property

                  .block {
                    display: block
                  .inline {
                    display: inline
More on display property

Using width and height

These properties apply only to the content!

width + padding + border = actual width of an element

height + padding + border = actual height of an element


Box Sizing

                  .border-box {
                    box-sizing: border-box;

                  .content-box {
                    box-sizing: content-box;



  • Identifies the content that precedes the primary content of the page
  • It can contain other elements as navigation, search, branding...
  • It can be used as well as a header for the article tag


  • Represents a section that contains navigation elements
  • There might be several navs but they should be properly described
  • Is best reserved for the primary navigation areas


  • Used for content that is not very important
  • Identifies content related to the primary content
  • Related links, advertisements...


  • Identifies a self contained pice of information that it could be distributed to other websites as a unit
  • Each article should have a heading as a child
  • There can be multiple articles in one document
  • Forum or blog post, magazine article...


  • Represents a generic content
  • It groups together related elements
  • Should have a heading as a child
  • There can be multiple sections in one document


  • Represents the footer of a page, section or article
  • Is placed at the bottom of its parent element
  • Copyright, author, nav elements


  • Includes content that is unique to the page
  • It can be used only once per page
  • It should not have elements such as footer, header, main navigation


  • Contains interactive controls for submitting
  • It can contain other elements such as <input>, <select>, <option>

More on form element


  • Is used to gather data from the user
  • How it works will be dependant of their attributetype
  • Every input should have an associated label

More on input element


  • Represents a clickable element
  • It generally indicates that an action can by done by pressing it
  • If the button is not for submitting a form we need to set their type to button

More on button element


  • It provides a menu of options
  • Each option has a value represented by the <select> tag

More on select element


  • Represents a multiline text control
  • Useful when we want to capture large amounts of text from the user

More on textarea element


Create a page that includes a Contact form, with the following fields

  • Name and Last name
  • Email
  • Message

You must use the tags learned in the class to have at least header, navigation, main and footer