TESTING AREA for teachers - real service at plus.tuni.fi

  1. COMP.CS.200
  2. 3. CSS: syntax, selectors, positioning
  3. 3.3 CSS: SWOT

CSS: SWOT

Exercise instructions

Download and extract the exercise template to your local directory:

Then implement the following style definitions:

  1. Create a CSS file named style.css. The file must be located in the same directory as h3.html.

  2. Add appropriate class definitions in style.css and modify the body element (and related classes) so that the div elements are positioned exactly as shown in the figure below.

  3. All div elements must use the following border definition:

    border: 1px solid blue;

    This exact border style is also used in the automated tests. (Note: by default, border width is added to the element width.)

  4. Each of the four div elements (A, B, C, D) must occupy exactly one quarter (1/4) of the viewport area (100vw × 100vh).

../../_images/layout.png

When specifying widths and heights, you must use viewport units:

vw  Relative to 1% of the width of the viewport
vh  Relative to 1% of the height of the viewport

The W3C definition of the viewport is:

The viewport is the user’s visible area of a web page. Its size depends on the device being used — for example, it is smaller on a mobile phone than on a desktop monitor.

For more information, see: W3Schools: CSS Viewport Units.

Attention

  • DON’T edit the h3.html file

A+ presents the exercise submission form here.

Posting submission...