CSS Styling to Tables


In this lesson, students will learn:

Files to Download
Table images


Styled Web Form Exercise


At the end of this project, the student will be able to demonstrate their ability to:

  • Use information from the design to obtain measurements to style the elements
  • Create a page structure using divisions <div>
  • Create a form and style with CSS


  • Folder: lastname_firstname-styled-web-form
  • XHTML document: styled-webform.html
  • Directory structure
  • External style sheet
  • Use the image provided to obtain measurements needed (height, width, margin and/or padding) in Photoshop
    [Click on image twice to get the large images, download and open in Photoshop].


  • Open Sans ( Main font, Google Web Font) and Arial (Secondary)
  • Default 1em
  • Copyright .8em
  • Logo 5em
  • form text box .8em




Place files in a folder and name: lastname_firstname-styled-web-form.
Share folder link at the end of class to the Google Classroom > Styled Web Forms.

Upload at the end of the class.
DUE: Friday, December 8, 2017

Web Form Exercise

Create an HTML document and re-create the web form below.

  • Name and Email box have a character width of 30 and a maximum of 100 characters.
  • “How did you hear about us?”  has four options:
    Google, Friend, Advert and Other.
  • The comments box is 4 characters high and 40 characters wide.


Filename: LastName_FirstName-webform.html
Upload the file to the Google Classroom > Web Form.

Web Forms

Aim: How to create a simple web form

In this lessons, students will apply:

  • The different tools for collecting data



  • Whenever you want to collect information from visitors you will need a form, which lives in the <form> element.
  • Information from a form is sent in name/value pairs.
  • Each form control is given a name and the text the user types in or the values of the options they select are sent to the server.