Back

Goal: Learn CSS to create visual style for HTML pages

Task: Use CSS to design the HTML pages you created last time (or create new pages), create similar style for all pages.

  1. Choose nice color combination for your pages.
    1. Get inspiration from colorhunt.co palettes, Canva or Visme blogs etc.
  2. Create the header and layout as described here:
    1. Create external CSS file, include it in the document using link tag.
    2. On top of the document create a 500px wide header using div tag.
    3. Inside the header create a horizontal menu with links, using ul, li tags and list-style: none CSS property.
    4. Use "a:hover" pseudoclass to change link menu link color when hovering over link.
    5. Use padding and margin properties to style the menu links.
    6. Create a horizontal line under header using border property.
  3. Style the contents:
    1. Add class and id attributes to any HTML elements you want to style.
    2. Use CSS properties to style text, example, font-family, font-size etc.
    3. Style all visited links to not have underline and have grey color.
    4. Create paragraphs using p tag. Add images inside paragraphs using img tag. Use float property to put image on left or right side of text.
  4. Create print style:
    1. Page should look differently when shown on screen or printed on paper. For example, to save ink/toner printed pages should have images and navigation hidden using attribute display: none; vai visibility: hidden;.

Here are some examples:

html
css

Create files in a new folder named "Name Surname Assign2" (replace with your name and surname).
Archive the folder as zip file.
Send the archive to mikelis@va.lv.