Exercise 2: CSS, Bootstrap, and HTML Media

The aims of this lab are to:

CSS Tutorial

Run through the basic CSS tutorial at W3Schools, up to Pseudo-element.

Write a small table in HTML, such as the Paralympic medal table here, and use CSS to style it. Include the following specifications:

  1. There should be a centered title for the table, and the table should sit in the center of the view port
  2. There should be a table with 6 columns, with the headings rank, country, gold, silver, bronze, total in bold centered text
  3. The rank column should have a black background with white centered text
  4. The country column should have white background with black left-aligned text
  5. The gold column should have a gold background, the silver column should have a silver background, the bronze column should have a bronze background, all with black centered text
  6. The total column should have a green background, and black centered text
  7. The table should have a solid red border on the outside with rounded corners
  8. Each cell of the table should have a top and bottom 2 pixel border, with no margin, and 3 pixels of padding at the top and bottom
  9. When the mouse hovers over a cell, the top and bottom border for that cell should increase to 3 pixels, and the padding at the top and bottom should decrease to 2 pixels
  10. When the mouse hovers over a row, the data cells in that row should change the background to grey
  11. The countries should include the flag as a unicode character

Bootstrap Tutorial

Run through the basic Bootstrap tutorial at W3Schools.


Have a look at the W3.CSS tutorial. You don't have to go through it all, but you can comapre some elements to Bootstrap. You're free to use either W3.CSS or Bootstrap in the assignments so try both to see which you prefer.

Use Bootstrap or W3.CSS to add a reactive style to your home page from last week. Apply container styles, and the grid model to make your page more appealing, center some elements, and allow the page layout to adjust when the viewport is resized.

Google HTML/CSS Style Guide

Read the first three sections of the Google HTML/CSS Style Guide. This is a local copy obtained from the Github Google Style Repository

While reading, correct your HTML code from the last lab to conform with the Google style guide.

Audio and Video fallbacks

Read the Mozilla MDN Docs on Video and Audio. Try add some video or audio elements to your webpage. You can download the files below, or you can find your own if you prefer.

Video Files Audio Files
NorskTippingKebab.mp4 nineoneone.mp3
NorskTippingKebab.ogv nineoneone.ogg
NorskTippingKebab.webm nineoneone.wav